Design System

Design with
clarity,
ship faster.

A clean, modern design system built on precision typography, generous spacing, and a signature blue accent. Light and dark mode, always.

14 color tokens 11 type steps 4px grid 6 radius values light + dark
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Clean neutrals with a signature #0055FF blue accent. 14 tokens across surfaces, text hierarchy, interactive states, and semantic colors. Full light/dark support.

Canvas
#ffffff
Page background
Surface
#f8f9fb
Secondary sections
Text Primary
#111827
Headings, body text
Text Secondary
#6b7280
Descriptions, labels
Text Tertiary
#9ca3af
Placeholders, captions
Accent
#0055FF
Brand color, links, CTAs
Accent Light
#e8f0ff
Accent backgrounds, tags
Border
#e5e7eb
Borders, dividers
Success
#10b981
Positive actions
Warning
#f59e0b
Caution states
Error
#ef4444
Destructive actions

Gradients

accent
CTA buttons, hero accents, gradient fills
accent-glow
Subtle background glows, hero decorations
surface-fade
Section transitions, subtle depth
Typography

Type Scale

Inter for all UI text — clean, highly legible, and optimized for screens. 11-step scale from caption to display with tight tracking on large sizes.

Display Design with clarity 48px / 1.1 / −0.025em
4XL Ship faster 36px / 1.2 / −0.025em
3XL Section heading 30px / 1.2 / −0.025em
2XL Subsection 24px / 1.2 / −0.02em
LG Card heading 18px / 1.4 / −0.01em
Base Default body text for readable content across the interface 15px / 1.6 / 0
SM Secondary text, descriptions, metadata 14px / 1.5 / 0
Caption Meta info · Labels · Helper text 12px / 1.5 / 0.01em

Fonts

Primary Inter 400–700 · 12–48px · All UI text
Mono JetBrains Mono 400–500 · 12–14px · Code only
Layout

Spacing & Shapes

Base unit 4px. Comfortable density with generous breathing room. 14-step spacing scale, 6 border radius values, 4 shadow levels.

Spacing Scale (4px base)

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

Border Radius

sm 8px
md 12px
lg 16px
xl 20px
2xl 24px
full 9999px

Shadows

sm subtle lift
md cards
lg modals
xl hero
Elevation

Surfaces

4 distinct surface levels. Light mode uses white and near-white; dark mode uses navy depths. Shadows increase with elevation in light mode; lighter surfaces signal depth in dark mode.

Canvas #ffffff / #0a0f1a
Surface #f8f9fb / #111827
Raised #ffffff / #1a2236
Overlay scrim / backdrop
Components

Buttons & Inputs

Three button variants for interaction hierarchy: gradient primary for CTAs, outlined secondary for supporting actions, and ghost for tertiary. Inputs use clean borders with accent focus rings.

Primary Button
Main call to action — gradient accent
.btn-primary
Accent gradient (135deg, #0055FF → #0088ff), white text, 12px radius, subtle glow shadow. Use for the single most important action.
Secondary Button
Supporting actions
.btn-secondary
Accent text, accent border, transparent background. Hover fills with Accent Light.
Ghost Button
Tertiary actions, navigation
.btn-ghost
Text Secondary, border, transparent background. For less prominent actions.
Input Field
Text input with accent focus ring
input
Raised background, Border border, 12px radius. Focus uses Accent border with 3px offset ring.
Tag / Badge
Labels, categories, status
.tag
New Design Components
Accent Light background, Accent text, pill radius, 13px weight-500 text.
Guidelines

Do's & Don'ts

Do — Embrace
  • Canvas (#ffffff) as primary background
  • Accent (#0055FF) for CTAs, links, active states
  • Accent gradient for hero buttons and key accents
  • 12px radius for buttons, 16px for cards
  • Inter at 15px for body text
  • 64px section gaps, 24px card padding
  • Soft shadows (sm, md) for subtle elevation
Don't — Avoid
  • Accent for large background fills
  • Sharp corners (0px radius)
  • Mixing font families beyond Inter
  • Pure black (#000) for text — use #111827
  • Heavy decorative drop shadows
  • More than 2 font sizes per component
  • Dense packing without breathing room