Fonts & palettes

Themes ship with strong defaults — fonts that pair well, palettes with coherent contrast. When you want the site to feel like YOURS, two controls do the work: the palette tokens and the type. Both are tuned systems, not free-for-alls, and that is why they stay beautiful when you use them.

Palette tokens

Themes read colors through tokens — the theme re-skins every component from them, so one change cascades coherently:

TokenControls
SurfaceCards, panels, page background
TextBody copy
AccentButtons, links, highlights
BorderDividers, card edges

Override what you care about; leave the rest to the theme. Set both light and dark values for anything you override (see Dark mode) — the preview shows both before you publish.

Choosing an accent

  • One confident accent beats three competing ones. The accent is the color of ACTION — buttons, links, the things you want tapped.
  • Keep accent for action. The moment everything is accent-colored, nothing is.
  • Your brand color, if you have one, is usually the accent — let the neutrals stay neutral.

Type

Themes carry their own type scale; your font choices layer on top:

  • Headings — the personality carrier. Serif for editorial warmth, geometric sans for modern crispness.
  • Body — the workhorse. Prioritize legibility over character; visitors read body text for minutes, headings for seconds.
  • One pairing — a display face for headings and a workhorse for body. Three fonts is a crowd; four is a costume party.

Tip

The squint test: zoom out (or squint) at your page. The accent should pop, headings should structure, body should gray down into readable blocks. If everything shouts equally, demote something.

Contrast discipline

Text must be readable by everyone, in both modes: keep text/surface at WCAG AA contrast (4.5:1 for body text) — the preview and your own night-time phone check catch most sins (see Live preview, Dark mode). Accent-on-surface for BUTTONS can go slightly bolder; body text may not.

The brand kit shortcut

If you use the Design Studio, your brand kit (palette + fonts + logo) feeds both the canvas templates AND can seed your site tokens — one definition, consistent everywhere: social graphics, QR codes, certificates, the site itself. Define once, look consistent forever.

Restraint, the meta-skill

The best-customized sites usually changed: one accent, maybe a heading font, nothing else. The best-institutionalized disasters changed: everything, everywhere, at once. Change little, preview honestly, publish once.

Note

Fonts and palettes are appearance settings — they follow the draft/publish split and versions like everything else (see Editing pages). A palette experiment that fails was never public.