In a design system, what are functional color roles like success, warning, error and info, and why define them centrally rather than per team?
answer
- meaning, not appearance
- one hue, one job
- status, interactive state, surface
- a learned signal needs consistency
- the role still needs a non-color cue
basics
~20 sFunctional color roles give colors fixed meanings: success, warning, error, info, interactive states and surfaces. Defining them once means every screen sends the same signal, users learn it, and the system guarantees contrast and a non-color cue centrally.
solid answer
~40 sA functional palette separates what a color *means* from what it *is*. Brand colors express identity; functional roles carry information: `success`, `warning`, `error` and `info` for status, plus roles for interactive states (hover, pressed, focus, disabled) and for surfaces (page, raised, overlay). Fixing them centrally matters for three reasons: users learn that one hue means one thing on every screen and device; designers stop re-deciding which red is the error red; and the system can pre-check each role's contrast and pair it with an icon and words, so meaning never rests on hue alone, as WCAG 2.2 `1.4.1` Use of Color (Level A) requires. The discipline is exclusivity: once the error red is borrowed for decoration or promotion, users stop trusting it.
go deeper
Name the three role families with an example of each, and say that a status role carries a fixed meaning that color never carries alone.
Explain why roles are defined centrally - a learned signal, one decision, pre-checked pairings - and how a status role bundles color, icon and text to meet WCAG 1.4.1.
Show judgement about exclusivity: spot borrowed uses of the error red, decide when a new role such as live is warranted, and tune values per platform without changing meaning.
Weigh how many roles the system should own: too few pushes teams to borrow, too many dilutes what users learn. Tie the answer to how new roles get proposed and reviewed.
## What a functional palette is A design system's color work usually has two halves. The **brand or expressive palette** says who the product is: the hues that appear in marketing, illustration and the logo. The **functional palette** says what is happening: it gives specific colors fixed **roles**, and every product team uses those roles instead of choosing hues for themselves. A role is a meaning (`error`, `success`, `focus`, `surface`) that the system maps to a concrete color value; the meaning is what designers and engineers reach for, and the value is what the system maintains. Think of a video-streaming service that runs on smart TVs, set-top boxes and a web app. The same message - a download failed, a payment went through, a profile setting was saved - appears on all of them. If each platform team picked its own red for failure, users would see three reds, and nobody could say which one is correct when a designer asks. ## The role families Most functional palettes group their roles into three families: | Family | Typical roles | What it communicates | |---|---|---| | **Status** | success, warning, error, info | The outcome or condition of something the user cares about | | **Interactive state** | default, hover, pressed, focus, selected, disabled | What a control is doing or can do right now | | **Surface** | page background, raised surface, overlay, scrim, inverse | The ground everything else sits on | Status roles are the ones interviews ask about first, but a palette that stops there leaves teams improvising the other two families, which is where inconsistency usually creeps in. ## Why fix the roles centrally - **Users learn the signal.** Color is fast to perceive. When one hue reliably means one thing across every screen and device, users stop reading and start recognising. That learning only happens if the mapping never varies. - **Decisions are made once.** Without roles, every feature team re-decides which red means error and whether amber means warning or new. Roles end that debate. - **Quality is guaranteed centrally.** The system can check each role's contrast against the surfaces it is allowed on, and ship each status role together with an icon and wording guidance, so every consumer inherits a correct pairing instead of rebuilding it. - **Change is cheap.** If research shows the warning hue reads poorly on living-room TVs, the system updates the value behind one role and every product follows. ## Roles and WCAG 1.4.1 Use of Color WCAG 2.2 Success Criterion **1.4.1 Use of Color** (Level A) says color must not be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. A functional palette is where a system makes that promise structurally: 1. Define each status role as a bundle - a color, a distinct icon shape and a text pattern - not as a color alone. 2. Pick status hues that also differ in lightness, so they remain distinguishable for people with color-vision deficiencies and on poorly calibrated screens. 3. Document that the color reinforces the meaning while the icon and the words carry it. The role gives color a job; it does not make color sufficient for that job. ## Keeping roles exclusive A role only works while it is exclusive. The common failure is **borrowing**: a team uses the error red to make a promotional banner feel urgent, or the success green as a decorative accent on a sports page. Every borrowed use weakens the signal, because users now see red where nothing is wrong. A streaming product that wants a red Live label faces the same question; the clean answer is to make live a role of its own, defined and documented, rather than reuse error and hope nobody confuses a live match with a failed stream. Exclusivity also means not stretching a role beyond its meaning. Warning is for conditions that need attention but are not failures (a download expiring soon); error is for things that went wrong or block progress; info is neutral news. Collapsing warning and error into one red, or using the info color for everything the product considers important, erases distinctions users relied on. ## Across TV and web The same roles apply on every platform; only the values and the supporting cues are tuned. On a television viewed from across a room, status icons need to be larger and labels shorter, and saturated reds can look different on some panels, so the system may choose a slightly different value for the same role on that platform. The role and its meaning stay identical, which is exactly what lets one design review cover both the TV app and the web app.
- Does a functional palette have to make warning amber and error red?No standard mandates specific hues; red for error and amber for warning are strong conventions because users arrive already knowing them. What matters is that each role is consistent, clearly distinct from the others, paired with an icon and words, and checked for legibility on the surfaces it is allowed on.
- A streaming product wants a red Live label on sports tiles. How should the functional palette handle it?Treat live as a deliberate role rather than a borrowed error color. The system can define a live role, perhaps in the red family but documented separately and always shown with the word Live, so users are never asked to guess whether red means an event or a failure.
- Why include interactive-state and surface roles in the functional palette, not only status roles?Every screen needs them, and without roles teams improvise: each invents its own hover darkening, focus ring and panel background. Defining them as roles gives consistent behaviour across TV and web and lets the system check each state and surface pairing once instead of per feature.
Traffic lights: red means stop at every junction in the country, and the position of the lit lamp carries the same meaning for drivers who cannot tell red from green. A status role is the color plus the second cue, fixed everywhere.
saying these in an interview costs you the question
- Functional colors are just the brand palette given friendlier names.
- Once error is red, every user can tell it apart from success.
- Each team can choose its own error red as long as it looks red.
- Functional roles only cover success, warning, error and info.
- Reusing the error red for promotions is harmless because the value is identical.