Perceptual Patterns
Building a Visual Language
A concrete vocabulary of type, color, spacing, and motion that scales
Key Insight
A visual language converts abstract brand values into specific, reusable decisions: a type scale, a spacing scale derived from a base unit, a color token system, iconography rules, and motion principles. These concrete values enable any team member to produce on-brand work without guessing.
Key Points
- •Type scale: 5–8 size steps with paired weights and line-heights
- •Color tokens: named by semantic role (color-action-primary) not hex value
- •Spacing scale: all values are multiples of a base unit (4px or 8px)
- •Iconography: consistent stroke weight, corner radius, optical sizing rules
- •Motion: standard duration steps and easing curves for interaction types
Guidelines
- ✓Always derive spacing from a base unit - no arbitrary pixel values
- ✓Name colors by role, not value - role names survive rebrands
- ✓Define the type scale first; resist exceptions outside it
- ✓Verify every color pair meets WCAG AA (4.5:1 for body text)
Formula
Spacing step = base × 2ⁿ → 4px base: 4, 8, 16, 32, 64, 128
Want to learn this interactively?
Experience hands-on experiments and test your understanding.
🔥
Practice this topic
Active recall - strengthens long-term retention