Design system

Design Tokens

Every value below is read live from the running document, so this page cannot drift from src/styles/tokens.css. Each token is annotated with where the design actually uses it.

tokens: 37
groups: 8
type steps: 10
colour you choose: 1

Typography

Ten steps. Size, tracking and default line-height travel together, because the design tightens tracking as type grows.

$27,829.83

Account balance

size="display"

$1,154.00

Available cashback, page titles

size="title"

£ 369.41

Exchange amounts

size="amount"

Page not found

Placeholder headings

size="subtitle"

Recent transactions

Card titles

size="heading"

$160 /month

Instalment figures

size="stat"

Sarah Rosewood

Row titles, values

size="body"

Your Balance

Field labels, quiet links

size="label"

Monthly Plan

Captions, meta, hints

size="caption"

+10%

Badges

size="micro"

Weight is a separate prop. Each size carries the weight the design pairs it with most often, so <Text size="caption" /> already looks right.

Theme

One hue drives every emphasis in the library. Pick another and watch all 614 components follow — nothing below is hard-coded.

accent #c8f24estrong #c0f428soft #eff8d3ink #1e2509— three of the four are derived, so every hue stays readable.

Label on accent

12.3:1

AAA

Text on wash

16.0:1

AAA

Only --color-accent is chosen. Strong, soft and ink are derived from it — which is why a deep accent gets white labels and a pale one gets near-black, without anybody configuring the pair.

Surfaces

Five stacked planes, from the page behind the window to the cards on top of it.

canvas

#f4f7f0

Page behind the app window

shell

#fff

The app window itself

app

#f6f7f4

Content area inside the window

surface

#fff

Cards, nav track, floating menus

surface-muted

#f4f5f5

Inner fields, inactive icon tiles

surface-sunken

#fafafa

Rate rows, list-row hover

Lines

Hairlines separating surfaces. `line-strong` is the hover/emphasis step.

line

#eeefee

Card and tile borders

line-strong

#e3e5e3

Border on hover, filled control hover

track

#edefea

Unfilled meter pips

Text

A three-step ink hierarchy carries every label in the dashboard.

ink

#17191c

Primary text, values, headings

ink-soft

#5c6165

Secondary text, inactive nav

ink-faint

#6a7075

Captions, meta, placeholders

Accent & status

One accent hue does all the emphasis work; status colours are reserved.

accent

#c8f24e

Logo, active pill, primary action, badges

accent-strong

#c0f428

Accent hover, filled meters, focus ring

accent-soft

#eff8d3

Tinted accent backgrounds

accent-ink

#1e2509

Text on accent

success

#2d7135

Positive amounts

warning

#f5a524

Warnings

danger

#c42630

Errors, destructive actions

Radius

Radius grows with the size of the container it wraps.

glyph

calc(12px * 1)

Icon tiles, rate rows

tile

calc(14px * 1)

Inner tiles, dropdown menus

field

calc(16px * 1)

Exchange amount fields

card

calc(20px * 1)

Cards

banner

calc(24px * 1)

Hero banner

window

calc(32px * 1)

The app window frame

Elevation

Four elevations. Everything else is flat and separated by a hairline instead.

tile

0 1px 2px #141b0f0d

Nav track, rail tiles, header cluster

card

0 1px 2px #141b0f0a, 0 8px 24px -12px #141b0f14

Cards

float

0 4px 16px -4px #141b0f24, 0 1px 3px #141b0f0f

Dropdowns, carousel chevrons, banner CTA

window

0 40px 90px -30px #1f2c1447

The floating app window

Motion

The dashboard animates colour only. These mirror the default transition it relies on.

fast

.15s

Hover and focus colour transitions

slow

.25s

Drawer and disclosure transitions

Layers

Fixed stacking values. Dialogs, drawers and popovers rise from --z-overlay in the order they open, so a panel opened inside a dialog sits above it.

raised

Swap button over the exchange fields

sticky

Carousel chevrons over the card band

overlay

The first overlay on the stack; each one opened after it sits higher

popover

In-flow menus not on the overlay stack

toast

1000

Status messages, above every overlay

tooltip

1100

The label under the pointer, above everything

Spacing & breakpoints

The library uses Tailwind's default 4px spacing scale unmodified, and its default breakpoints. Only the measurements below are design-specific.

Grid gutter

Between cards, in both directions

16px

Card band height

Each of the two card rows at xl and above

306px

Header height

Fixed, at every breakpoint

76px

Icon rail width

Left rail from lg up

42px

Banner height

Below sm / from sm up

150px / 160px

Content max width

The design viewport

1512px

Breakpoints

Drawer / rail / framed window

md 768 · lg 1024 · xl 1280