Design System

Develop.
Preview.
Ship.

Pure black minimalism with precise typography, electric blue accents, and a signature gradient mesh. Built for speed and clarity.

14 color tokens 10 type steps 4px grid 4 surface levels 3 gradients
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Pure black canvas with crisp white text and electric blue accents. 14 core tokens across surfaces, text, interaction, and decorative gradients.

Void Black
#000000
Primary page background
Carbon
#0a0a0a
Elevated surfaces, cards
Onyx
#111111
Code blocks, inset areas
Graphite
#1a1a1a
Borders, dividers
Slate
#333333
Muted borders, disabled
Pure White
#ffffff
Primary text, icons
Silver
#a1a1aa
Secondary text
Zinc
#71717a
Placeholder text
Vercel Blue
#0070f3
Primary accent, links
Electric Blue
#3291ff
Hover states
Cyan
#50e3c2
Success states
Violet
#7928ca
Gradient endpoint
Magenta
#ff0080
Gradient start
Error Red
#ee0000
Error states

Gradients

mesh
Hero background gradient, decorative section dividers
subtle
Subtle section highlights, card hover effects
glow
Hero glow effect, centered accent illumination
Typography

Type Scale

Geist as primary typeface (Inter substitute). Geometric and precise with tight letter-spacing for a modern, technical voice.

Display Develop. Preview. Ship. 64px / 1.0 / -0.04em
Heading-lg Ship faster 48px / 1.1 / -0.04px
Heading Section heading 32px / 1.2 / -0.03px
Heading-sm Subsection heading 24px / 1.3 / -0.02px
Body Default body text for readable content 16px / 1.5 / 0
Body-sm Dense data, comparison rows 14px / 1.5 / 0
Caption Meta info · Footer · Labels 12px / 1.6 / 0.02px

Fonts

Primary Geist 400-700 · 12-80px
Mono Geist Mono 400-500 · 13-16px · Code only
Fallback Inter Substitute for all above
Layout

Spacing & Shapes

Base unit 4px. Compact density with generous whitespace. 14-step spacing scale, 5 border radius values.

Spacing Scale (4px base)

44px
88px
1616px
2424px
3232px
4848px
8080px
128128px

Border Radius

sm 4px
md 6px
lg 8px
xl / cards 12px
pill 9999px
Elevation

Depth & Surfaces

Contrast-based elevation. Borders and subtle background shifts instead of shadows. 4 distinct surface levels from void to edge.

Depth Levels

Void Black
Base page background — the canvas
Level 0
Carbon
Elevated panels, card backgrounds
Level 1
Onyx
Code blocks, inset sections, secondary areas
Level 2
Graphite
Borders, dividers, containers
Level 3

Surface System

Void Black #000000
Carbon #0a0a0a
Onyx #111111
Graphite #1a1a1a
Components

Button Variants

White primary, accent blue, gradient mesh, and ghost variants. A monochrome system with selective color for maximum impact.

Primary Button
Main call to action — inverse contrast
.btn-primary
Pure White (#ffffff) background, Void Black text, 6px radius. The inverse contrast makes it the strongest CTA on the dark canvas.
Accent Button
Featured action, highlight CTA
.btn-accent
Vercel Blue (#0070f3) background, Pure White text. For actions that need to stand out from the monochrome palette.
Gradient Button
Premium, marketing CTAs
.btn-gradient
Gradient mesh background (blue → violet → magenta), Pure White text. High visual impact for hero CTAs.
Secondary Button
Tertiary actions, navigation
.btn-secondary
Pure White text, Graphite border. For less prominent actions that still need visual presence.
Ghost Button
Navigation, minimal actions
.btn-ghost
Features Pricing Docs
Silver text, transparent background, no border. Minimal footprint for navigation items.
Input Field
User text input
input
Void Black background, Graphite border, 6px radius. Focus state uses Vercel Blue border.
Guidelines

Do's & Don'ts

Do — Embrace
  • Void Black (#000000) as the primary canvas
  • Pure White (#ffffff) for all primary text
  • Vercel Blue (#0070f3) for links and accent CTAs
  • Gradient mesh sparingly for hero sections
  • 6px radius for buttons, 12px for cards
  • 4px-based compact spacing with ample whitespace
  • Border and contrast for elevation over shadows
Don't — Avoid
  • Colored backgrounds beyond the dark palette
  • Decorative shadows — use border contrast
  • Gradient mesh on small elements or body text
  • Dense layouts without breathing room
  • Font families beyond Geist / Inter
  • Vercel Blue for large background areas
  • Rounded corners larger than 12px on rectangles