00 — FOUNDATIONS

Tokens

The foundation layer. Every color, size, space, and motion value used across the system.

01 — Typography

Type Scale

Space Grotesk for headings and display. DM Sans for body, UI text, and documentation.

Neighborhood

Hero sections, marketing headlines, feature announcements

Display

TypefaceSpace GroteskSize64pxLine height1.05Weight700Letter spacing-0.03em

--type-display

Wonder and class

Page titles, primary content headings, view headers

TypefaceSpace GroteskSize48pxLine height1.1Weight700Letter spacing-0.02em

--type-h1

Component architecture

Section headings, content group titles, dialog headers

TypefaceSpace GroteskSize30pxLine height1.2Weight600

--type-h2

Token definitions

Subsection headings, card titles, grouped content labels

TypefaceSpace GroteskSize24pxLine height1.3Weight600

--type-h3

Setting row anatomy

Inline headings, list group titles, sidebar headers

TypefaceSpace GroteskSize20pxLine height1.4Weight500

--type-h4

The default text style for documentation, descriptions, and any long-form reading content throughout the system.

Paragraphs, descriptions, form labels, long-form content

Body

TypefaceDM SansSize16pxLine height1.6Weight400

--text-base

Helper text, metadata, timestamps, and secondary descriptions. Used wherever supporting context appears beneath primary content.

Secondary text, helper text, table content, metadata

Body Small

TypefaceDM SansSize14pxLine height1.5Weight400

--text-sm

STATUS · 2 ITEMS SELECTED

Labels, annotations, status indicators, fine print

Caption

TypefaceDM SansSize12pxLine height1.4Weight500Letter spacing0.05em

--text-xs

ACCOUNT SETTINGS

Category labels, section dividers, navigation groups

Overline

TypefaceSpace GroteskSize12pxLine height1.4Weight600Letter spacing0.1em

--text-xs

02 — Color

Color System

Tokens are the system's color API. Rather than referencing raw palette values, components use tokens mapped to specific roles — background, border, text, interactive, and semantic.

Background

TokenRoleValue

--bg-pageDefault page background

#ffffff

--bg-cardCard backgrounds, elevated surfaces

#faf8f6

→ --neutral-50

--bg-surfaceSecondary panels, code blocks, inset areas

#f3f0ed

→ --neutral-100

--bg-hoverHover states, zebra striping, table headers

#e6e2dd

→ --neutral-200

--bg-activePressed states, active list items

#d1cbc4

→ --neutral-300

--bg-darkDark surfaces, navigation rails, tooltips

#1a1816

→ --neutral-900

--bg-overlayMaximum contrast overlays, scrims

#0d0c0a

→ --neutral-950

Border

TokenRoleValue

--border-defaultDefault borders, card outlines, dividers

#e6e2dd

→ --neutral-200

--border-strongInput outlines, active dividers, emphasized edges

#d1cbc4

→ --neutral-300

--border-prominentHigh-contrast borders, hover outlines

#a69f96

→ --neutral-400

Text

TokenRoleValue

--text-primaryHeadings, body copy, primary content

#1a1816

→ --neutral-900

--text-secondaryDescriptions, supporting text

#45403b

→ --neutral-700

--text-mutedCaptions, helper text, timestamps, metadata

#7a736b

→ --neutral-500

--text-disabledPlaceholder text, disabled controls, inactive items

#a69f96

→ --neutral-400

State tokens append a suffix: -hover is one step deeper on the source scale, -active is two.

Interactive

TokenRoleValue

--interactive-primaryPrimary buttons, links, active indicators

#16a85a

→ --primary-500

--interactive-primary-hoverPrimary button and link hover

#0b8847

→ --primary-600

--interactive-primary-activePrimary pressed state

#096d3a

→ --primary-700

--interactive-accentSelection bars, hover accents, active highlights

#34cc76

→ --primary-400

--interactive-accent-hoverAccent hover deepening

#16a85a

→ --primary-500

--interactive-tintTinted backgrounds, subtle success surfaces

#edfcf2

→ --primary-50

--interactive-tint-hoverTinted surface hover

#d3f8e0

→ --primary-100

--focus-ringKeyboard focus rings 2px solid 2px offset

#52a8ff

→ --sky-400

Semantic

TokenRoleValue

--successSuccess, positive feedback

#16a85a

→ --primary-500

--success-hoverSuccess hover/pressed emphasis

#0b8847

→ --primary-600

--warningCaution, attention required

#d47d02

→ --amber-600

--warning-hoverWarning hover/pressed emphasis

#aa5c06

→ --amber-700

--errorErrors, destructive actions

#c41d35

→ --berry-600

--error-hoverDestructive hover — replaces --error-dark (deprecated)

#a3172c

→ --berry-700

--infoInformational, neutral guidance

#166cd4

→ --sky-600

--info-hoverInfo hover/pressed emphasis

#1356ac

→ --sky-700

04 — Radius

Border Radius

Three role-based tokens. The name tells you which to use — control for interactive elements, surface for containers, pill for badges and circles.

control · 8px

Buttons, inputs, selects, checkboxes, menu items, tooltips

surface · 12px

Cards, panels, modals, popovers, content sections

pill

Badges, avatars, toggle tracks, tab pills

05 — Elevation

Shadow / Elevation

Borders and surface color are the primary elevation tools. Shadows are reserved for floating layers only — most UI depth comes from neutral border shades and background contrast.

subtle

Resting cards, input fields, subtle depth cue

raised

Hovered cards, dropdown triggers, active surfaces

overlay

Dropdowns, modals, popovers, floating layers