Azad tool // Token Generator Runs on your device ← All tools

Generator settings

Sections begin collapsed so you can scan the full system first.

1. Choose token family

What do you want to generate?

Type scaleFluid font-size variables and specimen text. Line-heightUnitless leading with ascending or descending scales. Spacing scaleFluid padding, margin, and gap values. Border radiusIndependent static or fluid corner scale. LayoutGutters, measures, grids, sidebars, and intrinsic sizing. ColorsGamut-fitted OKLCH palettes and readable on-colors. ShadowsSingle or layered elevation with full tint controls. AnimationDuration scales, easing curves, and reduced-motion token.

2. Fluid bounds and units

Fluid basis

Endpoint unit

Reference start

Reference end

Root font size

Element font size

3. Family values

Base at start

Base at end

Start ratio

End ratio

Ratio preset

Preview text

Keep start and end ratios equal

Smallest step

Largest step

4. Naming and prefixes

Global system prefix

Family prefix

Invalid prefix characters are converted to hyphens. Each family remembers its own prefix.

5. Output and persistence

Export format

CSS selector

Download filename

Decimal precision

Export all token families, not only the current family

Wrap CSS output in @layer tokens

Include generation timestamp

Include family comments

Minify generated output

Show fluid math in token table

Automatically save settings in this browser

Current generator

Fluid type scale

Current tokens0

Export tokens0

OutputCSS