Skip to main content

Color system

What it is for​

Six tokens drive the entire theme. Start from a preset, then tune the primary swatch to match your brand exactly.

The color tokens restyle buttons, links, backgrounds and accents on every page of the public site.

Access​

In My website, click Open Studio. In the Studio menu, open Design › Color system.

Changes show in the live preview. Click Save changes to keep them.

  • Requires the Steer Studio module on your team: without it, My website is hidden from the menu.

Steps​

  1. Open the section as shown above.
  2. Fill in the settings below. The live preview on the right updates as you type.
  3. Click Save changes. Your edits go live on the public site once saved; Discard drops the unsaved ones.

Theme presets​

20 hand-picked palettes · click to apply

Custom composer​

Pick anchors · the rest auto-derives

Typical use​

Start from the preset closest to your brand, then adjust the primary color to your exact brand color.

Good to know​

  • 20 presets are grouped as Classic, Premium, Modern, Warm and Cool/Mono.
  • In the custom composer you pick the anchors; the other tokens are derived automatically.
  • Version history keeps the last 20 saved versions. Opening one loads it in the editor; click Save changes to apply it.

Common issues​

"Save failed". Your edits were not saved. Check the highlighted field, then click Save changes again.

"Connection lost. Your changes are not saved yet…" Stay on the page: the changes are saved when you are back online.

"The server is not responding. Your changes are not saved…" Wait a moment, then click Save changes again.

"Please allow pop-ups to open Studio in a new tab." Studio opens in a new tab from My website. Allow pop-ups for Steer Autos, then click Open Studio again.

See also​