Pathwise

Manuals / Graphic Design / Chapter 9

D · Brand · intermediate · Week 6 · Chapter 9 of 13

Brand kit & guidelines page

Scale your taste into a system teammates (or future-you) can reuse. One Figma page: logo, colors, type, spacing, example applications.

Path progress
64%

Step 1 of 3

Kit frame structure

Cover → Logo → Color → Typography → Spacing → Components (buttons, tags) → Examples.

Kit frame structureDrag 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 →Kit frame structurdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Do this now

Build brand kit frame for your fictional café / client with all sections.

Was this step clear?
Chapter learning outcomes
  • Brand kit structure
  • Component thinking for brand
  • Export for dev/marketing handoff

Clear these before you leave

Side quest

Kit stress test

Design a fourth piece (email header or ticket stub) in 30 minutes using only kit elements.