Pathwise

Manuals / Figma / Chapter 4

A · Layout · beginner · Week 1 · Chapter 4 of 13

Color, text & effect styles

Styles are the bridge to variables and design tokens. Centralize color and typography before component explosion.

Path progress
26%

Step 1 of 3

Color styles

Name: color/bg/default, color/text/primary, color/brand/accent. Avoid hex in layer names.

Color stylesDrag 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 →Color stylesdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Do this now

Create 6 color styles. Apply to login + home — zero detached hex on text fills.

Was this step clear?
Chapter learning outcomes
  • Color styles
  • Text styles
  • Effect styles
  • Style naming convention

Clear these before you leave

Side quest

Style swap

Change brand accent color style once — confirm all screens update.