Design Studio
Create and manage your design system tokens.
Tokens
Design DNA, colors, typography, spacing, and more
Rationale
Document design decisions
Preview
Live sample with current tokens
Start Building
1. Configure your Design DNA and tokens — product identity, foundation, overlays, colors, fonts, spacing.
2. Write your design rationale — explain why each choice was made.
3. Preview how tokens look on real components in light and dark mode.
4. Export to theme.yaml, DESIGN.md, CSS, or Tailwind config.