Tokens
v0.0.278 primitives, 147 semantic tokens and 75 dark-theme overrides. Rendered from the token export, so it cannot describe a token that no longer exists.
Themes
Both panels use identical markup and identical utility classes. Only the .dark class on the wrapper differs — that is exactly what @theme inline buys, and why no component needs to know a theme exists.
light theme
Surfaces
canvas
sidebar
page
subtle
muted
Text on page surface — measured, not eyeballed
primary — 17.57:1 AA
secondary — 9.01:1 AA
tertiary — 5.51:1 AA
Accent
Focus ring measures 5.37:1 AA here. Tab into the buttons to see it.
Status
Data bars — the figure is required, never optional
Avatar palette — colour is a scanning aid, initials are aria-hidden
Chart series
Elevation — shown on canvas, because dark mode carries hierarchy with surface lightness rather than shadow
xs
sm
md
lg
frame
dark theme
Surfaces
canvas
sidebar
page
subtle
muted
Text on page surface — measured, not eyeballed
primary — 15.77:1 AA
secondary — 7.14:1 AA
tertiary — 5.66:1 AA
Accent
Focus ring measures 10.82:1 AA here. Tab into the buttons to see it.
Status
Data bars — the figure is required, never optional
Avatar palette — colour is a scanning aid, initials are aria-hidden
Chart series
Elevation — shown on canvas, because dark mode carries hierarchy with surface lightness rather than shadow
xs
sm
md
lg
frame
Type scale
Named semantically rather than numerically. Flab's body copy is 0.8125rem (13px at the browser's default 16px root size), while Tailwind's text-sm is 0.875rem. The relative scale follows the user's root font-size preference without redefining familiar Tailwind classes.
text-display2.125rem / 2.5remThe quick brown fox
text-display-sm1.75rem / 2.125remThe quick brown fox
text-heading1.25rem / 1.75remThe quick brown fox
text-title1rem / 1.5remThe quick brown fox
text-title-sm0.875rem / 1.25remThe quick brown fox
text-body0.8125rem / 1.25remThe quick brown fox
text-body-sm0.75rem / 1.125remThe quick brown fox
text-caption0.6875rem / 1remThe quick brown fox
text-micro0.625rem / 0.875remThe quick brown fox
Radius
xs
sm
md
lg
xl
2xl