Design System

Email at the
speed of thought.

Speed-first email client. Crisp white canvas, jet-black bold typography, razor-thin dividers, and a single high-contrast accent for interactive elements.

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

Color Tokens

Light neutrals with a single high-contrast accent. 14 tokens across surfaces, text hierarchy, interaction, and status.

Pure White
#ffffff
Page background, reading surface
Snow
#f8f9fa
Sidebar, secondary panels
Ghost
#f0f1f3
Hover states, highlights
Platinum
#e5e7eb
Borders, dividers
Silver
#d1d5db
Disabled states
Iron
#9ca3af
Placeholder text, timestamps
Slate
#6b7280
Secondary text, metadata
Graphite
#4b5563
Body text
Ink
#1f2937
Headings, emphasis
Jet Black
#000000
Brand primary, CTAs
Electric Blue
#2563eb
Links, focus, actions
Signal Green
#16a34a
Success, sent
Alert Red
#dc2626
Errors, destructive
Warm Amber
#d97706
Warnings, pending
Typography

Type Scale

Inter for all UI text — tight metrics, tall x-height, wide weight range. JetBrains Mono for keyboard shortcuts and code.

Display Email at the speed 36px / 1.0 / −0.025em
Heading-lg Ship faster 30px / 1.2 / −0.02px
Heading Section heading 24px / 1.25 / −0.02px
Subheading Panel header 20px / 1.35 / −0.01px
Body Default reading text for email content 14px / 1.5 / 0
Body-sm Dense list items, sender names 13px / 1.5 / 0
Micro Metadata · File sizes · Counts 12px / 1.5 / 0.01px
Caption Timestamps · Labels · Badges 11px / 1.5 / 0.02px

Fonts

Primary Inter 400–700 · 11–36px
Mono JetBrains Mono 400–500 · 11–13px · Shortcuts only
Fallback system-ui Substitute for Inter
Layout

Spacing & Shapes

Base unit 4px. Compact density for email lists. 14-step spacing scale, 6 border radius values.

Spacing Scale (4px base)

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

Border Radius

sharp 0px
sm 4px
md 6px
lg 8px
xl 12px
pill 9999px
Elevation

Depth & Surfaces

White-first hierarchy. Subtle background shifts for depth. Only one elevation uses shadow.

Depth Levels

Pure White
Base page background — the canvas
Level 0
Snow
Sidebar, secondary panels
Level 1
Ghost
Hover states, selected rows
Level 2
Compose Card
Floating card with subtle shadow
Level 3

Surface System

Pure White #ffffff
Snow #f8f9fa
Ghost #f0f1f3
Compose Card #ffffff + shadow
Components

UI Components

Button variants, email rows, sidebar items, and keyboard badges — built for speed and scannability.

Primary Action Button
Main CTA — Send, Compose, Reply
.btn-primary
Jet Black (#000000) background, Pure White text, 6px radius. Use for the single most important action.
Secondary Button
Toolbar, navigation
.btn-secondary
Ink text, Platinum border. For actions that need presence without competing with primary.
Ghost Button
Inline actions, links
.btn-ghost
Electric Blue text, Electric Blue border. For interactive elements that need clear targeting.
Keyboard Badge
Shortcut hints, command palette
.kbd
⌘K ⌘↵ E ⌘⇧R /
Jet Black text on Ghost background, JetBrains Mono 11px, 4px radius. Always visible, signals keyboard-first design.
Email Row
Inbox list item, conversation preview
.email-row
Pure White background, 1px Platinum bottom border. Hover shifts to Ghost. Sender in Ink bold, subject in Graphite, timestamp in Iron.
Sidebar Navigation
Folder/label navigation
.sidebar-item
Inbox 24
Starred 3
Sent
Drafts 1
Snow background inactive, Pure White with 2px Jet Black left border active. 8px vertical, 16px horizontal padding.
Input Field
Search, compose, reply
input
Pure White background, 1px Platinum border, 8px radius. Focus: 2px Electric Blue border. Placeholder in Iron.
Guidelines

Do's & Don'ts

Do — Embrace
  • Pure White (#ffffff) as the primary canvas
  • Jet Black (#000000) for bold headings and CTAs
  • Electric Blue (#2563eb) for all links and focus states
  • Compact 4px-based spacing for dense email lists
  • Inter weights 400–700; 700 for critical headings only
  • Keyboard badges (JetBrains Mono) beside actions
  • 6px buttons, 8px inputs, 12px cards — consistent radius
Don't — Avoid
  • Colored backgrounds behind email content
  • Decorative gradients or illustrations in the inbox
  • Font sizes below 11px for readable text
  • More than one accent color for interactions
  • Heavy drop shadows — use none or subtle only
  • Radius sharper than 4px — feels unfinished
  • Jet Black text on dark backgrounds