Amanoba Logo
Back to Course

Color as Meaning, Not Decoration

Day 6 of 30 · The Playbook 2026 – Masterclass for Designers

Build a semantic color system (brand + functional) with documented contrast and tokens.

Learning Goal

  • Create a semantic color set (brand + functional states).
  • 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.

Why This Matters

  • Color carries meaning (affordance, state), not decoration.
  • Without contrast, usability fails.
  • Without tokens, the system won’t scale.

Explanation

Semantic space

  • Brand: primary, secondary, accent (rare).
  • Functional: success, warning, danger, info, neutral.
  • Surfaces: background, surface, overlay.
  • Text: default, muted, inverse.

Token examples

  • color.brand.primary = #FAB908
  • color.text.primary = #111827
  • color.semantic.success.bg = #DCFCE7
  • color.semantic.success.text = #166534
  • color.border.muted = rgba(0,0,0,0.08)

Examples

Bad: Brand yellow used for every state → meaning lost, contrast issues.

Good: Brand yellow only for primary CTA; success green, warning amber, danger red, all contrast-checked.

Guided Exercise (10–15 minutes)

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

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