Swiss Design System

A design system rooted in the Swiss International Style of the 1950s–60s: grotesque typography, rigorous grid, bold geometric forms, generous whitespace, and restrained color.

Six Principles

1. Grid first. Every layout lives on a 12-column grid with an 8px base unit.
2. Mobile first, always. Design for the smallest viewport first, then expand. Every layout must work at 320px and at 1440px. Use sm:, md:, lg: Tailwind prefixes systematically.
3. Whitespace is structure. Generous padding and margins are not waste — they are the design.
4. Opacity, not hue, creates hierarchy. Never introduce a second color to indicate text weight or importance. Use opacity.
5. One accent. Each project gets exactly one accent color, used sparingly at multiple opacities.
6. Narrow columns. Body text never exceeds max-w-[60ch]. Wider columns hurt legibility.

Typography

Primary font: IBM Plex Sans (Google Fonts)