Swiss
International
Style.
A design system rooted in the modernist movement that emerged from Zürich and Basel in the 1950s. Grotesque sans-serif typography, mathematical grid, generous whitespace, restrained color — taught to your AI agent through Tailwind CSS.
The grid system is an aid, not a guarantee.
It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.
The grid system is used by the typographer, graphic designer, photographer and exhibition designer for solving visual problems in two and three dimensions. Today the grid system is the expression of a certain mental attitude inasmuch as it shows that the designer conceives his work in terms that are constructive and oriented to the future.
This is the expression of a professional ethos: the designer's work should have the clearly intelligible, objective, functional and aesthetic quality of mathematical thinking.
"The will to order."
Basel School of Design- — Objective clarity
- — Visual order
- — Grid discipline
- — Functional beauty
Zürich
Müller-Brockmann, Lohse, Neuburg, Vivarelli. Mathematical grid, Helvetica, Neue Grafik journal (1958–65).
Basel
Armin Hofmann, Emil Ruder. Tonal contrast, Univers typeface, photography as primary element.
15. März — 30. April 1962
Form
und
Farbe
Eine Ausstellung über die Beziehung zwischen Form, Farbe und Raum in der modernen Kunst.
Neue
Typographie
A symposium on the principles of modern Swiss typography and the mathematical grid.
Font Specimen
Grotesque typefaces in the Swiss tradition, ranked by fidelity to the International Style.
| Typeface | Designer | Year | Source | Fidelity |
|---|---|---|---|---|
| Neue Haas Grotesk | Miedinger & Hoffmann | 1957 | Linotype |
|
| Univers | Adrian Frutiger | 1957 | Linotype |
|
| IBM Plex Sans Primary | Mike Abbink / Bold Monday | 2017 | Google Fonts |
|
| Hanken Grotesk | Hanken Design Co. | 2021 | Google Fonts |
|
| Barlow | Jeremy Tribby | 2017 | Google Fonts |
|
| Host Grotesk | Fraunhofer IAIS | 2018 | Google Fonts |
|
| DM Sans | Colophon Foundry | 2019 | Google Fonts |
|
Neue Haas Grotesk (1957) was the original name for what became Helvetica in 1960, when it was renamed for international distribution by Haas and D. Stempel AG. Univers, released the same year by Adrian Frutiger, was favored by the Basel school while the Zürich school championed Helvetica.
Swiss Red
#C8102E
Cobalt
#003B8E
Golden
#F0B429
Forest
#2D6A4F
Objects of Swiss Design
Six artefacts that defined the modernist era in Swiss design.
Landi Chair
Hans Coray’s aluminium Landi chair, designed for the 1939 Swiss National Exhibition. A landmark of Swiss industrial design.
Musica Viva
Josef Müller-Brockmann’s concert posters for Tonhalle Zürich. Geometric forms used to express musical rhythm and structure.
SBB Railway Clock
Hans Hilfiker’s station clock for Swiss Federal Railways. The iconic red sweep second hand was finalised in 1955.
Neue Haas Grotesk
Max Miedinger and Eduard Hoffmann’s neutral grotesque, designed at the Haas Type Foundry in Münchenbuchsee. Renamed Helvetica in 1960.
Neue Grafik
Trilingual journal edited by Lohse, Müller-Brockmann, Neuburg, and Vivarelli. Published 18 issues from 1958 to 1965.
Raster Systeme
Müller-Brockmann’s definitive guide to the typographic grid system. Published in German, English, and French. Still in print.
Typography
34 items in collection
Form Folgt
Grid Systems in
Graphic Design
The Typographic Grid
Alignment and Proportion
The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.
Supporting text at reduced opacity. Used for descriptions, metadata, and secondary content that accompanies primary body copy.
Figure 03 — Basel, Switzerland, 1961 — Offset Lithography
npx skills add zeke/swiss-design-skill
Grotesque
Grotesque
Grotesque
Grotesque
Primary text at 100%
Primary text at 70%
Primary text at 50%
Primary text at 30%
Grayscale
Accent palette × opacity
#C8102E
#003B8E
#F0B429
#2D6A4F
#E8431A
#6B21A8
#C0186C
#7C3AED
The opacity rule
To make text less dominant, reduce opacity — never change the hue. text-stone-900/70 is secondary text. text-stone-900/50 is tertiary. Never use mid-scale stone values (stone-400–700) for text hierarchy.
Symposium
Registration
International Typographic Symposium. Zürich, 12–14 April 1962. Capacity limited to 120 participants.
Mobile first.
Always.
The Swiss grid adapts from 320px to 1440px. Default classes target mobile. Breakpoint prefixes layer in structure as the viewport widens. Never build desktop-first and retrofit mobile.
none
sm:
md:
lg:
<div class="
grid
grid-cols-1
md:grid-cols-2
lg:grid-cols-3
gap-4 md:gap-8
"><h1 class="
text-4xl
md:text-6xl
lg:text-7xl
font-normal
tracking-tight
"><section class="
py-16 md:py-24 lg:py-32
border-b border-stone-200
dark:border-stone-800
">
<div class="
max-w-6xl mx-auto
px-4 md:px-8
"><!-- Show only on md+ -->
<div class="hidden md:flex
items-center gap-6">
<a href="#">Link</a>
</div>
<!-- Touch target: min 44px -->
<button class="min-h-[44px]
px-6">Always col-span-12 on mobile
grid-cols-3
grid-cols-1 md:grid-cols-3
Wrap wide tables
<table>
<div class="overflow-x-auto">
44px touch targets
py-1 px-2
min-h-[44px] px-4
Reduce padding at sm
px-8 py-24
px-4 md:px-8 py-16 md:py-24
One command.
Every project.
Install the skill and your AI agent will apply Swiss design principles whenever you ask it to style a page, clean up a UI, or make something look great.
- — Grotesque sans-serif typography system
- — Grayscale palette + opacity hierarchy
- — Eight accent colors at multiple opacities
- — 12-column grid with 8px base unit
- — Generous whitespace rules
- — Light/dark mode via system preference
- — Tailwind component patterns