CSS Design token tool

CSS Variable Design System Studio

Paste variables, review tokens in list view, edit visually, preview colors, headlines, buttons, spacing and components, then export clean CSS, commented CSS, JSON or a preview-only HTML page.

Visual overview

Grouped tokens, live previews and editable values

Design preview

Uses your current variables

Design system preview

Headline style with your heading font

Use this area to quickly see if colors, typography, spacing and component tokens feel coherent together.

Download template

Secondary

Section headline preview

Card title / smaller headline

Body copy preview. This should be readable, calm and consistent with the visual identity. Change variables and this preview updates live.

Product cardPreview of card surface, border, spacing and title scale.

Editorial cardGood for inspiration pages, articles or feature blocks.

UI cardUseful for forms, menus, filters and admin-style sections.

Button preview controls

Choose which tokens power the preview

Background token Hover token Text token Border token Radius token Height token Padding X token Font token Button text

This only maps existing tokens into the live button preview. It does not rename variables.

Token editor

Copied