ONE Design System

6 editable tokens. 3 depth levels. 1 card. 1 input. Every component derives from these — pick a token, the whole system responds. Spec lives in design.md.

The 6 editable tokens

Click any swatch to recolor live. Picks apply to the whole site and persist — the same engine behind the nav's preset swatches. Everything else on this page — borders, focus rings, destructive/success, on-* label colors — derives from these 6 automatically; see the invariants and derived tokens below.

Surface tokens (background · foreground · font) flip with mode — picks apply to the dark mode you're viewing. Brand tokens apply to both.

background L1 surface — cards, sidebar, popovers

#1a1a1a
foreground L2 surface — card body, inputs, code

#212121
Aa
font Body text — derives border · muted · faint

#ffffff
primary Main CTA — also focus ring (both modes)

#1d3a66
secondary Supporting actions (both modes)

#3d4451
tertiary Accent · success-tinted (both modes)

#324e32

Invariants — destructive success gold white black + derived: on-{primary,secondary,tertiary,destructive,success} · border · muted · page

Three levels of depth

Page (L0) → card (L1) → content (L2). No 4th level. Sidebar = L1. Inputs = L2.

L0 page · --color-page

L1 card · --color-background

L2 content · --color-foreground

Card anatomy

Header · body · footer share one card surface

Body rectangle L2 — where data lives

Strength0.84
Resistance0.12
Cycles128

App shell

Sidebar = L1 (card pinned to edge)

layout

Form controls

All inputs share one shape · L2 surface · 10px radius

forms

Name Shown on your public profile

Email * Enter a valid email address

Role

Bio

Subscribe to release notes Public

Buttons & states

6 variants. on-* labels auto-contrast.

buttons

Icons

One source: lucide-react. 1.5px stroke · round caps · token-driven color. Wrap with <Icon> or <IconBadge>.

IconBadge — tones

Used in feature grids, list items, profile rows.

primary

tertiary

secondary

neutral

Sizes — sm · md · lg

Icon — sizes

Inline icons. Inherit color from parent via currentColor.

sm · 14 md · 16 lg · 20 xl · 24

In context

Polish constants

Baked into components. Not editable. Snap to scale or polish breaks.

Radius

--radius-sm6px · chips

--radius-md10px · buttons, inputs

--radius-lg16px · cards

Shadow

--shadow-cardcards, popovers

--shadow-popmenus, modals

Spacing

4 · 8 · 12 · 16 · 20 · 24 · 32 — every padding/gap lands here.

Background patterns

Pattern.astro — five subtle, tileable textures, all pure CSS/SVG with zero downloaded assets. Every one recolors with currentColor, so it re-themes across every swatch above automatically — switch a preset in the nav and watch these repaint too.

pattern="dots"

pattern="grid"

pattern="diagonal"

pattern="crosshatch"

pattern="noise"

pattern="dots" fade

Card vocabulary — 5 variants

One composable component, Card.astro. Feature grids, dashboards, team pages, and pricing tables all derive from one of these five shapes — rendered live below, not mocked.

Default

Bare card surface — compose freely with icon, header, body, and footer slots. Every other variant below is this shape, specialized.

variant="default"

Feature

Icon chip, title, body copy, footer link — the shape behind the homepage's "what's in the box" grid.

variant="feature"

99.98%

uptime, last 90 days +0.02%

variant="stat" trend="up"

Ada Lovelace Founding engineer

Wrote the first algorithm intended for a machine. Reviews every PR before it merges.

variant="profile"

Free

$0 /mo

Full source, free forever
No account required
Community support

variant="pricing"

Pro

$29 /mo

Everything in Free
AI chat
Priority support

variant="pricing" featured