Design Thinking Made Visible
The invisible scaffold that organizes space into predictable, measurable units. Every element aligns to a 12-column grid with consistent gutters, creating visual rhythm and spatial coherence.
Typographic scale creates visual order by distinguishing information levels. A consistent modular scale (1.5:1 ratio) ensures that size relationships feel mathematically justified.
Body — 1rem
Caption — 0.667rem
Visual contrast ensures readability and emphasis. WCAG AA standard requires 4.5:1 contrast for body text, 3:1 for large text. Contrast goes beyond color—shape, weight, and scale create distinction.
Repetition of visual elements at consistent intervals creates pattern and predictability. Rhythm can be regular (simple patterns) or syncopated (complex, breaking expectations strategically).
Balance is the visual weight distribution across a composition. Symmetrical balance feels stable; asymmetrical balance feels dynamic. Both can achieve equilibrium through careful spacing and emphasis.
How principles combine into a cohesive system
Essential information only
Primary content with accent