# 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)

```html
<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 | Source | Character |
| ---- | ------ | --------- |
| IBM Plex Sans | Google Fonts | Primary. Rational, slightly condensed, 1960s systems rationalism |
| Hanken Grotesk | Google Fonts | Closest to Neue Haas Grotesk lineage |
| Barlow | Google Fonts | Condensed Swiss-grid proportions, strong vertical rhythm |
| Host Grotesk | Google Fonts | Warm grotesque, good at all sizes |
| DM Sans | Google Fonts | Clean neo-grotesque fallback |
| system-ui | Built-in | Last resort |

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

**Type scale:**

| Role | Tailwind | Line height | Max width |
| ---- | -------- | ----------- | --------- |
| Display | `text-7xl font-light tracking-tight` | `leading-none` | unconstrained |
| H1 | `text-5xl font-light tracking-tight` | `leading-tight` | unconstrained |
| H2 | `text-3xl font-light tracking-tight` | `leading-snug` | unconstrained |
| H3 | `text-xl font-normal` | `leading-snug` | unconstrained |
| Body | `text-base font-normal` | `leading-relaxed` | `max-w-[60ch]` |
| Small | `text-sm font-normal` | `leading-relaxed` | `max-w-[60ch]` |
| Caption | `text-xs font-normal tracking-wide uppercase` | `leading-normal` | unconstrained |
| Mono | `font-mono text-sm` | `leading-relaxed` | `max-w-[60ch]` |

- 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&nbsp;MB`, `⌘&nbsp;K`.

---

## Color System

### Stone palette (light mode → dark mode)

| Role | Light | Dark | Tailwind |
| ---- | ----- | ---- | -------- |
| Page background | `stone-50` | `stone-950` | `bg-stone-50 dark:bg-stone-950` |
| Surface / card | `stone-100` | `stone-900` | `bg-stone-100 dark:bg-stone-900` |
| Subtle surface | `stone-200` | `stone-800` | `bg-stone-200 dark:bg-stone-800` |
| Border | `stone-200` | `stone-800` | `border-stone-200 dark:border-stone-800` |
| Subtle border | `stone-100` | `stone-900` | `border-stone-100 dark:border-stone-900` |
| Primary text | `stone-900` | `stone-50` | `text-stone-900 dark:text-stone-50` |
| Secondary text | `stone-900/70` | `stone-50/70` | `text-stone-900/70 dark:text-stone-50/70` |
| Tertiary text | `stone-900/40` | `stone-50/40` | `text-stone-900/40 dark:text-stone-50/40` |
| Placeholder | `stone-900/30` | `stone-50/30` | `text-stone-900/30 dark:text-stone-50/30` |

### 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.

| Name | Hex | Tailwind arbitrary |
| ---- | --- 

…