Palettes

Use tokens in code

<h1 className="tpz-prm-clr">Welcome back</h1>

<div className="tpz-bg-clr tpz-brdr-clr tpz-txt-clr">
  Card content
</div>

<div style={{ background: "var(--tpz-surface-color)", color: "var(--tpz-text-color)", borderColor: "var(--tpz-border-color)" }}>
  Card content
</div>

const paletteStyle = {
  background: "var(--tpz-surface-color)",
  color: "var(--tpz-text-color)",
  borderColor: "var(--tpz-border-color)",
};

<div style={paletteStyle}>Card content</div>

Change token values using the Engine

Every project has its own Tokens Engine. The active selected palette you choose in the editor will be displayed in the engine. Changes are saved to draft automatically and take effect instantly. Use Publish Live to display the changes in the deployed site.
Read more about the engine

Change token values using the Editor

In the editor, open the Palettes panel to create themes and edit their colors. The active selected theme is the one that will be displayed as the current palette in the engine and the one that will be displayed in your project. You can change a whole theme by simply selecting it and clicking Publish. Read more about the editors here:Live Editor|Local Editor

Full palette tokens