Your components, in sync.
The card and its controls share color, spacing, and radius values. Try a tighter layout or a different palette.
ToolsPlayground
Design token playground.
Change spacing, corner radius, color, and density, then watch the sample components update together. Explore how shared design decisions reach an interface.
- Live component preview
- Color and density controls
- Reset anytime
See how tokens shape the interface.
Adjust the sliders and select a palette or density. The component preview updates immediately. Reset the controls to return to the starting values.
Token controls.
Adjust the shared values and compare how the sample components respond.
Primary color
Density
preview live
Change the controls to compare shape, spacing, and color.
Using this tool.
Make a shared decision visible
Change the spacing and watch how the preview responds. The components read shared CSS custom properties, so a single adjustment changes several parts of the interface together.
This is useful when explaining tokens to a teammate: you can see both the benefit of a shared value and the consequences of changing it. A tighter density may help one screen while making another harder to read.
Separate values from intent
A primitive token names a value, such as a particular shade of blue. A semantic token describes its purpose, such as an action background. Components can reference that purpose while a theme determines which value it uses.
That separation can make theming easier to maintain. It still requires testing: changing a shared color can affect contrast, and changing spacing can affect content fit or target size. Shared values help distribute a decision; they do not guarantee that every result is usable.
Explore the implementation in context
This playground is a small, local demonstration. For a larger personal reference project with component APIs, documentation, and live examples, explore Rudiment UI.