Swiss Design

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)

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap" rel="stylesheet">

Fallback chain (in order of preference):

font-family: 'IBM Plex Sans', 'Hanken Grotesk', 'Barlow', 'Host Grotesk', 'DM Sans', system-ui, sans-serif;

Type scale:

• Headings: font-light (300) or font-normal (400). Never bold for headings.
• Emphasis within body: font-medium (500). Never font-bold (700).
• Letter spacing on display/h1: tracking-tight (-0.02em).
• Captions and labels: tracking-wide uppercase text-xs.

Typographic details

The Swiss style depends on typographic precision. These rules are non-negotiable:

• Use the ellipsis character …, never three periods ....
• Use curly quotes " " and ' ', never straight quotes " '.
• Loading and progress states end with an ellipsis: Loading…, Saving….
• Number columns and tables use font-variant-numeric: tabular-nums (Tailwind: tabular-nums) so digits align vertically.
• Headings use text-wrap: balance (Tailwind: text-balance) to prevent widows. Body paragraphs use text-pretty where supported.
• Non-breaking spaces between value and unit, and inside brand names: 10 MB, ⌘ K.

Color System

Stone palette (light mode → dark mode)

Opacity hierarchy (the core rule)

To make text less dominant, reduce opacity — never change the hue.

Full presence:   text-stone-900          (primary)
Softer:          text-stone-900/70       (secondary, labels)
Quiet:           text-stone-900/40       (tertiary, captions)
Ghosted:         text-stone-900/20       (disabled, placeholder)

Dark mode: replace stone-900 with stone-50. The opacity values stay identical.

Accent color

Each project uses one accent color. Default is Swiss poster red.

Use accent at these opacities only:

Full:    bg-[#C8102E]          text-[#C8102E]
Muted:   bg-[#C8102E]/60       text-[#C8102E]/60
Subtle:  bg-[#C8102E]/20       (backgrounds, tints)
Ghost:   bg-[#C8102E]/10       (very light tints)

Spacing & Grid

Base unit: 8px. All spacing is a multiple of 8.

Grid:

<!-- 12-column grid — always mobile-first, columns collapse to full-width on small screens -->
<div class="grid grid-cols-12 gap-4 md:gap-8">
  <div class="col-span-12 md:col-span-8">...</div>
  <div class="col-span-12 md:col-span-4">...</div>
</div>

Max content width: max-w-5xl or max-w-6xl with mx-auto px-4 md:px-8.

Responsive Design

The Swiss grid adapts fluidly across viewports. Every layout decision must be made at two scales: mobile (single column, generous vertical rhythm) and desktop (multi-column, horizontal tension).

Breakpoint strategy:

Mobile layout rules:

• All grid columns collapse to col-span-12
• Section padding reduces: py-16 md:py-24 lg:py-32
• Horizontal padding tightens: px-4 md:px-8
• Display type scales down: text-5xl md:text-7xl lg:text-8xl
• Multi-column nav collapses to hamburger or hidden
• Tables scroll horizontally: wrap in overflow-x-auto
• Side-by-side cards stack vertically: grid-cols-1 md:grid-cols-2 lg:grid-cols-3

Fluid type pattern:

<!-- Scale display type fluidly across viewports -->
<h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-normal tracking-tight leading-none">
  Swiss International Style
</h1>

<!-- Or use clamp() for truly fluid scaling -->
<h1 class="text-[clamp(2rem,6vw,5rem)] font-normal tracking-tight leading-none">
  Swiss International Style
</h1>

Responsive section pattern:

<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">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      ...
    </div>
  </div>
</section>