Tokens
Every visual decision in Hypermedia Components flows through four layers:
- DTCG JSON sources — primitive, semantic, component, and theme token files are the single source of truth.
- A build step emits them as
--hc-*CSS custom properties. - The semantic classes (
hc-button,hc-card, …) consume only those variables — never hard-coded values. - Runtime axes — plain HTML attributes — re-resolve the variables, so one attribute restyles everything at once, with no rebuild.
Fundamentals · Tokens covers the layer model, the DTCG reference syntax, and variable naming in depth.
The five runtime axes
Section titled “The five runtime axes”| Axis | Values | Set on | Docs |
|---|---|---|---|
data-theme | light / dark | <html> | Light and dark |
data-color | accent theme — default, indigo, emerald, rose, amber | <html> | Color themes |
data-neutral | gray ramp — gray, slate, zinc, neutral, stone | <html> | Neutral ramps |
data-density | comfortable / compact / dense | <html> | Density |
dir | ltr / rtl | <html> | Right-to-left |
All five are orthogonal — set any combination. Each also works on any
subtree, not just <html>, so a section can run dark or dense on its own.
Change your brand color
Section titled “Change your brand color”Open the Theme builder, paste one brand color, and copy out a ready-to-paste CSS block (or the DTCG source). It runs the real token build in your browser and checks WCAG contrast live.
In this section
Section titled “In this section”- Color themes — the built-in
data-coloraccents. - Theme builder — generate a custom accent from one brand color.
- Neutral ramps — the
data-neutralgray families. - Color palette — the primitive ramps behind every token.
- Status colors — the semantic info / success / warning / error palette.
- Variants and sizes — every
data-variant/data-size, cross-component. - Density — the
data-densitysizing tiers.