Getting started

Install FDS, drop the theme stylesheet into any page, and style your first component with design tokens.

FDS ships as a single npm package: flexa-design-system. It contains a design-token source (DTCG JSON), pure TypeScript functions that turn tokens into CSS, and two pre-built stylesheets for projects that don't want a build step at all.

Option A — just the CSS

The fastest way to use FDS is the pre-built theme stylesheet. It defines every --fx-* custom property (light + dark + reduced-motion) and nothing else — no classes, no resets, no specificity fights.

<link rel="stylesheet" href="https://unpkg.com/flexa-design-system/dist/theme.css">
<link rel="stylesheet" href="https://unpkg.com/flexa-design-system/dist/base-typography.css">

Then style anything with the semantic variables:

.card {
  background: var(--fx-color-surface);
  color: var(--fx-color-text);
  padding: var(--fx-space-6);
  border-radius: var(--fx-radius-lg);
  box-shadow: var(--fx-shadow-md);
}

Dark mode is one attribute — set data-fx-scheme="dark" on <html> (or let prefers-color-scheme do it automatically):

<html data-fx-scheme="dark">

Option B — the JS API

npm install flexa-design-system

Everything is a pure function over the token registry — emit a theme stylesheet at build time, resolve token ids into var() strings, or gate a custom theme against the WCAG pairs:

import {
  defaultTheme, emitTheme, emitBaseTypography,
  tokenIdToCssVar, hasToken, checkThemeContrast,
} from 'flexa-design-system';

const css = emitTheme(defaultTheme());   // full :root stylesheet
tokenIdToCssVar('color.on-primary');     // '--fx-color-on-primary'
checkThemeContrast(defaultTheme());      // [] — every pair passes AA

What's in the box

Export	What it is
`dist/theme.css`	Every `--fx-` variable: light, dark, `prefers-` blocks
`dist/base-typography.css`	h1–h6/body element rules driven by the variables
`fds.tokens.json`	The DTCG token source — feed it to Style Dictionary etc.
JS API	`emitTheme`, `resolveStyleTokens`, `checkThemeContrast`, registry

base-typography.css scopes its rules to [data-fx-type="flexa/root"] — add that attribute to your content wrapper to opt in. This keeps FDS from restyling pages that only want the variables.

Next: read how the three token tiers fit together in the Token tiers guide, or browse every token on the Tokens page.