AI Design Guide — Style Guide

The canonical reference for colors, typography, spacing, and icons. If a color isn't on this page, don't use it.

Neutral Palette

Warm grays. The foundation of everything.

gray-50 #FBFBFA --color-gray-50

Surface / page background

gray-100 #F7F6F3 --color-gray-100

Card hover, subtle backgrounds

gray-200 #EAEAEA --color-gray-200

Borders, dividers, grid lines

gray-300 #D4D4D4 --color-gray-300

Disabled borders, subtle lines

gray-400 #B4B0A8 --color-gray-400

Placeholder text, muted icons

gray-500 #787774 --color-gray-500

Secondary text, descriptions

gray-600 #52524E --color-gray-600

Body text (alternative)

gray-700 #3F3F3A --color-gray-700

Feature text, bold secondary

gray-800 #2F3437 --color-gray-800

Dark backgrounds

gray-900 #111111 --color-gray-900

Primary text, headings, buttons

gray-950 #0A0A0A --color-gray-950

VIP card background

Brand Colors

Three color families: lime (highlights), blue (interactive), lavender (decorative). Each has a full, light, and background tint.

lime
#DFFF82

Highlights, hero gradient, CTA

lime-dark
#C8EE5A

CTA hover, pressed state

lime-bg
#F5FFDB

Lime badge/tag background

blue
#4466FF

Links, active states, interactive

blue-light
#C5DEFF

Blue badge, selected state bg

blue-bg
#EDF4FF

Info cards, soft blue tint

lavender
#D8B4FE

Accent, decorative, tags

lavender-light
#EDD8FF

Lavender badge background

lavender-bg
#F8F0FF

Soft purple tint cards

Semantic Usage

How colors map to UI roles.

surface #FBFBFA Page background (bg-surface)
white #FFFFFF Card backgrounds, inputs
card-hover #F0EFEC Warm hover on cards
border #EAEAEA All borders (border-gray-200)
text-primary #111111 Headings, strong text
text-body #3F3F3A Feature lists (gray-700)
text-muted #787774 Descriptions, secondary (gray-500)
text-faint #B4B0A8 Labels, placeholders (gray-400)

Forbidden Colors

Never use these. If you see them in the codebase, they are bugs.

Pink / Rose

Not in palette. Use lavender instead

Orange

Not in palette. Use lime for highlights

Red

Not in palette. Use sparingly for errors only

Green / Emerald

Not in palette. Use lime for positive signals

Typography

Geist Sans for everything. Monospace for labels and code.

FONT SANS / SERIF

Geist Sans — The quick brown fox jumps over the lazy dog

FONT MONO

SF Mono — The quick brown fox jumps over the lazy dog

TYPE SCALE

Aa 4xl · 36px Page titles
Aa 3xl · 30px Section headings
Aa 2xl · 24px Card titles, plan names
Aa lg · 18px Subsection headings
Aa 15px Feature titles, FAQ questions
Aa sm · 14px Body text, descriptions
Aa xs · 12px Badges, labels, captions
Aa 10px Section labels (uppercase, tracking-widest)

Block Icons

7x7 pixel-grid icons. 20 total. Sizes: xs (12px), sm (16px), md (24px), lg (32px), xl (48px).

guide
prompt
compare
directory
knowledge
stack
token
audit
mcp
ai
component
code
search
star
bookmark
arrow
grid
menu
figma
dsg

SIZES

xs
sm
md
lg
xl

Spacing & Radius

Consistent values used across all components.

PAGE PADDING

Mobile 16px
Tablet (768px+) 32px
Desktop (1280px+) 48px

BORDER RADIUS

Card
rounded-xl 12px
Large card
rounded-2xl 16px
Badge
rounded-md 6px
Button
rounded-xl 12px
Input
rounded-xl 12px
Full pill
rounded-full 9999px

MAX WIDTHS

Full page
max-w-6xl 1200px
Content
max-w-5xl 1024px
Narrow content
max-w-2xl 672px
FAQ
max-w-xl 576px

BUTTON STYLES

Rules

Only use colors from this page. Three brand families: lime, blue, lavender
On dark/black surfaces, CTAs are always #B8DFFF with #111111 text. Never use dark buttons on dark backgrounds
No pink, orange, red, or green (unless error states)
No em dashes in any content. Use periods, colons, commas, or parentheses
"I" not "We" in all copy
No hardcoded numbers for content counts (prompts, tools, etc.)
Icon backgrounds use bg-gray-100 with text-gray-500 for the stroke
All headings use font-family: var(--font-serif) which resolves to Geist Sans
Section labels use 10px, font-bold, uppercase, tracking-widest, text-gray-400
Borders are always border-gray-200 (#EAEAEA)