Skip to content
Storybook

Figma

The Figma library is the source of truth. Each component page links to its Figma component.

Open the Figma file

File structure

  • Foundation: Color, Typography, Grid & Spacing, Shadow & Effects, Icon.
  • Guidelines: System and component guidelines.
  • Components: 22 pages, 90+ component sets with variants for size, state, tone and LTR/RTL.
  • Templates: Modal, Header, Footer and Pricing sections.

Variables

Seven collections (Primitives, Brand, Color, Dimension, Locale, Density, Component). Every variable has a Web code syntax like var(--px-button-radius), so Dev Mode shows the exact CSS variable you use here.

Keeping code in sync

Tokens and the component list on this site are generated from the Figma file with node tools/build-tokens.js and node tools/build-docs.js. When a variable changes in Figma, re-export and rebuild.