Skip to main content

​
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. Design tokens visual reference

​
Token Groups

GroupSourceNotes
$schemadesign-tokens.jsonToken group exported through CSS and TypeScript generation
metadesign-tokens.jsonToken group exported through CSS and TypeScript generation
colorsdesign-tokens.jsonToken group exported through CSS and TypeScript generation
spacingdesign-tokens.jsonToken group exported through CSS and TypeScript generation
typographydesign-tokens.jsonToken group exported through CSS and TypeScript generation
radiidesign-tokens.jsonToken group exported through CSS and TypeScript generation
shadowsdesign-tokens.jsonToken group exported through CSS and TypeScript generation
breakpointsdesign-tokens.jsonToken group exported through CSS and TypeScript generation
animationdesign-tokens.jsonToken group exported through CSS and TypeScript generation

​
Theme Contract

ThemeScopeNotes
Equa darkStorybook, equa-web, gateway-aligned componentsDefault dark teal product theme
LightStorybook, equa-web, gateway-aligned componentsLight product theme for screenshots and contrast checks
MidnightStorybook and equa-webProduct-only dark navy theme, not a gateway requirement

​
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.