Action colours: one website action colour, chosen from eight
Every Anticode site has exactly one action colour: the colour of its buttons, its keyboard focus ring and the other marks that say "you can do something here". Each design system comes with its own, and you can swap it for one of eight others (red, orange, gold, green, teal, blue, pink or black) in the visual editor or by asking in a sentence.
Why one colour, and why it's tied to action
Visitors learn a page's colour code within seconds. If the booking button, a decorative stripe and three icons are all the same bright colour, the colour stops meaning anything, and the button has to compete for attention. Keeping one website action colour for interactive things, and letting everything else be ink, paper and photography, makes the next step obvious without arrows or flashing. It also makes brand colour go further: one confident use reads as more deliberate than a palette sprinkled everywhere. The accent colour guide covers how to choose one.
Where the action colour appears
- Buttons, as their fill, with text in a light tone on light palettes or in the page's background colour on dark ones.
- The keyboard focus ring, a two-pixel outline around whatever has focus, including the time slots in a booking form.
- Buy links on product cards.
- The highlighted pricing plan's outline.
- Dashboard charts and status tags, as bar colour and as a light tint behind confirmed items.
- System-specific marks: Swiss's section numbers, the outline of Luxury's buttons and the rule above its cards, and the smaller of Playful's two hero shapes.
Body text, headings and backgrounds don't use it. Playful and Organic also carry a secondary colour (sunflower and clay) for decoration such as the hero shapes and link underlines; that stays put when you change the action colour.
The eight choices, plus the default
In the inspector, the Action colour row shows a dot for the design system's own colour followed by eight more. Each of the eight has two shades: a deeper one used on light palettes and a brighter one used on dark palettes, so there's a shade made for each kind of background. Which shade you see depends on the theme, not on a separate choice.
| Colour | Often right for |
|---|---|
| Red | Restaurants, events, anything urgent or bold |
| Orange | Food, trades, energetic consumer brands |
| Gold | Hospitality, jewellery, premium services |
| Green | Gardens, wellness, sustainability, money that's growing |
| Teal | Health, clean technology, calm services |
| Blue | Software, finance, professional services |
| Pink | Beauty, florists, playful retail |
| Black | Fashion, architecture, minimal portfolios |
Black behaves differently from the rest: on a dark palette, its bright shade is off-white, because black buttons on a black page would disappear. If you choose black and switch to Dark, the buttons turn light, which is intended.
Changing it
- In the visual editor. Turn on Edit, find Action colour in the inspector and pick a dot. The page is rebuilt straight away.
- In words. Write something like "make the buttons teal" or "use a green accent". A colour name together with a word such as colour, accent or button is understood in your browser, as a quick change that doesn't use your build allowance.
- By exact value. In Pro mode, the code editor lets you change the colour tokens at the top of the stylesheet, including the action colour, to a specific hex or rgb value such as your brand's. Only plain colour values are accepted.
Picking an action colour or a theme in the inspector clears colours you set by hand in the code editor, since a hand-picked value was chosen for the old palette. Set the exact brand colour last.
Limits
- One action colour per site. There's no second button colour for secondary actions; those use outlines or plain links instead.
- Contrast of hand-set colours is up to you. The eight presets come in light and dark shades; a hex value you type in the code editor is used as given, so check text on it is readable. See colour contrast for websites.
- It doesn't recolour photos or the secondary colour.
- Model-written apps pick their own colours from the request; the inspector's colour row is for design-engine pages.
Questions people ask
Can I use my exact brand colour?
Yes, in Pro mode's code editor, by setting the action colour token to its hex value. It resets if you later pick a preset colour, theme or direction in the inspector.
Why did my black buttons turn white?
On a dark palette, black's shade is off-white so the buttons stay visible. Switch the theme to Light to get black buttons.
Does changing the colour use my build allowance?
No. Colour changes, from the inspector or in a sentence, run in your browser.
Will the focus ring change colour too?
Yes. The keyboard focus outline uses the action colour, so it always matches the buttons.