Design Token Generator
Generate a small CSS custom-property token block containing a chosen primary color.
How to use
- Enter the primary color value and run.
Capabilities and scope
The current implementation puts the input or default #176b5b in --color-primary and emits fixed --space-sm, --space-md, and --radius-md examples.
How it works
A fixed :root template inserts the color plus 0.5rem, 1rem, and 0.75rem token values.
Example
Entering #ff0000 creates a :root block with --color-primary: #ff0000.
Useful for
- Bootstrap a minimal design-token example for a UI
Before you use it
- Color validity, palette generation, and a complete design-system token model are not provided.
Frequently asked questions
Can I configure the spacing tokens too?
No. The current spacing and radius values are fixed examples.