Design system reference and source of truth for the portfolio.
Font family: Geist, with Geist Mono for small labels. Weights: 400, 500, 600.
h1 - text-4xl font-bold
h2 - text-3xl font-bold
h3 - text-2xl font-semibold
Body - text-base
Body text uses Geist at 400 weight, in ink-2 (#3d5a6a) on light backgrounds and #b9c8cf on dark.
Primary button: btn-primary
Secondary button: btn-secondary
Card: rounded-lg shadow-md
Card content with rounded corners and soft shadow.
Input: rounded-md border
Cat icon with company name and tagline. Use fill="currentColor" for flexible theming.
On light background
On dark background
max-w-4xl mx-auto px-4 sm:px-6 lg:px-8py-16 or py-24p-6px-4 py-2 or px-6 py-3Copy 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).