​

Design System Foundations

Last Verified: 2026-05-20 | Sources: equa-patternlib-nextjs/src/tokens/design-tokens.json, equa-patternlib-nextjs/src/tokens/design-tokens.css, equa-patternlib-nextjs/stories/DesignTokens.mdx

​

Source Of Truth

The design-token source is equa-patternlib-nextjs/src/tokens/design-tokens.json. The generated CSS and TypeScript exports are consumed by Storybook, equa-web, and gateway-aligned Lit/CSS surfaces.

​

Token Groups

​

Theme Contract

​

Export Convention

• Keep generated token assets in the owning product repo until copied into this docs repo as visual references.
• Store rendered token visuals under /images/design-system/foundations/.
• Store synced Figma exports under /images/design-system/figma-exports/.

​

Update Workflow

1. Edit equa-patternlib-nextjs/src/tokens/design-tokens.json.
2. Run npm run tokens and npm run tokens:check in equa-patternlib-nextjs.
3. Refresh this page and any affected component screenshots.
4. Run npm run build:search, npm run validate, npm run broken-links, and npm run a11y in equa-docs.