International Style / Zürich 1950s
Rational, objective information design. The grid is the foundation. Typography is the voice. Clarity is the only goal — decoration is the enemy of communication.
1950s
Origin
12
Grid Columns
Helvetica
Primary Typeface
1
Accent Color
Structure
12 equal columns — the rational foundation of all layout decisions
Baseline Grid — 8px unit
Swiss International Style
Every line of text sits on the baseline grid.
Labels align to the same 8px unit system
Standard Layout Ratios
8 / 4
Content-heavy with sidebar accent
6 / 6
Equal-weight comparison layout
3 / 9
Narrow label with wide content
4 / 4 / 4
Three-column equal division
Color System
Black
#000000
Primary
White
#ffffff
Ground
Red
#ff0000
Accent / Signal
Blue
#0057b8
Punctuation
Yellow
#ffcc00
Punctuation
Gray
#f0f0f0
Surface
Typeface
Swiss Design
72px — Section titles, hero display
International Style
48px — Page headings
Grid System Foundation
32px — Subsection headings
Rational Composition
24px — Card headings
Objective information design principles guide every layout decision.
16px — Body copy
UPPERCASE CATEGORY LABEL
11px — Labels, metadata
Wide Tracking — Labels
CATEGORY / DATE / AUTHOR
tracking-[0.25em] — creates hierarchy without size change
Tight Tracking — Headlines
Swiss Design
tracking-tight — authority and density at large scale
Left Alignment — The Only Rational Choice
Correct
Swiss International
Grid-based rational design
Category Label
Incorrect
Swiss International
Grid-based rational design
Category Label
Also Incorrect
Swiss International
Grid-based rational design
Category Label
Inspiration
Musica Viva — Zürich 1960
CONCERT
HALL
Tonhalle Orchester
Design Analysis
In Josef Müller-Brockmann's concert posters, geometric forms — especially the circle — represent musical movement and rhythm. The shapes do not decorate. They structure. They divide the space into zones of meaning.
Geometry
Circle — movement, rhythm, continuity
Palette
Black ground, red signal, white text
Type
Akzidenz-Grotesk — pre-Helvetica Swiss
Layout
Diagonal tension against a rigid grid
Musica Viva — 1955
BEETHOVEN
Sinfonie Nr. 9
Musica Viva — 1957
BARTÓK
String Quartet
Musica Viva — 1959
SCHOENBERG
Chamber Symphony
Elements
Primary — Black fill, red on hover, arrow always present
Secondary — White fill with border, subtle bg shift on hover
Red Accent — Primary CTA only, use sparingly, turns black on hover
Inline Link — Guide Line Extension on text links, border shifts to red
Knowledge Base
Typography — Featured
An objective analysis of why neutral letterforms communicate more effectively than expressive ones in information design.
Grid System
2024 — 8 min
The mathematical precision of column grids eliminates ambiguity and enforces visual hierarchy without decoration.
Color Theory
2023 — 4 min
Red is not decoration. In Swiss design, red marks urgency, hierarchy, and structural emphasis — nothing else.
Information Design
2023 — 5 min
Generous whitespace is not emptiness. It is the deliberate absence that makes the present elements speak louder.
Rationalism
2022 — 7 min
Every curve, every stroke, every weight decision must answer a structural question — never an aesthetic one.
Whitespace
2022 — 5 min
The Swiss school established that a layout with wide margins communicates confidence and trust in the content.
Manifesto
01
The column grid is not a suggestion — it is the invisible skeleton that supports every element on the page. Violating the grid is not creativity; it is chaos.
Interaction Design Rules — Swiss International
Rational Restraint
Only color and border-color change on interaction. Zero translate, scale, or shadow changes. The grid must not be disturbed.
Guide Line Extension
Left border changes gray → red on hover. Background shifts to #f0f0f0. Category label activates red via group-hover.
Clean Cut Transitions
All transitions use duration-150 ease-out exclusively. Precise and efficient — never decorative.