The design tokens engine you always wanted

Update once.
Sync everywhere.

A powerful tokens engine that gives you complete control over every product's appearance. Works with any stack, any pipeline.

About tapuz

Tokens management system

One system

tapuz is all-in-one platform for editing design directly in your projects.

Infinite products

Every change you make syncs across all your connected projects.

Live edit

tapuz let you edit and sync LIVE projects in ease

yoursite.com
Get started
Editor · Colors
Primary#3A3A44
tapuz
The editor

Meet your editor

Open the editor on any site and shape your design by hand. Pick a color, grab a font, drop in a shadow - watch changes in real time. Saving is updating your codebase instantly.

Editor demo
The engine

Meet your engine

Manage every token from one place. Change a value once and it flows to every connected project in real time. Colors, type, spacing, buttons - all in your control.

Learn more
Tokens engineSaved
--tpz-radius12px
Getting started

How to use tapuz

From zero to live design tokens in three simple steps.

01
Pick a plan

Create an account and choose a plan. A setup wizard opens right after checkout and walks you through everything.

Read more
02
Set up

The wizard will help you create your first project and get you set up. Install tapuz package and wrap your app.

Read more
03
The fun begin!

Use tpz classes / variables and customize them using the editor or the engine. Changes will update instantly.

Read more
Only what you need

tapuz Ecosystem

One package. Full control over how every product looks.

Tokens engine

Manage all tokens from one dashboard. Upadte token value via your tokens engine will automaticly updates everywhere in real time.

Live editor

Simply append '?tapuz-edit' to any connected project URL to make the editor panel available. All changes are previewed in real time.

Instant sync

Token changes update across all connected projects the moment you save, ensuring all connected environments always stay in sync.

Tokens

Every token combine of class + variable. --tpz- CSS variable and a tpz- utility class. Use it however feels natural to you.

Any stack

Works with React, Vue, Svelte, or plain HTML. Install one package, wrap your app, and you are good to go.

Multi-project

Connect any number of projects in one dashboard. Update a token once and every connected project is updated simultaneously.

Adaptable & Versatile

Tokens features

Get instant access to new design controls.

Starter
3
FREE
Tokens features included
Pro
7
FREE
Tokens features included
Enterprise
12
FREE
Tokens features included
48h early pricing

When new tokens features release, all subscribers get access to an exclusive 48-hour discount window don't miss it out!

Tokens feature packages

Choose a single token feature or unlock greater savings with a discounted bundle.

Simply Plan

Start building. Upgrade when you need more.

Starter
9.99/mo
  • 1 project (option to add)
  • API key included
  • Live editinginsane feature!
  • 10 history revisions
  • 3 free new features
  • 10% off for extra features (48h)
Individuals
Pro
18.99/mo
  • 3 projects (option to add)
  • API keys included
  • Live editinginsane feature!
  • Real-time sync
  • 15 history revisions
  • 7 free new features
  • 35% off for extra features (48h)
Teams
Enterprise
49.99/mo
  • 5 projects (option to add)
  • API keys included
  • Live editinginsane feature!
  • 20 history revisions
  • 4 team members included (option to add)
  • 12 free new features
  • 50% off for extra features (48h)
  • Priority support
Coming soon

Enterprise for teams is almost here!

Get in touch

Have questions or just wanna chat?

We will get back to you as soon as possible.