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.
terminal palette (dark theme)
The 16 ANSI slots plus bg/fg/accent — the root layer
every other color token derives from. Values shown are the dark theme's; flip the page theme in the topbar to see the
light set.
surfaces
foreground
brand
status
sentiment
log levels
badge tones
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 …--ss-badge-dot …--ss-badge-gap …--ss-side-w …--ss-side-w-rail …--ss-spark-h …--ss-spark-bar-w …--ss-toast-ic …--ss-toast-swipe …--ss-empty-glyph …--ss-empty-max-w …full inventory
The gallery above visualises the most-used tokens; the lists below complete the public --ss-* surface, live-resolved the same way. Core tokens are defined in src/styles/_tokens.scss; component tokens live in per-component partials under src/styles/components/*.scss, joined by _index.scss. Full reference (per-tier values, purpose): docs/tokens.md in the repo. The legacy .hs-* typography classes
shipped by theme.css are deprecated — don't use them in new code.
remaining color tokens (theme axis (data-theme); washes are color-mix() derivations of the terminal slots)
--ss-bg-inset …--ss-fg-on-primary …--ss-fg-on-danger …--ss-selection-bg …--ss-selection-fg …--ss-code-number …--ss-code-comment …--ss-code-overlay …--ss-badge-brand-border …--ss-badge-neutral-border …--ss-badge-positive-border …--ss-badge-caution-border …--ss-badge-critical-border …--ss-badge-info-border …fonts (static)
--ss-font-display …--ss-font-subhead …--ss-font-body …--ss-font-alt …--ss-font-mono …radii · elevation · motion (static — every radius is 0 (house rule); --ss-dur-* zero under reduced motion)
--ss-radius-0 …--ss-radius-1 …--ss-radius-2 …--ss-radius-pill …--ss-shadow-0 …--ss-shadow-1 …--ss-shadow-2 …--ss-shadow-pop …--ss-shadow-glow …--ss-ease …--ss-dur-fast …--ss-dur …--ss-dur-slow …--ss-dur-xslow …--ss-icon-spin-dur …remaining size-axis tokens (size axis (data-size-variant))
--ss-leading …--ss-ui-xs …--ss-ui-sm …--ss-ui-md …--ss-ui-lg …--ss-icon …--ss-control-px …--ss-input-py …--ss-input-px …--ss-panel-head-py …--ss-panel-head-px …--ss-panel-body-py …--ss-panel-body-px …--ss-card-py …--ss-metric-val …--ss-row-py …--ss-row-px …--ss-badge-px …--ss-chip-py …--ss-gap-sm …--ss-main-py …--ss-main-px …--ss-side-badge-py …--ss-side-badge-px …--ss-empty-glyph-compact …--ss-spark-gap …component tokens — Menu (size axis · src/styles/components/_menu.scss)
--ss-menu-pad …--ss-menu-item-py …--ss-menu-item-px …--ss-menu-item-gap …--ss-menu-min-w …--ss-menu-offset …component tokens — SegmentedControl (size axis · src/styles/components/_segmented-control.scss)
--ss-seg-font …--ss-seg-py …--ss-seg-px …--ss-seg-gap …component tokens — Accordion (size axis · src/styles/components/_accordion.scss)
--ss-acc-head-py …--ss-acc-head-px …--ss-acc-body-py …--ss-acc-body-px …--ss-acc-chevron …--ss-acc-gap …component tokens — BottomNav (derived from the shell/spacing scale · src/styles/components/_bottom-nav.scss)
--ss-bottom-nav-h …--ss-bottom-nav-px …--ss-bottom-nav-tab-py …--ss-bottom-nav-gap …--ss-bottom-nav-label-fs …--ss-bottom-nav-badge-top …--ss-bottom-nav-badge-dx …--ss-bottom-nav-badge-min-w …--ss-bottom-nav-badge-h …--ss-bottom-nav-badge-fs …--ss-bottom-nav-badge-px …component tokens — LogStream (viewport + column metrics (DS-0068) · src/styles/components/_log-stream.scss)
--ss-log-min-h …--ss-log-max-h …--ss-log-t-w …--ss-log-lvl-w …component tokens — Image (size axis (chrome) + static/theme-aware washes · src/styles/components/_image.scss)
--ss-image-glyph …--ss-image-fallback-min …--ss-image-close …--ss-image-frame-bg …--ss-image-shimmer …--ss-image-shimmer-dur …--ss-image-focus-w …--ss-image-caption-gap …--ss-image-backdrop …--ss-image-lightbox-z …--ss-image-lightbox-pad …component tokens — Heading (size axis · src/styles/components/_heading.scss)
--ss-heading-size …--ss-heading-mb …--ss-heading-shadow …component tokens — Container (size axis · src/styles/components/_container.scss)
--ss-container-max-w …--ss-container-px …--ss-container-page-py …component tokens — Spinner (size axis (font) + static color · src/styles/components/_spinner.scss)
--ss-spinner-font …--ss-spinner-color …