Skip to content
hs108 docs

Tokens — Overview

What are design tokens?

Design tokens are the atomic decisions of the visual system — stored as CSS custom properties so they can be referenced consistently across every surface.

Instead of hardcoding color: #2186EB everywhere, you reference color: var(--sl-color-accent). When the brand updates, one change propagates everywhere.

Token layers

The hs108 system uses two layers:

1. Hue scales (raw values)

Every color family has 11 stops (50 → 950) plus two native blacks and whites:

--blue-500: #2186EB;
--blue-black-native: #020D1F;
--blue-white-native: #CFE6FE;

These are never used directly in components — only referenced by semantic tokens.

2. Semantic tokens (intent-based)

Semantic tokens give meaning to raw values. They describe what a color does, not what it is:

--sl-color-accent:      var(--blue-500);  /* primary accent */
--hs-highlight:         var(--vermilion-500);  /* action / emphasis */

When themes change, only the semantic layer updates — hue scales stay fixed.

The two accent colors

TokenHueUse
--sl-color-accentBlue 500 — #2186EBNavigation, links, focus rings, primary data
--hs-highlightVermilion 500 — #F03A17Copy buttons, active sidebar, warning callouts, CTAs

Available token groups

Typography tokens
Token Value Usage
Instrument Serif Large display headings, italic titles
Geist All body copy and UI text
Geist Mono Code blocks, token names, nav labels
Genos Alternate display — geometric, condensed
Rajdhani Alternate body — technical, structured
Michroma Alternate display — futuristic, mono-spaced feel
IBM Plex Serif Alternate body — editorial, formal
Transition token
Token Value Usage
150ms ease Default duration and easing for hover/focus transitions
2px Consistent border weight across all components

Usage in code

Reference tokens via var() in any CSS context:

.my-element {
  color: var(--sl-color-accent);
  border: var(--hs-border-width) solid var(--sl-color-gray-5);
  font-family: var(--font-mono);
  padding: var(--space-gap);
}