A design token is a named shared value, such as a main brand color. You change it once and all elements that use it remain aligned.
What you will learn
- Understand why shared colors save time and effort.
- Set up primary brand colors, body text, and background.
- Check contrast and state colors.
- Distinguish between a global token and a local override.
One value, many uses
Without tokens, you would have to enter the same blue color separately for buttons, links, icons, and active menu items. A token allows these elements to point to a shared value. When you later rebrand, you adjust the base value and the design updates far more consistently.
Global settings can include primary and secondary colors, text color, background, and additional state values. The exact selection depends on the template's supported set. Individual modules can have their own overrides in the inspector, but use them sparingly.
Setting up the base palette
- Open global style settings and find the section for colors or design tokens.
- Start with the primary brand color. Use the exact value from your brand manual if available.
- Set the standard body text color and base background color. Ensure sufficient brightness contrast.
- Add secondary and state colors only where you actually need them.
- Review buttons, links, menus, cards, and form samples across different page types.
- Switch to mobile preview and dark mode, if applicable. Wait for automatic saving.
Color must also be readable
A beautiful palette is not enough if visitors cannot read the text. Check contrast for every important combination: text on background, button labels, inline links within paragraphs, and active menu items. Do not rely solely on how two colors look on your own monitor.
If a specific element requires a different color, select it and change it in the inspector. Keep in mind that local overrides may stop responding to future changes in global tokens, so monitor your exceptions carefully.
Start with three colors
For an initial design, a primary color, a neutral background, and highly legible text are usually sufficient. Add additional shades only when they serve a clear purpose.
Quick template-wide audit
After changing the primary color, do not judge the result solely on the homepage sample. Switch to page types with longer body copy, lists, or forms. Check default, active, hover, and disabled states wherever the preview displays them. Alerts should not rely on red hues alone; their meaning should also be supported by text or an icon.
Pay attention to local overrides as well. If a single module retains an old color, it may have a stored custom value or skin. Decide whether this exception is intentional. Perform an audit like this after any major palette change, as tokens can affect multiple layout sections simultaneously.