How to Assign Palette Colors to UI Roles

A swatch strip does not tell a developer which color belongs behind a paragraph or inside a button. A small role map does. We will use Editorial Navy to build a reading card, choose its text colors and record how each color is used.

List the roles before choosing accents

List the parts of the page first: background, body text, headings, a primary action and a supporting note. Add separate rows for a navigation bar or dark panel. A broad name such as accent can otherwise hide several uses with different contrast needs.

Keep the four starting values below. The dark ink and warm paper form the reading pair; cobalt and amber have more specific jobs. The dark swatch is #10182B, not the CSS keyword navy.

Pair the page background with its text

Use #10182B text on #F7F3E8. The ratio is 15.95:1, passing AA and AAA for normal text. Preview it with a 16 px paragraph and a 32 px heading so you can judge a real reading layout.

For the note panel, try amber behind the same dark text and check that pair separately. The background has changed, so the reading-page result no longer describes the note.

Check the button label

These rows cover three uses from the matrix. You do not need every swatch to work as text on every other color. If an intended use fails, change that use or its colors before adding it to the role map.

Try the colors in a small layout

:root {
  --color-1: #10182B;
  --color-2: #F7F3E8;
  --color-3: #4265D6;
  --color-4: #E8B04B;
}
.article-card { background: var(--color-2); color: var(--color-1); }
.primary-action { background: var(--color-3); color: var(--color-2); }
.editor-note { background: var(--color-4); color: var(--color-1); }

Build a heading, a short paragraph, a Read the guide button and an editor’s note. Real copy reveals the size and placement of each color more clearly than a row of oversized letters.

Save the role map with the tokens

Keep the role map beside the exported CSS. The tokens record the values and their order; the map explains where they belong. If the button fill changes, the developer can find its label pair and check it again. Reusing the token for a link adds another pair to review.

• Write down the text and background for each use.
• Include size and weight when relying on a large-text result.
• Mark any uses still awaiting a decision.
• Recheck affected pairs after editing a color.