Moderne's design tokens are the single source of truth for color, type, spacing, radius, and shadow across every surface. They are hand-maintained in W3C DTCG format and built with Style Dictionary into CSS variables, JavaScript, and TypeScript, so every value is addressable through a var(--mod-…) reference and nothing is hardcoded.
Key features
- 01Three-tier architecture — primitives resolve into semantic roles, which resolve into component tokens.
- 02Dual-mode on one spine — light and dark share the same accents and flip on a single data-theme attribute.
- 03DTCG source of truth — tokens are hand-edited .tokens.json, built and committed, with no design-tool sync to go stale.
- 04Three outputs, one source — CSS custom properties, JavaScript modules, and TypeScript declarations.
- 05The --mod- namespace — every color, size, radius, stroke, and shadow is reachable as a variable.
- 06Enforced by lint — Biome GritQL rules flag literal values that already have a token.
Use cases
- 01Theming product UI across light and dark from a single token set.
- 02Building on-brand marketing and docs without choosing raw hex or pixel values.
- 03Keeping Figma, the published site, and the plugin in lockstep on one spine.
FAQ
- Where do the values come from?
- They are hand-maintained W3C DTCG .tokens.json files, built with Style Dictionary and committed. There is no design-tool sync to drift.
- How do I use a token?
- Reference it as var(--mod-…) in CSS, or import the matching export from @moderneinc/design-system-tokens in JavaScript or TypeScript.
- How does dark mode work?
- Set data-theme="dark" on a root element and the same tokens flip. It never switches on its own.
- Can I hardcode a value instead?
- No — Biome GritQL rules flag any literal that already has a token, so the system stays the single source of truth.