Brand Kit

Design system reference and source of truth for the portfolio.

Colors

Primary palette

50: #f0f9ff

100: #e0f2fe

200: #bae6fd

300: #7dd3fc

400: #38bdf8

500: #0ea5e9

600: #0284c7

700: #0369a1

800: #075985

900: #0c4a6e

Gray scale

50: #f9fafb

100: #f3f4f6

200: #e5e7eb

300: #d1d5db

400: #9ca3af

500: #6b7280

600: #4b5563

700: #374151

800: #1f2937

900: #111827

Typography

Font family: Inter. Weights: 300, 400, 500, 600, 700.

h1 — text-4xl font-bold

Heading 1

h2 — text-3xl font-bold

Heading 2

h3 — text-2xl font-semibold

Heading 3

Body — text-base

Body text uses Inter at 400 weight. Use gray-700 for light mode and gray-300 for dark mode.

Components

Primary button: btn-primary

Secondary button: btn-secondary

Card: rounded-lg shadow-md

Card Title

Card content with rounded corners and soft shadow.

Input: rounded-md border

Logo

Cat icon with company name and tagline. Use fill="currentColor" for flexible theming.

On light background

CURIOUS CAT CONSULTING

CURIOUSLY BETTER SOFTWARE

On dark background

CURIOUS CAT CONSULTING

CURIOUSLY BETTER SOFTWARE

Spacing & Layout

Container: max-w-4xl mx-auto px-4 sm:px-6 lg:px-8
Section padding: py-16 or py-24
Card padding: p-6
Button padding: px-4 py-2 or px-6 py-3

Agentic Guidance

Copy this prompt to give agents consistent brand guidance for design and copy.

When designing or writing for this brand, follow these guidelines:

## Colors
- Primary: Sky blue scale. Main brand: #0284c7 (primary-600). Dark accent: #0c4a6e (primary-900).
- Backgrounds: Light mode bg-gray-50 (#f9fafb); dark mode bg-gray-900 (#111827).
- Text: Light mode text-gray-800 (#1f2937); dark mode text-white or text-gray-300.
- Links/accents: primary-600 hover primary-800 (light); primary-400 hover primary-300 (dark).

## Typography
- Font: Inter (weights 300, 400, 500, 600, 700).
- Headings: Bold (700), gray-800 / gray-100 in dark mode.
- Body: Regular (400), gray-700 / gray-300 in dark mode.
- Scale: h1 text-4xl, h2 text-3xl, h3 text-2xl, h4 text-xl, h5 text-lg, h6 text-base.

## Components
- Buttons: Primary = bg-primary-600 hover:bg-primary-700 text-white, rounded-md. Secondary = border border-primary-600 text-primary-600.
- Cards: rounded-lg, shadow-md, white/dark:bg-gray-800.
- Focus: ring-2 ring-primary-500 ring-offset-2.
- Inputs: rounded-md, border border-gray-300, focus:ring-primary-500.

## Layout
- Container: max-w-* mx-auto, padding px-4 sm:px-6 lg:px-8.
- Section spacing: py-16 or py-24.

## Voice
- Professional, approachable, concise. Avoid jargon; explain technical concepts clearly.