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.

Start Learning
🔥

Practice this topic

Active recall — strengthens long-term retention

Related Topics