One accent color
Keep one color across the entire product. Wherever it shows up is where you want the user to look and to click.
Keep one color across the entire product. Wherever it shows up is where you want the user to look and to click. Color interrupts a visual scan and pulls attention over. A page can be interrupted only so many times — once you run out, you are done. Spread color across six elements and you are telling the user all six matter equally, which means there is no focal point. This rule matters even more for AI: left to invent colors on its own, it gives every feature its own color, because color is its cheapest way to differentiate. Your job is to tighten the color budget.
What you'll run into:
- The page is colorful, but users can't find the primary button
- Every new state adds a new color, until even you can't remember what each one means
- AI-generated interfaces give every module its own color, like a palette
Where the accent goes
| Use it on | Don't use it on | Why |
|---|---|---|
| Primary buttons | Secondary buttons | Secondary actions use ghost styles or plain text links |
| Selected state, current location | Everything clickable | Clickable doesn't mean important — the cursor already hints at it |
| Links | Emphasis inside body text | Emphasize body text with bold, not color |
| Key data | All numbers | Color only the one number that most needs attention |
| Brand identity | Decorative graphics | Decoration stays neutral; don't compete with the subject |
Keeping accent color under about 10% of a screen is a decent instinct. Past that, it stops being "accent" and becomes the primary palette. Primary buttons and selected states are the two big destinations for accent color; links and key data are the two small ones. When more than four colored elements appear on one screen, go back and count which ones could actually be grayscale — every extra color competes with the primary button for attention.
Semantic colors are the exception: success green, warning yellow, error red are not accent — they carry information, not guidance. But they need restraint too: three semantic colors on one screen usually means the state design is too complicated. Semantic colors also fight each other: an error sitting next to a green card makes users doubt their eyes. Keep them where they belong, and communicate state changes with text and icons, not color.
Hand the rest to grayscale
Once color is gone, the hierarchy has to be carried by grayscale. A workable gray scale looks roughly like this: primary text, body, secondary, auxiliary, dividers, and background — six steps from near-black to near-white. Most interfaces get by with these six; finer subdivisions rarely help.
The test: convert the page to grayscale. If the hierarchy survives, the structure stands on its own; if it blurs into a mess, the hierarchy was color holding it up. That's also the right order to work in — the accent color only brightens the most important point in a hierarchy that already exists; it doesn't create hierarchy.m3color
Grayscale is also the accent's frame of reference. On one screen, grayscale carries the layering and color only lights the most important layer — the cleaner the gray, the more the accent is worth. When picking grays, don't use only black and white: leave obvious gaps between the six steps. Too close and you can't tell them apart; too wide and the page looks fragmented.