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#FBFBFAPage background (bg-surface)

white#FFFFFFCard backgrounds, inputs

card-hover#F0EFECWarm hover on cards

border#EAEAEAAll borders (border-gray-200)

text-primary#111111Headings, strong text

text-body#3F3F3AFeature lists (gray-700)

text-muted#787774Descriptions, secondary (gray-500)

text-faint#B4B0A8Labels, 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

Aa4xl · 36pxPage titles

Aa3xl · 30pxSection headings

Aa2xl · 24pxCard titles, plan names

Aalg · 18pxSubsection headings

Aa15pxFeature titles, FAQ questions

Aasm · 14pxBody text, descriptions

Aaxs · 12pxBadges, labels, captions

Aa10pxSection 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

Spacing & Radius

Consistent values used across all components.

PAGE PADDING

Mobile16px

Tablet (768px+)32px

Desktop (1280px+)48px

BORDER RADIUS

Card

rounded-xl12px

Large card

rounded-2xl16px

Badge

rounded-md6px

Button

rounded-xl12px

Input

rounded-xl12px

Full pill

rounded-full9999px

MAX WIDTHS

Full page

max-w-6xl1200px

Content

max-w-5xl1024px

Narrow content

max-w-2xl672px

FAQ

max-w-xl576px

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)