Current generator
Fluid type scale
Current tokens0
Export tokens0
OutputCSS
| Token | Value (math) | Details | Action |
|---|
Generate a complete set of CSS design tokens — type scale, spacing, radius, colour ramps, shadows and motion — that scale fluidly between a small and a large viewport. Everything is computed on your device.
clamp(), so no media queries are needed.On colours: ramps are generated in OKLCH, which keeps perceived lightness even across hues — a mid-blue and a mid-yellow at the same step actually look equally light. Set a contrast target and the tool will hold each step against it.
A design token is a named value — a spacing step, a type size, a shade of your brand colour — that lives in one place and is referenced everywhere else. Change the token and every use of it follows. That is the whole idea: the names are the interface, and the values behind them stay editable.
Fluid tokens go a step further. Rather than switching sizes at breakpoints,
a fluid token interpolates between a minimum and a maximum across a viewport
range using clamp(), so type and spacing scale smoothly at every
width instead of jumping at three or four fixed points.
The output here is plain CSS custom properties by default, with SCSS, flat JSON and DTCG-format JSON also available. DTCG is the Design Tokens Community Group format, which design tools and token pipelines read directly.
Fluid, semantic, accessible tokens for production-ready systems.
Current generator
| Token | Value (math) | Details | Action |
|---|