Tokens

Design tokens

Tokens

Each token is a CSS design-token group containing: class + var + value.

Edit Tokens

Add tapuz classes or vars to your code and customize their values using the Tokens Engine or the Editor.

Features Tokens

The base package includes 45 tokens. Additional tokens are called Features Tokens. Each subscription plan includes a set for free, and you can always buy more as needed. Manage them from the Features Tokens tab in your dashboard.

Tokens CSS

CSS variables

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

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

CSS classes

Apply directly to elements. tpz- prefixed

<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 →

More to come

Unlimited

Unlocking a new feature adds a new token to your engine and a new controller in your editor, across all your projects.

View tokens →