A zero-runtime, WCAG-gated design token system
FDS is a CSS-variables design token system: a DTCG token source plus pure functions for theme emission, brand derivation and contrast checking. No framework, no runtime, no dependencies.
npm install flexa-design-system # v2.8.1
<link rel="stylesheet" href="https://unpkg.com/flexa-design-system/dist/theme.css">Not Tailwind, not shadcn
No utility classes, no component source to copy. FDS is the layer underneath: a strict token vocabulary (--fx-*), pure functions that derive complete themes from a brand, and validation gates that make generated design safe. Its closest relatives are Radix Colors + Open Props + Style Dictionary — in one dependency-free package. See a real dashboard built only from tokens →
Guides
Getting started
Install FDS, drop the theme stylesheet into any page, and style your first component with design tokens.
The three token tiers
Primitive, semantic and component tokens — why only one tier holds raw values, and the naming grammar that makes the system machine-checkable.
Themes & dark mode
The Theme model: one base token set, per-scheme overrides, automatic prefers-color-scheme, and the WCAG contrast gate.
Brand derivation (applyBrand)
Turn a handful of brand choices — one color, two fonts, a radius feel — into a complete, accessible theme with a single pure function.
The style pipeline & recipes
How token ids inside a style spec become var() strings, and how the data-only recipe layer expresses variants without a runtime.
WordPress theme.json bridge
How FDS coexists with WordPress global styles: preset-aliased emission and a generated theme.json settings fragment.
Versioning & distribution packs
The FDS_VERSION semver contract, and how themes/brands travel between sites as validated pack files.
Example dashboard
A working analytics dashboard styled entirely from FDS tokens — its stylesheet scanned at build time so every value is proven on-system, none off.
Accessibility
Four standards, gated not advised — WCAG 2 text and non-text, APCA, and a colour-vision axis — measured live from the default theme by the same engine CI runs.
Starter packs
Sixteen brand personalities on one core system — each a full theme derived live from a tiny brand, previewed in place.
Playground
Pick a brand color, fonts and a radius feel — watch a complete, contrast-checked theme derive live in your browser.