Swiss design system

DESIGN.md

# Swiss design system

Archivo on a white ground (#ffffff), Red Orange as the one accent, square corners, flat surfaces. Built for: Swiss.

> **For AI coding agents.** Build UI from this file alone. Paste the tokens (section 11) into the global stylesheet and load the fonts (section 2). Use only the colours, fonts, sizes, radii, shadows and easings defined here: no new hex values, no other fonts, no Tailwind default palette. When something is not covered, derive it from the nearest rule here and keep it quieter, not louder.

## 1. At a glance

| | |
|---|---|
| Theme | Light first; dark derived from it (the template ships one theme) via `data-theme="dark"` |
| Palette | Sanzo Wada combination 31: Red Orange `#dd4027` · Pale Lemon Yellow `#ffefae` |
| Type | Archivo (display) |
| Shape | square cards, buttons 0px; no drop shadows |
| Motion | 250ms / 700ms / 1000ms; CSS ease |
| Layout | 1280px max width, 32px gutter, clamp(64px, 3.26rem + 3.05vw, 96px) section padding, left-aligned headings |

## 2. Setup

Fonts (put in `<head>`):

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap">
```

Base styles, after the tokens:

```css
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: var(--text-body, 16px);
  line-height: var(--text-body--line-height, 1.5);
  letter-spacing: var(--text-body--letter-spacing, 0);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); color: var(--color-foreground); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
```

## 3. Colour

### Palette

| Name | Hex | Token |
|---|---|---|
| Red Orange (Wada) | `#dd4027` | `--palette-red-orange` |
| Pale Lemon Yellow (Wada) | `#ffefae` | `--palette-pale-lemon-yellow` |

### Roles

| Role | Light | Dark | Use for |
|---|---|---|---|
| `--color-background` | `#ffffff` | `#111111` | Page background |
| `--color-foreground` | `#111111` | `#ffffff` | Headings and primary text |
| `--color-body` | `#5b5b5b` | `#e2e2e2` | Body copy |
| `--color-surface` | `#dd4027` | `#1f1f1f` | Cards and raised panels |
| `--color-surface-foreground` | `#111111` | `#ffffff` | Text on surfaces |
| `--color-muted` | `#f5f5f5` | `#292929` | Quiet bands, wells, hover rows |
| `--color-muted-foreground` | `#5b5b5b` | `#a5a5a5` | Secondary text, captions, labels |
| `--color-border` | `#11111124` | `#ffffff24` | Hairlines, dividers, card edges |
| `--color-border-strong` | `#11111147` | `#ffffff42` | Emphasised rules, input edges on hover |
| `--color-input` | `#11111124` | `#ffffff33` | Input borders |
| `--color-input-background` | `#dd4027` | `#1d1d1d` | Input fill |
| `--color-ring` | `#dd4027` | `#dd4027` | Focus ring |
| `--color-primary` | `#dd4027` | `#dd4027` | Primary action fill |
| `--color-primary-foreground` | `#111111` | `#111111` | Text on primary |
| `--color-secondary` | `#f5f5f5` | `#2e2e2e` | Secondary action fill |
| `--color-secondary-foreground` | `#111111` | `#ffffff` | Text on secondary |
| `--color-accent` | `#dd4027` | `#dd4027` | Brand accent: highlights, links, active states |
| `--color-accent-foreground` | `#111111` | `#111111` | Text on accent |
| `--color-inverse` | `#111111` | `#ffffff` | Inverted band (dark on light pages, light on dark) |
| `--color-inverse-foreground` | `#ffffff` | `#111111` | Text on inverse |
| `--color-inverse-muted` | `#a5a5a5` | `#6b6b6b` | Secondary text on inverse |
| `--color-inverse-border` | `#ffffff29` | `#11111129` | Hairlines on inverse |
| `--color-destructive` | `#dd4027` | `#e15741` | Errors and destructive actions |
| `--color-destructive-foreground` | `#ffffff` | `#111111` | Text on destructive |

### How the colours are used

- Share of page area by surface colour, measured on the home page: Red Orange 68.4%, #111111 30.3%, #ffffff 0.8%, Pale Lemon Yellow 0.5%. Keep roughly that balance; the accent's share is about where it is used, not how much.
- `--color-accent` (#dd4027) is the brand's accent: it fills whole bands and cards here, so it can carry a section. Never use it for body text.
- `--color-primary` (#dd4027) fills the main action; its text is `--color-primary-foreground` (#111111), contrast 4.35:1.
- Text: headings `--color-foreground` (18.88:1 on the page), secondary text `--color-muted-foreground` (6.79:1). Don't go lighter than muted for anything people must read.
- Surfaces step: `background` → `muted` for quiet bands → `surface` for cards → `inverse` (#111111) for one contrasting band or card per page.
- Borders are hairlines: `--color-border` (#11111124).
- Every chromatic colour is one of the Wada combination's colours or a tint, shade or alpha of one. Neutrals (white, greys, near-black) are free. No other hues, no rainbow gradients.
- No decorative gradients: flat fills.

## 4. Typography

| Family | Role | Weights | Licence | Source |
|---|---|---|---|---|
| Archivo | display | 400, 500, 600, 700, 800 | SIL Open Font License 1.1 | Google Fonts |

| Token | Desktop (1440) | Phone (390) | CSS size | Weight | Line height | Tracking | Case | Font |
|---|---|---|---|---|---|---|---|---|
| `--text-display` | 109.44px | 54px | `clamp(54px, 2.09rem + 5.28vw, 109.44px)` | 800 | 0.88 | -0.045em | as written | `--font-display` |
| `--text-h2` | 67.85px | 33px | `clamp(33px, 1.25rem + 3.32vw, 67.85px)` | 800 | 0.88 | -0.045em | as written | `--font-display` |
| `--text-h3` | 21.6px | 19px | `clamp(19px, 1.13rem + 0.25vw, 21.6px)` | 700 | 1.15 | -0.015em | as written | `--font-display` |
| `--text-lead` | 19.87px | 19.87px | `19.87px` | 400 | 1.4 | 0 | as written | `--font-body` |
| `--text-body` | 16.56px | 15px | `clamp(15px, 0.9rem + 0.15vw, 16.56px)` | 400 | 1.4 | 0 | as written | `--font-body` |
| `--text-small` | 14.49px | 14.49px | `14.49px` | 400 | 1.4 | 0 | as written | `--font-body` |
| `--text-eyebrow` | 13.25px | 13.25px | `13.25px` | 500 | 1.4 | 0.04em | uppercase | `--font-body` |

Rules:
- Headlines: weight 800, tracking -0.045em, line height 0.88. Tight tracking is part of the look; keep it on every heading above 32px. Use only the weights listed above.
- Headlines are one voice: no mixed fonts, no coloured or italic accent words inside a headline.
- Body copy: 16.56px in `--color-body`, lines no longer than 65 characters (`max-width: 60ch`).
- No uppercase text except where a token above says so.
- No italics anywhere.

## 5. Layout and spacing

- Container: max 1280px, centred, side padding `--gutter` (32px; 32px at 1440, 20px on phones).
- Sections: `--section-y` top and bottom (clamp(64px, 3.26rem + 3.05vw, 96px); 96px at 1440, 64px on phones). Adjacent sections on the same ground share the rhythm; don't add extra margins.
- Spacing scale (base 4px): `--space-1` 2px, `--space-2` 4px, `--space-3` 6px, `--space-4` 8px, `--space-5` 12px, `--space-6` 16px, `--space-7` 24px, `--space-8` 32px, `--space-9` 48px, `--space-10` 64px. Most common gaps on the pages: .
- Section headings are left-aligned, on the container edge; never centre long text.
- Breakpoints (desktop-first): 640px, 1024px. Phone layout (the phone gutter and section padding above) applies below 640px.
- Grids of three or four equal items: all in one row above 1024px, two columns down to 640px, one column below. Items in a row share the same height and their actions align at the bottom.

## 6. Shape and depth

- Radii: `--radius-sm` 0px, `--radius-md` 0px, `--radius-lg` 0px.
- Corners are square: no border radius on cards, inputs or buttons.
- Rules and borders: 1px var(--color-foreground).
- Buttons: 0px. Cards: 0px. Inputs: 0px.
- No drop shadows. Depth comes from surface colour steps and hairlines.

## 7. Motion

- Durations: `--duration-fast` 250ms, `--duration-base` 700ms, `--duration-slow` 1000ms.
- What animates: background, color and border-color. Hover changes colour or fill, never layout.
- Motion is restrained: transitions on hover and focus, little else.
- Respect `prefers-reduced-motion`: drop to opacity changes or none.

## 8. Components

Exact recipes, measured from the template. Use these classes or translate them 1:1 into your framework.

### Buttons

Primary: var(--color-surface) fill, 48px tall. 

```css
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px;
  padding-inline: 24px 24px;
  border-radius: 0px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast, 200ms) ease, color var(--duration-fast, 200ms) ease;
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  border: none;
}
.btn-outline { background: transparent; color: var(--color-foreground); border: 1px solid var(--color-border-strong); }
.btn-outline:hover { border-color: var(--color-foreground); }
.card-inverse .btn-outline { color: var(--color-inverse-foreground); border-color: var(--color-inverse-border); }
```

Use one `.btn-primary` per view. Actions beside it, and the actions of the other items in a set, use `.btn-outline`. All buttons share the `.btn` base height and padding.

```html
<a class="btn btn-primary" href="#">Get started</a>
```

### Inputs

```css
.field { display: grid; gap: 8px; }
.label { font-size: 14px; font-weight: 500; color: var(--color-foreground); }
.input {
  height: 48px;
  padding: 0 16px;
  background: var(--color-surface);
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
  border-radius: 0px;
  font: inherit; font-size: 16px;
}
.input::placeholder { color: var(--color-muted-foreground); }
.input:focus { outline: none; box-shadow: 0 0 0 2px var(--color-ring); }
textarea.input { height: auto; min-height: 140px; padding-block: 14px; }
```

### Cards

Cards sit on the page in grids with 16px gaps. 

```css
.card {
  background: var(--color-surface);
  color: var(--color-surface-foreground);
  border-radius: 0px;
  padding: 32px 32px;
  border: 1px solid var(--color-border);
}
.card h3 { font-size: var(--text-h3, 24px); font-weight: var(--text-h3--font-weight, 500); letter-spacing: var(--text-h3--letter-spacing, 0); line-height: var(--text-h3--line-height, 1.2); }
.card p { color: inherit; opacity: .82; }
.card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.card li { display: flex; gap: 10px; align-items: baseline; }
.card li::before { content: ""; flex: none; width: 8px; height: 1px; background: currentColor; opacity: .5; transform: translateY(-4px); }
```

To feature one item in a set (a recommended plan, the main offer), make it the card with a 1px `--color-foreground` border with the `.btn-primary` action; the others stay `.card` with `.btn-outline`. Mark it with a small text label in the eyebrow style, not a badge.

Big figures (prices, stats): `--font-display` at `--text-h2` size, weight and tracking, `font-variant-numeric: tabular-nums`; the unit or period beside it in `--text-small` and the muted colour.

### Section header

```html
<section class="section">
  <div class="container">
    <header class="section-head">
      <h2>Short statement headline.</h2>
      <p class="lead">One sentence that says what the section gives the reader.</p>
    </header>
    <!-- grid of .card -->
  </div>
</section>
```

```css
.section-head { display: grid; gap: 8px; max-width: 720px; margin-bottom: 24px; }
.section-head h2 { font-size: var(--text-h2); line-height: var(--text-h2--line-height); letter-spacing: var(--text-h2--letter-spacing); font-weight: var(--text-h2--font-weight); }
.lead { font-size: var(--text-lead, 18px); color: var(--color-muted-foreground); max-width: 56ch; }
```

## 9. Voice and copy

- Headlines: 4 words typical (4–4), sentence case, ending with a full stop. Plain statements, no hype words.
- Buttons: two words or fewer, a verb first ().
- Minimal text: every word earns its place. One idea per section, one sentence of support under a headline.
- No decorative micro-text, fake data readouts, “LIVE” chips or invented metrics.

Headlines from the template, for tone:

- One template. Every format.

## 10. Do and don’t

**Do**

- Use `--color-background` for the page and step to `--color-muted` / `--color-surface` for bands and cards.
- Give the main action `--color-primary`; one primary button per view. Other actions beside it use `.btn-outline`.
- Keep headings in `--font-display` at the scale above, with its tracking.
- Use hairline borders (`--color-border`) to separate, and generous `--section-y` spacing between sections.
- Animate with `--ease-*` and `--duration-*` only.

**Don’t**

- Introduce colours outside the palette and roles (no Tailwind blue/indigo/gray defaults).
- Use a font other than Archivo.
- Add drop shadows.
- Add gradients, glows or glass effects.
- Use italics.
- Use uppercase text, except for tiny labels if the scale says so.
- Mix radii: buttons 0px, cards 0px, inputs 0px.
- Centre long paragraphs, or let text run wider than 65 characters.
- Add emoji, icons in every heading, or decorative badges.

## 11. Tokens

The complete set. Paste into your global stylesheet before anything else.

```css
:root {
  color-scheme: light;
  /* palette */
  --palette-red-orange:          #dd4027;
  --palette-pale-lemon-yellow:   #ffefae;

  /* colour roles (light) */
  --color-background:            #ffffff;
  --color-foreground:            #111111;
  --color-body:                  #5b5b5b;
  --color-surface:               #dd4027;
  --color-surface-foreground:    #111111;
  --color-muted:                 #f5f5f5;
  --color-muted-foreground:      #5b5b5b;
  --color-border:                #11111124;
  --color-border-strong:         #11111147;
  --color-input:                 #11111124;
  --color-input-background:      #dd4027;
  --color-ring:                  #dd4027;
  --color-primary:               #dd4027;
  --color-primary-foreground:    #111111;
  --color-secondary:             #f5f5f5;
  --color-secondary-foreground:  #111111;
  --color-accent:                #dd4027;
  --color-accent-foreground:     #111111;
  --color-inverse:               #111111;
  --color-inverse-foreground:    #ffffff;
  --color-inverse-muted:         #a5a5a5;
  --color-inverse-border:        #ffffff29;
  --color-destructive:           #dd4027;
  --color-destructive-foreground: #ffffff;

  /* type */
  --font-display:                Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:                   Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text-display:                clamp(54px, 2.09rem + 5.28vw, 109.44px);
  --text-display--line-height:   0.88;
  --text-display--letter-spacing: -0.045em;
  --text-display--font-weight:   800;
  --text-h2:                     clamp(33px, 1.25rem + 3.32vw, 67.85px);
  --text-h2--line-height:        0.88;
  --text-h2--letter-spacing:     -0.045em;
  --text-h2--font-weight:        800;
  --text-h3:                     clamp(19px, 1.13rem + 0.25vw, 21.6px);
  --text-h3--line-height:        1.15;
  --text-h3--letter-spacing:     -0.015em;
  --text-h3--font-weight:        700;
  --text-lead:                   19.87px;
  --text-lead--line-height:      1.4;
  --text-lead--letter-spacing:   0;
  --text-lead--font-weight:      400;
  --text-body:                   clamp(15px, 0.9rem + 0.15vw, 16.56px);
  --text-body--line-height:      1.4;
  --text-body--letter-spacing:   0;
  --text-body--font-weight:      400;
  --text-small:                  14.49px;
  --text-small--line-height:     1.4;
  --text-small--letter-spacing:  0;
  --text-small--font-weight:     400;
  --text-eyebrow:                13.25px;
  --text-eyebrow--line-height:   1.4;
  --text-eyebrow--letter-spacing: 0.04em;
  --text-eyebrow--font-weight:   500;

  /* space and layout */
  --space-1:                     2px;
  --space-2:                     4px;
  --space-3:                     6px;
  --space-4:                     8px;
  --space-5:                     12px;
  --space-6:                     16px;
  --space-7:                     24px;
  --space-8:                     32px;
  --space-9:                     48px;
  --space-10:                    64px;
  --container:                   1280px;
  --gutter:                      32px;
  --section-y:                   clamp(64px, 3.26rem + 3.05vw, 96px);

  /* shape */
  --radius-sm:                   0px;
  --radius-md:                   0px;
  --radius-lg:                   0px;


  /* motion */

  --duration-fast:               250ms;
  --duration-base:               700ms;
  --duration-slow:               1000ms;
}

/* dark theme (derived: the template ships one theme): <html data-theme="dark"> or class="dark" */
[data-theme="dark"], .dark {
  color-scheme: dark;
  --color-background:            #111111;
  --color-foreground:            #ffffff;
  --color-body:                  #e2e2e2;
  --color-surface:               #1f1f1f;
  --color-surface-foreground:    #ffffff;
  --color-muted:                 #292929;
  --color-muted-foreground:      #a5a5a5;
  --color-border:                #ffffff24;
  --color-border-strong:         #ffffff42;
  --color-input:                 #ffffff33;
  --color-input-background:      #1d1d1d;
  --color-ring:                  #dd4027;
  --color-primary:               #dd4027;
  --color-primary-foreground:    #111111;
  --color-secondary:             #2e2e2e;
  --color-secondary-foreground:  #ffffff;
  --color-accent:                #dd4027;
  --color-accent-foreground:     #111111;
  --color-inverse:               #ffffff;
  --color-inverse-foreground:    #111111;
  --color-inverse-muted:         #6b6b6b;
  --color-inverse-border:        #11111129;
  --color-destructive:           #e15741;
  --color-destructive-foreground: #111111;
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; }
}
```

---
Source: the Swiss section style, measured from its rendered pages (2026-10-08).