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.

Tokens

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 thedark mode you're viewing. Brand tokens apply to both.

backgroundL1 surface — cards, sidebar, popovers
#1a1a1a
foregroundL2 surface — card body, inputs, code
#212121
Aa
fontBody text — derives border · muted · faint
#ffffff
primaryMain CTA — also focus ring (both modes)
#1d3a66
secondarySupporting actions (both modes)
#3d4451
tertiaryAccent · success-tinted (both modes)
#324e32

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

Presets

14 themes

Each preset picks all 6 tokens at once — brand tones, tinted background/foreground, and a signature pattern inked with the same accent the theme leads with, per the pairing rule below. Click a card to apply it site-wide; it persists the same way a hand-picked swatch does.

Depth

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 rectangleL2 — 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

NameShown on your public profile

Email *Enter a valid email address

Role

Bio

Subscribe to release notesPublic

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 · 14md · 16lg · 20xl · 24

In context

Constants

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.

Texture

Background patterns

Pattern.astro — six subtle, tileable textures, all pure CSS/SVG with zero downloaded assets. Pass a tone and the pattern binds to a theme token with a calibrated opacity — pattern and palette can never disagree. Switch a preset in the nav and watch these repaint too.

pattern="dots" tone="primary"

pattern="grid" tone="secondary"

pattern="diagonal" tone="tertiary"

pattern="crosshatch" tone="font"

pattern="noise" tone="primary"

pattern="hexagon" tone="primary"

pattern="dots" tone="primary" fade

Recipes

Pattern × color — the pairing rule

Every surface owns an ink. Page and card surfaces take a brand tone; a card's texture takes its own accent; a solid brand fill takescontrast (the on-* label color). Attach the pattern to a role, never a raw color — recolor any swatch above and every pairing below still holds.

L0 · pageHero washdots · primary · fade — behind page-level heros and section intros

<Pattern pattern="dots" tone="primary" fade />

L1 · cardCard texturegrid · secondary — or pass pattern straight to Card and it inks with the accent

<Card accent="secondary" pattern="grid">

brand fillBrand banddiagonal · contrast — CTAs and banded sections on --color-primary

<Pattern pattern="diagonal" tone="contrast" fade />

Vocabulary

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. Add pattern and the texture inks itself with the card's accent.

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" pattern="dots"

99.98%

uptime, last 90 days+0.02%

variant="stat" trend="up"

Ada LovelaceFounding 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 pattern="grid"