Design system

Every TokenOps surface — the menu bar, the team app, this site — takes its colours, type, spacing and radii from one set of design tokens: assets/brand/tokens.json in the public repo. Its generator writes tokens.css (CSS custom properties prefixed --tok-) and the token table with each colour's measured WCAG contrast; its tests fail when a colour falls below the contrast it names. This page shows copies of both, refreshed by scripts/sync-tokens.sh; nothing here is typed in by hand.

Rules

Rules the tokens encode:

• Light mode is plain white, dark mode plain ink; no gradients or glows on the ground.
• A lime fill (--tok-accent) carries ink text (--tok-on-accent), never white.
• On a light ground, lime as text, a link, a focus ring, a meter or a thin stroke is --tok-accent-text (#3F6B0B); on ink it is the lime itself.
• #4D7C0F (--tok-lime-mark) is for the logo's ring and chart bars only.
• Amber marks warnings and the logo's token; red is over the limit.

Palette

Each colour on its own ground: light on --tok-bg light, dark on --tok-bg dark. A ratio is the contrast measured against the ground it names, with the minimum the tests hold it to.

Brand

light#0E1220

dark#0E1220

--tok-ink

Dark ground; text on lime.

light#C6F432

dark#C6F432

--tok-lime

Electric lime: fills that carry ink, and the accent on ink.

light#D4F75E

dark#D4F75E

--tok-lime-hover

A lime fill under the pointer.

light#B3E01C

dark#B3E01C

--tok-lime-press

A lime fill pressed.

light#3F6B0B

dark#3F6B0B

--tok-lime-dark

Lime as text, links, focus rings, bars and thin strokes on white.

Contrast 6.32:1 on white (min 5)

light#4D7C0F

dark#4D7C0F

--tok-lime-mark

The logo's ring on a light ground and chart bars; never text (4.99:1).

Contrast 4.99:1 on white (min 3)

light#F59E0B

dark#F59E0B

--tok-amber

The token in the logo; warning fills and marks.

light#DC2626

dark#DC2626

--tok-red

Danger fills and over-limit bars.

light#FFFFFF

dark#FFFFFF

--tok-white

Light ground; vendor logo tiles.

Surface

light#FFFFFF

dark#0E1220

--tok-bg

Page ground.

light#FFFFFF

dark#161A28

--tok-surface

Cards and panels on the page.

light#F7F8F9

dark#1B2030

--tok-surface-2

Quiet fills: chips, hovered rows, inline boxes.

light#F0F1F3

dark#222838

--tok-surface-3

Stronger fills: code, table heads.

light#FAFAFB

dark#111524

--tok-sidebar

Navigation column.

light#E4E6EA

dark#262C3C

--tok-border

Hairlines and control borders.

light#CFD3D9

dark#353C4F

--tok-border-strong

Borders that must read: inputs, hovered controls.

lightrgba(22, 24, 29, 0.10)

darkrgba(255, 255, 255, 0.10)

--tok-track

The empty part of a meter.

lightrgba(255, 255, 255, 0.85)

darkrgba(14, 18, 32, 0.82)

--tok-overlay

Behind a dialog.

lightrgba(198, 244, 50, 0.45)

darkrgba(198, 244, 50, 0.45)

--tok-selection

Selected text.

Text

light#16181D17.75:1 on bg (min 7)

dark#F2F3F516.79:1 on bg (min 7)

--tok-text

Body text and headings.

light#3D414810.25:1 on bg (min 7)

dark#C7CAD111.36:1 on bg (min 7)

--tok-text-2

Secondary text.

light#555A646.92:1 on bg (min 4.5)

dark#C7CAD111.36:1 on bg (min 4.5)

--tok-muted

Labels, captions.

light#686D774.59:1 on surface-3 (min 4.5)

dark#9DA2AC5.73:1 on surface-3 (min 4.5)

--tok-faint

The quietest text that still reads, also on surface-3.

Accent

light#C6F432

dark#C6F432

--tok-accent

Primary buttons, the selected tab, hovered menu rows.

light#D4F75E

dark#D4F75E

--tok-accent-hover

A lime fill under the pointer.

light#B3E01C

dark#B3E01C

--tok-accent-press

A lime fill pressed.

light#0E1220

dark#0E1220

--tok-on-accent

Text and marks on a lime fill.

Contrast 14.55:1 on accent (min 7)

light#F2FDD2

darkrgba(198, 244, 50, 0.14)

--tok-accent-soft

A tinted ground: info notes, the current nav item.

light#D6F37A

darkrgba(198, 244, 50, 0.30)

--tok-accent-border

Border of a tinted ground.

light#3F6B0B6.32:1 on bg (min 5)

dark#C6F43214.55:1 on bg (min 5)

--tok-accent-text

Links, lime text, focus rings, thin strokes, healthy meters.

Status

light#F59E0B2.14:1 on bg (min 2)

dark#FBBF2411.17:1 on bg (min 2)

--tok-meter-warn

A meter past 60%.

light#DC26264.82:1 on bg (min 3)

dark#F871716.74:1 on bg (min 3)

--tok-meter-high

A meter past 80%; the even-pace tick.

light#1270346.18:1 on bg (min 4.5)

dark#5BD08A9.62:1 on bg (min 4.5)

--tok-success

Success text.

light#E8F6ED

darkrgba(34, 160, 90, 0.14)

--tok-success-soft

Success ground.

light#B9E2C7

darkrgba(91, 208, 138, 0.30)

--tok-success-border

Success border.

light#92400E7.09:1 on bg (min 4.5)

dark#FBC65A11.83:1 on bg (min 4.5)

--tok-warn

Warning text.

light#FEF5E4

darkrgba(245, 158, 11, 0.13)

--tok-warn-soft

Warning ground.

light#F6D28E

darkrgba(245, 158, 11, 0.32)

--tok-warn-border

Warning border.

light#F59E0B

dark#F59E0B

--tok-warn-accent

Warning marks and bars.

light#B91C1C6.47:1 on bg (min 4.5)

dark#F871716.74:1 on bg (min 4.5)

--tok-danger

Error and danger text.

light#FDEEEE

darkrgba(220, 38, 38, 0.14)

--tok-danger-soft

Danger ground.

light#F5C2C2

darkrgba(248, 113, 113, 0.32)

--tok-danger-border

Danger border.

light#DC2626

dark#DC2626

--tok-danger-solid

Destructive buttons.

light#FFFFFF

dark#FFFFFF

--tok-on-danger

Text on a destructive button.

Contrast 4.82:1 on danger-solid (min 4.5)

Chart

light#4D7C0F4.99:1 on bg (min 3)

dark#C6F43214.55:1 on bg (min 3)

--tok-chart-bar

Bars.

light#3F6B0B

dark#D4F75E

--tok-chart-bar-hover

A hovered bar.

light#3F6B0B6.32:1 on bg (min 3)

dark#C6F43214.55:1 on bg (min 3)

--tok-chart-line

Lines.

light#E8EAEE

dark#262C3C

--tok-chart-grid

Gridlines.

light#555A646.92:1 on bg (min 4.5)

dark#A9AEB88.37:1 on bg (min 4.5)

--tok-chart-text

Axis labels.

light#C8CCD3

dark#3A4154

--tok-chart-muted

Series in the background.

Brand panel

light#0E1220

dark#0E1220

--tok-brand-bg

Ground.

light#F2F3F5

dark#F2F3F5

--tok-brand-text

Text.

Contrast 16.79:1 on brand-bg (min 7)

light#C7CAD1

dark#C7CAD1

--tok-brand-muted

Secondary text.

Contrast 11.36:1 on brand-bg (min 4.5)

light#C6F432

dark#C6F432

--tok-brand-accent

Accent.

Contrast 14.55:1 on brand-bg (min 4.5)

Type

Token	Size	Sample
--tok-fs-2xs	11px	Know what's left
--tok-fs-xs	12px	Know what's left
--tok-fs-sm	13px	Know what's left
--tok-fs-md	14px	Know what's left
--tok-fs-lg	16px	Know what's left
--tok-fs-xl	18px	Know what's left
--tok-fs-2xl	22px	Know what's left
--tok-fs-3xl	26px	Know what's left
--tok-fs-4xl	32px	Know what's left

Token	Value	Sample
--tok-weight-medium	550	Set what's allowed
--tok-weight-semibold	600	Set what's allowed
--tok-weight-bold	650	Set what's allowed
--tok-lh-tight	1.25	line height
--tok-lh	1.55	line height

Spacing

Token	Value
--tok-s-0	2px
--tok-s-1	4px
--tok-s-2	8px
--tok-s-3	12px
--tok-s-4	16px
--tok-s-5	20px
--tok-s-6	24px
--tok-s-8	32px
--tok-s-10	40px
--tok-s-12	48px
--tok-s-16	64px

Radii

--tok-r-xs4px

--tok-r-sm6px

--tok-r-md8px

--tok-r-lg12px

--tok-r-xl16px

--tok-r-full999px