Pathwise

Manuals / Graphic Design / Chapter 5

B · Type & Color · beginner · Week 3 · Chapter 5 of 13

Color with restraint: roles & 60-30-10

Color is a system, not a decoration buffet. Define roles: background, text, accent. Use 60–30–10 as a starting ratio. Check contrast for accessibility.

Path progress
33%

Step 1 of 3

Name your roles

Background, surface, text primary, text muted, accent. Do not invent a new hex per section.

Name your rolesDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Name your rolesdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Do this now

Build a 5-color kit in Figma. Name each swatch by role, not “blue 2”.

Was this step clear?
Chapter learning outcomes
  • Color roles
  • 60–30–10 rule
  • HSL thinking
  • Contrast basics

Clear these before you leave

Side quest

Seasonal variant

Same layout, two color themes (summer / winter) using the same role names — swap hex values only.