Lesson 3 : Typography, Color & Spacing Systems
This lesson covers the visual language foundations that create cohesion across an interface, including typographic scales, color systems, spacing tokens, and accessibility constraints. It explains how these decisions are converted into tokens usable by both designers and engineers.
The lesson explains how to build a typographic system by mapping semantic roles such as headings and body text to sizes, line heights, and weights. It recommends modular scales to maintain consistent relationships and discusses truncation, localization, and responsive behavior using relative units, fluid typography, or breakpoint-specific sizes.
Color systems are divided into brand palettes and functional palettes. Semantic tokens name colors by purpose rather than hex value, ensuring developers apply color consistently. The lesson explains WCAG contrast requirements and shows how to test ratios, recommending 4.5:1 for body text and 3:1 for larger text. It also advises pairing color with text or icons for accessibility.
Spacing systems are built on predictable scales, often using a base unit such as 4px. Named spacing tokens are applied to padding, margins, gutters, and vertical rhythm to prevent layout drift and ensure consistency.
Tokenization enables design-to-code alignment. Tokens can be published as CSS variables or JSON, allowing theming and synchronization. The lesson outlines a simple pipeline for keeping design and code tokens aligned.
Accessibility guidance includes minimum tappable target sizes, readable font sizes, and recommended line lengths. Documentation should include do and don’t examples to reinforce good practice.
Action steps include defining a type scale, semantic color tokens, and a spacing scale, then publishing tokens for engineering use. The lesson emphasizes starting with a minimal, high-impact token set.
