Learning Goal

Create a semantic color set (brand + functional states) with documented contrast and tokens.

Who

This lesson is designed for designers who want to create a consistent and accessible visual identity.

What

You will learn how to build a semantic color system that carries meaning and not decoration, and how to document contrast and tokens.

Where

This lesson is part of the Playbook 2026 – Masterclass for Designers, and is designed to be completed in 30 minutes.

When

You can start this lesson at any time, but it is recommended to complete it within the next 30 minutes.

Why it matters

Color carries meaning, not decoration. Without contrast, usability fails. Without tokens, the system won’t scale.

How

To build a semantic color system, follow these steps:

Define your brand colors (primary, secondary, accent).
Define your functional colors (success, warning, danger, info, neutral).
Define your surface colors (background, surface, overlay).
Define your text colors (default, muted, inverse).
Assign contrast values (WCAG 4.5:1 / 7:1).
Tokenize backgrounds, surfaces, text, borders, states.
Define bans (where brand color cannot be used).
Document good/bad examples.
Tie it to the Visual Intent Statement.

Guided Exercise (10–15 minutes)

Map the semantic color space: brand, functional states, surfaces, text. Add hex values and contrast checks for text/surface pairs (min 4.5:1 body; 7:1 small text). Create a ban list: where brand color is forbidden (e.g., error, disabled, neutral chips).

Independent Exercise (5–10 minutes)

Apply the color system to one component (e.g., card): background, text, border, hover/focus, state variants.

Self-Check

Semantic set (brand + functional) exists. Contrast values documented. Token name list exists. Ban list exists.

Optional Deepening

WCAG 2.2 contrast: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html Material 3 Color System: https://m3.material.io/styles/color/overview

Color as Meaning, Not Decoration