Grid.
Clarity through structure and order
A design system rooted in mathematical precision, grid-based layouts, and the timeless principles of the International Typographic Style.
Founded on rational design
01
Grid Discipline
Every element snaps to a 12-column grid with a 4px baseline, ensuring mathematical harmony across all compositions.
02
Typographic Clarity
Helvetica-based hierarchy with strict weight and size ratios eliminates ambiguity and maximizes readability.
03
Objective Color
A restrained primary palette serves function over expression — red for emphasis, blue for depth, yellow for highlights.
04
Asymmetric Balance
Intentional asymmetry creates visual tension and hierarchy, guiding the eye through deliberate compositional weight.
05
White Space
Negative space is treated as an active design element, providing breathing room and structural clarity between content blocks.
06
Modular System
Components are built on consistent proportions, enabling infinite recombination while maintaining visual coherence.
12
Column grid
4px
Baseline unit
1.333
Type ratio
3
Primary colors
The rigor of this system transformed our product. Every decision is now backed by clear, repeatable rules.
Max Keller
Design Director, Helvetica AG
Adopt the system
Join thousands of designers and teams building with Swiss precision. Open source and free forever.