Design System

Develop.
Preview.
Ship.

A stark black-and-ink duet on near-white canvas, broken at hero scale by a multi-color mesh gradient that acts as the entire decorative system.

35+ color tokens 14 type steps 4px grid 5 shadow levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

High-contrast black-and-ink palette with vivid interactive and decorative accent colors. 35+ tokens across base surfaces, text, interaction, and decorative gradients.

Primary
#171717
Primary brand color, CTAs
Canvas
#ffffff
Main page background
Canvas Soft
#fafafa
Secondary surface
Canvas Soft 2
#f5f5f5
Inset regions
Body
#4d4d4d
Body text
Mute
#888888
Muted text
Hairline
#ebebeb
Borders, dividers
Link
#0070f3
Links, interactive
Error
#ee0000
Error states
Warning
#f5a623
Warning states
Violet
#7928ca
Decorative accent
Cyan
#50e3c2
Decorative accent
Highlight Pink
#ff0080
Decorative accent

Gradients

develop
Develop gradient — Cyan to blue
preview
Preview gradient — Violet to pink
ship
Ship gradient — Red to amber
mesh
Hero decorative background
Typography

Type Scale

Geist Sans as primary typeface (Inter substitute). Wide weight range with precise letter-spacing for a modern, organized voice.

Display-xl Develop. Preview. Ship. 48px / 48px / −2.4px
Display-lg Ship faster 32px / 40px / −1.28px
Display-md Section heading 24px / 32px / −0.96px
Display-sm Subsection heading 20px / 28px / −0.6px
Body Default body text for readable content 16px / 24px / 0px
Body-sm Dense data, comparison rows 14px / 20px / −0.28px
Caption Meta info · Footer · Labels 12px / 16px / 0px

Fonts

Primary Geist Sans 400–600 · 12–48px
Mono Geist Mono 400 · 12–14px · Code only
Fallback Inter Substitute for all above
Layout

Spacing & Shapes

Base unit 4px. Comfortable density with ample breathing room. 12-step spacing scale, 9 border radius values.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
9696px

Border Radius

xs 4px
sm 6px
md 8px
lg 12px
xl 16px
pill-sm 64px
pill 100px
full 9999px

Shadows

Hairline inset border
Soft card elevation
Float elevated
Modal dialogs
Elevation

Depth & Surfaces

Tonal surfaces and borders first, shadows stay subtle. 3 distinct surface levels.

Depth Levels

Canvas
Base page background — the canvas
Level 0
Canvas Soft
Secondary sections, cards
Level 1
Canvas Soft 2
Inset regions, tertiary surface
Level 2

Surface System

Canvas #ffffff
Canvas Soft #fafafa
Canvas Soft 2 #f5f5f5
Components

Button Variants

Primary action (ink), secondary (outlined), and ghost variants for different interaction hierarchies.

Primary Button
Main call to action — highest visual weight
.btn-primary
Primary (#171717) background, white text, pill radius. Use exclusively for the single most important action.
Secondary Button
Secondary actions
.btn-secondary
White background, ink text, hairline border. For less prominent actions that still need visual presence.
Ghost Button
Tertiary actions, links
.btn-ghost
Link blue text, transparent background. For low-emphasis actions and navigation links.
Form Input
Text input field
input
White background, ink text, 6px radius. Focus state uses link blue border.
Guidelines

Do's & Don'ts

Do — Embrace
  • Use the gray scale to rank information: 1000 for primary text, 900 for secondary, 700 for disabled
  • Keep solid accent color for state and the single most important action on a view
  • Hold WCAG AA contrast (4.5:1 for body text)
  • Show the focus ring on every interactive element at :focus-visible
  • Apply the typography tokens instead of setting font size, line height, or weight by hand
  • Use the mesh gradient only in hero sections and large feature areas
  • Maintain comfortable element spacing using multiples of 4px
Don't — Avoid
  • Signal state with color alone; pair it with an icon or text label
  • Use canvas-soft as a general fill; it is for subtle separation only
  • Mix rounded and sharp corners, or more than two font weights, in one view
  • Swap gray-* for canvas-*; they are separate scales
  • Use the mesh gradient on small components or text
  • Introduce hard, sharp corners on cards or primary buttons
  • Use overly large or decorative drop shadows