@codeways/design-tokens

Design tokens

Light / dark

Every value below is read live from @codeways/design-tokens/tokens.css through its CSS variable, so toggling light and dark shows exactly what each app gets.

Colour - surfaces

Background

--background

Foreground

--foreground

Card

--card

Popover

--popover

Muted

--muted

Muted foreground

--muted-foreground

Accent

--accent

Surface 3

--surface-3

Foreground secondary

--foreground-secondary

Placeholder

--placeholder

Colour - lines

Border

--border

Input

--input

Ring

--ring

Colour - brand and destructive

Primary

--primary

Primary hover

--primary-hover

Primary active

--primary-active

Link

--link

Selected

--selected

Selected foreground

--selected-foreground

Selected border

--selected-border

Destructive

--destructive

Colour - status tones

Each tone is text / subtle background / border / solid fill.

Neutral text

--neutral

Neutral subtle

--neutral-subtle

Neutral border

--neutral-border

Neutral solid

--neutral-solid

Info text

--info

Info subtle

--info-subtle

Info border

--info-border

Info solid

--info-solid

Teal text

--teal

Teal subtle

--teal-subtle

Teal border

--teal-border

Teal solid

--teal-solid

Warning text

--warning

Warning subtle

--warning-subtle

Warning border

--warning-border

Warning solid

--warning-solid

Success text

--success

Success subtle

--success-subtle

Success border

--success-border

Success solid

--success-solid

Danger text

--danger

Danger subtle

--danger-subtle

Danger border

--danger-border

Danger solid

--danger-solid

Colour - suite bar

Identical in every app - always the dark palette, in both themes.

Topbar

--topbar

Topbar foreground

--topbar-foreground

Topbar muted

--topbar-muted

Topbar field

--topbar-field

Topbar field border

--topbar-field-border

Inverse (tooltip)

--inverse

Colour - charts

Fixed categorical order, colour-vision-deficiency validated per mode.

Chart 1

--chart-1

Chart 2

--chart-2

Chart 3

--chart-3

Chart 4

--chart-4

Chart 5

--chart-5

Chart grid

--chart-grid

Type scale

The invoice was senttext-display - 30 / 36, -0.022em, 600

The invoice was senttext-page-title - 20 / 28, -0.017em, 600

The invoice was senttext-section - 15 / 22, -0.011em, 600

The invoice was senttext-subhead - 14 / 20, -0.006em, 600

The invoice was senttext-body - 14 / 20, -0.006em, 400

The invoice was senttext-table - 13 / 18, -0.003em, 400

The invoice was senttext-caption - 12 / 16, 0em, 400

The invoice was senttext-overline - 11 / 16, 0.06em, 600

The invoice was senttext-kpi - 22 / 28, -0.02em, 600

Spacing

Named layout metrics, plus the default 4px-based Tailwind scale used for gaps and padding.

control-sm - 28px

control - 32px

control-lg - 36px

row-compact - 36px

row - 44px

Radius

xs - 4px

sm - 6px

md - 8px

lg - 10px

xl - 12px

2xl - 16px

control

card

Elevation

paper