Framework

1 / 6

Choose how your tokens are named

W3C DTCG

The emerging standard. Nested JSON with $value and $type. See documentation

Tailwind

Utility-class aligned. Works with Tailwind config theme extensions. See documentation

Material Design 3

Google's design system. Semantic role-based naming. See documentation

Radix

Numbered 1-12 scale. Used by Radix UI and shadcn. See documentation

Preview

Colors

color.primary.$value#3b82f6

color.on-primary.$value#ffffff

color.surface.$value#ffffff

color.success.$value#16a34a

Typography

font.family.sans.$valueInter

font.size.sm.$value14px

font.size.base.$value16px

font.size.lg.$value18px

Layout

spacing.sm.$value8px

spacing.md.$value16px

spacing.lg.$value24px

radius.md.$value8px