Design Token Generator

Erstelle ein vollständiges Design-System auf CSS-Variablen-Basis. Definiere Typografie, Farben, Spacing und Fluid-Skalen und erhalte sauber strukturierte Design Tokens für moderne Interfaces.

Gebaut von Roman Hospenthal — Webdesign & Entwicklung in Schwyz.

Base

HTML Font Size (%)

Font Family

Base Font Weight

Colors

Typography

Scale Factor

Base Font Size (px)

Steps

Fluid Typography

Wähle zwischen einem einzelnen fluiden clamp()-Wert oder einer kompletten fluiden Type Scale.

Single Clamp Fluid Type Scale

Min Font (rem)

Max Font (rem)

Min Viewport (px)

Max Viewport (px)

Spacing

Base Spacing (px)