Tokens
Every token family from @gyrum-labs/tokens.
Fetched at page load, rendered as live specimens. This page
consumes the same tokens it documents — change a value in gyrum-ui/packages/tokens/, ship a new version,
redeploy canon, and the chrome AND the swatches re-skin
together.
Colour modes
tokens.json → colour.mode--accent
#334155
--accentHover
#1e293b
--accentSoft
#f1f5f9
--bg
#ffffff
--surface
#f8fafc
--text
#0f172a
--textMuted
#475569
--border
#e2e8f0
Showing home-mode values. Click a chip to rebind --accent / --bg / --text / etc. across the whole page; the chrome re-skins because it consumes the same vars.
Status colours
tokens.json → colour.status--ok
#15803d
--ok-soft
#dcfce7
--warn
#b45309
--warn-soft
#fef3c7
--bad
#b91c1c
--bad-hover
#991b1b
--bad-soft
#fee2e2
--never
#94a3b8
--never-soft
#f1f5f9
--running
#3b82f6
--text-on-accent
#ffffff
--text-on-bad
#ffffff
Spacing
tokens.json → space--space-0 0
--space-1 4px
--space-2 8px
--space-3 12px
--space-4 16px
--space-5 24px
--space-6 32px
Typography
tokens.json → typographyThe quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
Layout
tokens.json → layout--page-max-narrow
720px
--page-max
1080px
--page-max-wide
1440px
--measure
60ch
--page-gutter
24px
Corner radius
tokens.json → radius --radius-none 0
--radius-sm 4px
--radius-md 6px
--radius-lg 8px
--radius-xl 10px
Shadow
tokens.json → shadow--shadow-sm
0 1px 2px rgba(15, 23, 42, 0.05)
--shadow-md
0 2px 8px rgba(15, 23, 42, 0.08)
--shadow-lg
0 8px 24px rgba(15, 23, 42, 0.12)
Z-index
tokens.json → z--z-base
0
--z-header
100
--z-drawer
200
--z-scrim
300
--z-modal
400
--z-toast
500
Transition timings
tokens.json → transition--fast
120ms
--base
180ms
--slow
240ms
--easing-standard
cubic-bezier(0.2, 0, 0, 1)