Get started

Tokens

Color, type, radius, spacing and motion. Everything the system uses lives in ds/tokens.css.

Colors

The contrast numbers are measured in the browser, right now, with the page's theme and accent. Change them at the top or in the footer and they recompute.

Surfaces

The three layers and what sits around them.

--bgpage

--cardcard shell

--panelcard panel

--tiletile inside the panel

--sunkentrack, empty cell

--line1px card border

--line-2control border

Text

Measured now, in the theme on screen.

--fgmain text · on --panel

--fg-2label and description · on --panel

--fg-3axis, meta, placeholder · on --panel

--accent-textaccent used as text · on --panel

Accent and action

The accent changes with data-accent. The primary action is ink and doesn't change.

--accentcurrent accent

--on-accenttext on the accent · on --accent

--accent-softsoft accent background

--primaryprimary button

--on-primaryprimary text · on --primary

State

Each tone has a soft pair for the badge background.

--okdone · on --ok-soft

--warnwarning · on --warn-soft

--errerror · on --err-soft

--infoinfo · on --info-soft

Chart series

Order matters: the first one is always the accent.

--c1series 1, the accent

--c2series 2

--c3series 3

--c4series 4

--c5series 5

--c6series 6

Typography

A 1.25 scale on 16px. --font is Jakarta, --mono is JetBrains Mono and --brand-font is Sora, only in the logo. There's also --t-5xl (76.3px), reserved for the landing headline.

--t-xsSales dashboard, 12.8px

--t-smSales dashboard, 14px, dashboard density only

--t-mdSales dashboard, 16px, body

--t-lgSales dashboard, 20px

--t-xlSales dashboard, 25px

--t-2xlSales dashboard, 31.25px

--t-3xlSales dashboard, 39px

--t-4xlSales dashboard, 48.8px

Radius

Concentric: the outer radius is the inner one plus the padding. Shell 28 is panel 16 plus 12, and the curves stay parallel.

--r-card28px, shell

--r-panel16px, panel

--r-tile14px, tile

--r-ctl12px, control

--r-pillpill

Spacing

A 4-point grid.

--s14px

--s28px

--s312px

--s416px

--s520px

--s624px

--s832px

--s1040px

--s1248px

--s1664px

--s2496px

Motion

Four durations and three curves. --ease is the system's soft ease-out, --ease-io eases in and out, and --spring overshoots a little, only on toggles and checks. With reduced motion, durations drop to zero.

--d1

--d2

--d3

--d4

--ease-io

--spring

120, 220, 420 and 800ms. The first four rows use --ease; the last two, --d4 with the curve in the name.

Shadow

Almost none. --sh-ctl is the 1px outline on controls and --sh-pop is for things that float, like an open list or the search window. Card depth comes from the surface layer.