Tokens

Design tokens

Tokens are named values for colors, typography, and component styles. tapuz injects them as CSS variables and utility classes. Edit a token in the dashboard and the change propagates instantly to every connected tab.

Two ways to use tokens

CSS variables

Use in CSS, inline styles, or any style string. All prefixed with --tpz-

color: var(--tpz-primary-color);

CSS classes

Apply directly to elements. All prefixed with tpz-

<h1 className="tpz-h1-sz tpz-prm-clr">Title</h1>

Token categories

Palettes

8 vars / 8 classes

Primary, secondary, accent, background, surface, text, and border colors. Injected as CSS variables and utility classes.

View tokens →

Typography

14 vars / 8 classes

Heading font family, H1 through H5 sizes and weights, body font family, size, and weight.

View tokens →

Buttons

8 vars / 7 classes

Border radius, font size tiers (main, base, sub), font weight, and drop shadow.

View tokens →

Forms

10 vars / 10 classes

Input background, border color, border width and style, border radius, and all interaction states.

View tokens →

Spacing

5 vars / 5 classes

Padding sizes in five steps: XS, S, M, L, XL. Used for consistent component and layout spacing across your project.

View tokens →