Color as signage

Colour here is a signal, not a finish. Every strong colour on a screen is telling you either what to do or what just happened. Never filling space. This is the rule the old app broke: green was everywhere, so it meant nothing. We gave it room so it could speak again.

The token tables live in Foundations → Color. This page answers the other question, the screen-level one: where is each colour allowed to appear.

Rules carry their governance state. Closed is settled in an ADR or the Decision Log. Approved was agreed in August 2026 and is pending registration. Derived comes from reading the new-design screens and has not been ratified yet.

Yellow acts

brand/action is the one thing to do next, and it is the only thing allowed to be yellow.

• Only as the primary CTA. One per screen. Closed
• In Carbon and Navy it resolves to lime on its own. Never hand-pick lime. Closed
• A disabled CTA is grey, button/disabled. The washed-out yellow you may still see in production is legacy. Do not reproduce it. Approved
• Never for highlights, banners, decorative accents, or warnings. A warning is feedback/warning, which is a different job. Closed

Green confirms

Green is the widest of the three, so it is the one most at risk of drifting back into decoration. Here is the closed list of what green is allowed to say:

• Feature checks
• Selected borders and checkmarks
• The active tab or nav destination
• An accent word inside a serif headline
• Meta clarifications, using text/accent
• Positive amounts
• The chevron on a navigable card
• The spinner

As a button, green is nothing. It was the Secondary fill until August 2026 and it is not any button now: see green is not any button’s fill. Closed

One coloured button per screen, and it is always yellow. Since green left the buttons there is only one coloured pill available, so the question is no longer which of the two: it is whether this screen has earned its one. Anything that accompanies it drops to Secondary or to Tertiary. Two coloured pills on one screen means the hierarchy was never decided.

This is the rule the legacy app broke hardest, and it is why green stopped meaning anything: once green is both “confirm” and “the other button”, it is no longer signage. It is just a colour.

Green backgrounds belong to corporate and brand covers, not to in-app surfaces. In-app bars are neutral. The green sign-in buttons and green app bars in the legacy app migrate toward the system, never the other way round.

Which green, for which job

Green has to be a word, a line and an icon, and one value cannot do all three legibly. Since August 2026 the role decides the stop. Same family, five jobs:

A second number you actually own

text/accentGreen/600 · 24px+ only

Your plan renews on 14 September. Manage subscription at any time.

text/linkGreen/700 · 6.90:1 on cream

CallsMessagesCredits

stroke/brandGreen/600 · line, so 3:1

brand/emphasisGreen/500 · keeps its hue at 1.5

brand/emphasisGreen/500 · the brand itself

The reasoning behind each one is in Foundations → Color. The short version: a word needs to be dark enough to read, and a 1.5 stroke loses its hue if you darken it too far.

Note what is missing: there is no green fill. Until August 2026 the secondary button was Green/500 in Light with a white label, which is where the 3.24:1 that killed it comes from, and Green/400 in the dark modes. Green has no fill role now. Green/400 did not disappear from Light, though: it came back in a different job, as scheme/inversePrimary, the chevron on the inverse card.

Red warns

feedback/error owns four things and nothing else: validation lines and messages, the destructive confirm button inside a dialog, counter badges, and negative amounts. Closed

• Never colour alone. An error state is icon and text and colour. Closed
• A destructive trigger on a screen is a red text link or list row. Solid red only ever appears as the confirm button inside the dialog, never sitting in the body of a screen. Approved

One decision, three renders

Design once in Light using semantic tokens. Carbon and Navy resolve on their own: brand/action becomes lime, onPrimary becomes Teal/900 in Navy, surfaces remap to their ramp.

If a screen looks wrong in dark, fix the token binding. Never hand-recolour the dark version. A hand-fix in dark is a bug that will come back on the next screen.

The ten-second screen test

Before a screen leaves your hands, four questions:

1. Count the yellow. Exactly one CTA?
2. Every green states something already true? Selection, status, confirmation. None of them acting as a CTA?
3. Any red? Only error, destructive or counter?
4. Switch to Carbon. Still correct without touching anything?

If all four pass, the colour is doing its job. If one fails, the screen is decorating.