Color as Meaning, Not Decoration

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

• 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