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: Geist, with Geist Mono for small labels. Weights: 400, 500, 600.

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 Geist at 400 weight, in ink-2 (#3d5a6a) on light backgrounds and #b9c8cf on dark.

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 mark
CURIOUS CAT CONSULTING
CURIOUSLY BETTER SOFTWARE

On dark background

Curious Cat Consulting mark
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 Curious Cat Consulting, follow these guidelines:

## Colors
- Brand blue: #0284c7. Use it for the cat mark, rules, and large type. It only clears 3:1 on white, so it is not for body-size text.
- Links and buttons (light mode): #0369a1, hover #075985, white button text. Dark mode: #7dd3fc links, #38bdf8 buttons with #082f49 text.
- Light mode: paper #ffffff, paper-2 #f3f6f7, tint #eaf4f3; ink #15242d (headings), ink-2 #3d5a6a (body), ink-3 #557080 (labels); rules #dce5e8.
- Dark mode: paper #0e161b, paper-2 #131d23, tint #10252f; ink #eef4f6, ink-2 #b9c8cf, ink-3 #8ea3ad; rules #243640.

## Typography
- Font: Geist (sans) for everything, Geist Mono for small labels.
- Headings: semibold (600), tight tracking. Body: regular (400), relaxed line height, about 40rem measure.
- Labels above sections: Geist Mono, all caps, tracked, small, ink-3.

## Components
- Buttons: rounded-md, 44px minimum height. Primary is the link blue; secondary is a 1px rule border.
- Cards and panels: 1px rule border, rounded-lg or rounded-xl, no drop shadows beyond shadow-sm.
- Focus: a 2px brand-blue outline, offset 3px. Never removed.

## Layout
- 12-column grid, max width 76rem, 20px side gutter on phones.
- Sections separated by hairline rules; a narrow label column on the left on wide screens.
- No gradients, glows, stock photos, or AI-generated imagery. Real screenshots only.

## Voice
- Nonchalant over enthusiastic, dry over peppy, helpful over salesy. Plain language for non-technical owners.
- No em dashes. No exclamation points. No buzzwords (leverage, seamless, robust, streamline).