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

--text-display

Wonder and class

Page titles, primary content headings, view headers

TypefaceSpace GroteskSize48pxLine height1.1Weight700Letter spacing-0.02em

--text-5xl

Component architecture

Section headings, content group titles, dialog headers

TypefaceSpace GroteskSize30pxLine height1.2Weight600

--text-3xl

Token definitions

Subsection headings, card titles, grouped content labels

TypefaceSpace GroteskSize24pxLine height1.3Weight600

--text-2xl

Setting row anatomy

Inline headings, list group titles, sidebar headers

TypefaceSpace GroteskSize20pxLine height1.4Weight500

--text-xl

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

--page-bgDefault page background

#ffffff

--neutral-50Card backgrounds, hero surfaces, subtle elevation

#faf8f6

--neutral-100Demo surfaces, code blocks, secondary panels

#f3f0ed

--neutral-200Hover backgrounds, zebra striping, table header fills

#e6e2dd

--neutral-900Dark surfaces: sidebar rail, tooltips, device frames

#1a1816

--neutral-950Maximum contrast surfaces, overlays

#0d0c0a

Border

TokenRoleValue

--neutral-200Default borders, card outlines, dividers

#e6e2dd

--neutral-300Stronger borders, input outlines, active dividers

#d1cbc4

--neutral-400Prominent borders, hover outlines

#a69f96

Text

TokenRoleValue

--neutral-900Primary text, headings, body copy

#1a1816

--neutral-700Secondary text, descriptions in demos

#5c554e

--neutral-500Tertiary text, captions, muted labels, helper text

#7a736b

--neutral-400Placeholder text, disabled labels, inactive nav items

#a69f96

Interactive

TokenRoleValue

--primary-500Primary buttons, links, N wordmark, active indicators

#16a85a

--primary-400Bracket selection bars, active nav accent, hover accent

#34cc76

--primary-50Primary tint backgrounds, subtle success surfaces

#edfcf2

--sky-400Focus rings (2px solid, 2px offset) for keyboard navigation

#52a8ff

Semantic

TokenRoleValue

--successSuccess states, positive feedback, do-card indicators

#16a85a

--warningWarning states, caution feedback, attention-needed

#d47d02

--errorError states, destructive actions, don't-card indicators

#c41d35

--infoInformational states, neutral guidance, tip banners

#166cd4

Doc Page Accents

TokenRoleValue

--amber-400Foundations page accent bars (tokens, overview)

#ffbc20

--plum-400Atomic component page accent bars

#ba72ff

--sage-400Compositional component page accent bars

#42c4a8

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