Tokens
Every value below is a live --ss-* custom property read from this page's <html>. Flip the theme and size controls in
the top bar and watch the swatches and scales update — that's the whole system.
surfaces
foreground
brand
status
code
type scale
Aa
--ss-size-display …Aa
--ss-size-h1 …Aa
--ss-size-h2 …Aa
--ss-size-h3 …Aa
--ss-size-body …Aa
--ss-size-sm …Aa
--ss-size-xs …spacing scale
--ss-s-1 …--ss-s-2 …--ss-s-3 …--ss-s-4 …--ss-s-5 …--ss-s-6 …--ss-s-8 …--ss-s-10 …--ss-s-12 …--ss-s-16 …size axis (changes with data-size-variant)
--ss-control-font …--ss-control-py …--ss-input-font …--ss-card-px …--ss-gap …--ss-block-gap …--ss-shell-side-w …--ss-shell-top-h …