Technote

Themes & plugins Practical

Series Planting a design system in WordPress Part 6 of 8

Taking the colour picker away from editors

Leave the picker open and in six months the site carries colours a shade off the brand. That is not the editor's fault — the system asked.

Handing your palette to theme.json does not stop editors choosing arbitrary colours. By default a colour wheel and a hex field sit right below your swatches.

Six months on, the site holds a green one step off the brand and another half a step off. This is not editorial carelessness — the system asked a question and someone answered it. Stop asking and nothing drifts.

What to close

{
  "version": 3,
  "settings": {
    "color": {
      "custom": false,
      "customGradient": false,
      "defaultPalette": false,
      "defaultGradients": false,
      "palette": [ /* your swatches */ ]
    },
    "typography": { "customFontSize": false },
    "spacing":    { "customSpacingSize": false }
  }
}

Turning off custom removes arbitrary colour entry; turning off defaultPalette removes the palette WordPress ships by default. The second is the one people forget, and leaving it on parks a row of theme-unrelated colours directly beneath your own. Font sizes and spacing get fenced the same way.

Fewer options does not slow editing down — it speeds it up

Why the constraint helps the editor

“Reduce their freedom” sounds unkind to the people using the CMS. In practice it is the opposite. Choosing a colour from an infinite wheel is a design decision, and design decisions are not an editor’s job. Picking one of six swatches is not a decision at all — it is a selection, and it is far quicker.

One addition multiplies the effect: name the palette entries by role rather than by hue. A list that says “Teal” invites a choice about colour; a list that says “Emphasis” invites a choice about meaning. The second produces system-consistent screens far more often.

What survives the lock

Closing the settings does not remove colours already saved into content, because they sit in block markup as inline styles. Locking is therefore two jobs: close the settings, then sweep existing content for screens still carrying inline colour.

A palette-lock checklist — skip the last line and requests for workarounds follow

That last line matters. Remove options without explaining why and editors route around you — asking for custom CSS, or uploading images with the colour baked in. Sharing the reasoning once outlasts ten lines of configuration.

How a site gets audited and tidied is written up on our process page, and the diagnostic tooling we publish for free is on the tools page.

Next part

Your tokens now cover both the front end and the editing screen. What remains is the case where the theme already has tokens of its own — and the next part pins that boundary down with a single bridge file.

More on this topic

All technotes

Themes & plugins Practical

Decide the editable regions before you design them

A design the CMS cannot express stays up for negotiation long after it ships. Deciding what editors may change, first, removes the negotiation entirely.

Designers 6 min read

₩270,000 · Join the program