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 persist to localStorage.

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 white black + derived: on-{primary,secondary,tertiary} · 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.

Card Vocabulary

13 card types. Every surface in the product derives from one of these shapes.

Refunds Bot

Live

Handle refund requests

refunds-bot

1200 ms

Live

Agent deployed

3 checks passed

What would you like to do?

System prompt

Has name

Has prompt

>20 words

Monthly plan

9.99USD

Brand Palette

Stripe PaymentsAccept credit cards

Support Bot

$5/mo

ui:chat:send

depth 3

outcomemark

Compare

Before$240/mo

After$120/mo

Get started

1/3

No agents yet

Create your first agent to get started