# Swiss Design Language System (DLS) v1.0

International Typographic Style for web and app interfaces. CSS, Tailwind and Figma token specifications.

Base unit 8pt · 12-column grid · WCAG 2.1 AAA where stated.

---

## 1. Philosophy & Core Principles

Swiss Design treats an interface as an objective carrier of information. Every pixel must communicate something; if it does not, remove it.

| Principle | Statement |
|---|---|
| Objective presentation | Content is shown neutrally. No ornament used to persuade. |
| Functional purity | Form follows function. A button looks like a button. |
| Reduction | One accent, one type family, one stroke weight. |
| Mathematical structure | Layout comes from the grid. Every dimension is a multiple of 8 (4 for fine adjustment). |
| Asymmetric equilibrium | Balance comes from tension between mass and void, not mirroring. |
| Typographic priority | Type is the primary visual element and the primary structure. |
| Visual clarity | Contrast and alignment make meaning instant. |

**Six laws:** (1) align or justify; (2) one idea per field; (3) type before decoration; (4) one accent; (5) flat is final; (6) instant, linear response.

**Hard fails:** shadows, gradients, pill buttons, soft cards, centered or justified body text, more than one accent per view, decorative illustration.

---

## 2. Grid & Spatial Layout

### Spacing tokens (8pt, 4pt half-step)

| Token | px | Use |
|---|---|---|
| space-0.5 | 4 | Icon-to-label gap |
| space-1 | 8 | Tight inline |
| space-2 | 16 | Mobile gutter, paragraph gap |
| space-3 | 24 | Desktop gutter, card padding |
| space-4 | 32 | Tablet margin |
| space-6 | 48 | Section inner |
| space-8 | 64 | Wide margin, section gap |
| space-12 | 96 | Major separation |
| space-16 | 128 | Hero breathing room |
| space-24 | 192 | Structural negative space |

### Columns by viewport

| Token | Min width | Columns | Margin | Gutter |
|---|---|---|---|---|
| xs | 0 | 4 | 16 | 16 |
| md | 640 | 8 | 32 | 16 |
| lg | 1024 | 12 | 48 | 24 |
| xl | 1440 | 12 | 64 | 24 (content max 1440) |

Columns are fluid; margins and gutters are fixed. Content snaps to column starts, never into a gutter.

### Asymmetric balance

- The left edge is the primary axis; everything is flush-left to a shared edge-line.
- Offset layouts: heading in columns 1–7, support copy in 9–12, column 8 left empty.
- Negative space is a component: reserve at least 25% of columns as void on `lg`+.
- Maximum three vertical alignment lines per page: left margin, column 5, column 9.

```css
:root { --unit: 8px; --cols: 4; --margin: 16px; --gutter: 16px; }
@media (min-width: 640px)  { :root { --cols: 8;  --margin: 32px; } }
@media (min-width: 1024px) { :root { --cols: 12; --margin: 48px; --gutter: 24px; } }
@media (min-width: 1440px) { :root { --margin: 64px; } }
.page { max-width: 1440px; margin-inline: auto; padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0,1fr)); column-gap: var(--gutter); }
```

---

## 3. Typography

**Faces:** Neue Haas Grotesk (licensed) → Inter (open). Akzidenz-Grotesk or Univers for tabular products. Space Grotesk for numerals and labels only. One family per product; weights 400, 500, 700.

```css
--font-sans: "Neue Haas Grotesk Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
```

### Scale (text range: perfect fourth 1.333; display range deliberately breaks the ratio)

| Token | Size | Line | Tracking | Weight |
|---|---|---|---|---|
| display-xl | clamp(96, 12vw, 192) | 0.88 | −0.05em | 700 |
| display | clamp(72, 8vw, 128) | 0.92 | −0.04em | 700 |
| h1 | 72 | 72 | −0.03em | 700 |
| h2 | 48 | 48 | −0.025em | 700 |
| h3 | 32 | 36 | −0.02em | 700 |
| h4 | 24 | 28 | −0.01em | 500 |
| lead | 20 | 28 | 0 | 400 |
| body | 16 | 24 | 0 | 400 |
| small | 14 | 20 | +0.005em | 400 |
| label | 12 | 16 | +0.08em, uppercase | 500 |

Display-to-body ratio must be at least 6:1 on any screen using display type. Mobile sizes step down (display 48, h1 40, h2 32, h3 24), never below 48 for display.

### Precision rules

Flush-left, ragged-right always. Manual hyphenation only. Measure 60–66ch. No paragraph indents; 16px gap (24px long-form). Tight headings (line-height 0.9–1.0, negative tracking). Sentence case; uppercase only for labels. Tabular figures in data. Emphasis by weight, not italics. Links underlined 1px, offset 2px.

---

## 4. Color

### Neutrals

| Token | Hex | Contrast on white | Role |
|---|---|---|---|
| paper | #FFFFFF | n/a | Background |
| ink | #111111 | 18.9:1 | Text, borders, filled buttons |
| black | #000000 | 21:1 | Strong rules |
| gray-700 | #555555 | 7.5:1 | Secondary text (AAA minimum) |
| gray-500 | #8A8A8A | 3.4:1 | Disabled, non-text only |
| gray-300 | #C8C8C8 | 1.7:1 | Disabled borders |
| gray-200 | #E5E5E5 | 1.3:1 | Hairlines (structure only) |
| gray-100 | #F5F5F5 | n/a | Quiet surface |

### Accent (choose one per product)

| Accent | Fill | Text on fill | Text-safe on white |
|---|---|---|---|
| Swiss Red (default) | #FF0000 | #000000, large text only (5.25:1) | #B00000 (7.4:1) |
| Signal Yellow | #FFD600 | #111111 (≈14:1) | use #111111 |
| Ultramarine | #0033CC | #FFFFFF (9.0:1) | #0033CC |
| Vivid Orange | #FF5A00 | #000000 (≈7.4:1) | #B33F00 (large text) |

White text on #FF0000 is 4.0:1 and fails; do not use it.

Accent means act here or look here. At most one accent cluster per viewport. Never for body text.

### Surfaces

Solid fills only (paper, gray-100, ink, accent). Full-bleed, grid-aligned blocks. **No gradients, no shadows, no alpha-made colors.** Modals: solid paper panel, 2px ink border.

```css
:root {
  --color-paper:#FFFFFF; --color-ink:#111111; --color-black:#000000;
  --color-gray-100:#F5F5F5; --color-gray-200:#E5E5E5; --color-gray-300:#C8C8C8;
  --color-gray-500:#8A8A8A; --color-gray-700:#555555;
  --color-accent:#FF0000; --color-accent-on:#000000; --color-accent-text:#B00000;
  --focus-ring: var(--color-ink);
}
```

```js
// tailwind.config.js (excerpt)
theme: {
  screens: { md: "640px", lg: "1024px", xl: "1440px" },
  borderRadius: { none: "0", sm: "2px" },
  boxShadow: { none: "none" }, backgroundImage: {},
  spacing: { 0:"0", 0.5:"4px", 1:"8px", 2:"16px", 3:"24px", 4:"32px", 6:"48px", 8:"64px", 12:"96px", 16:"128px", 24:"192px" },
  colors: { paper:"#FFF", ink:"#111", black:"#000",
    gray:{100:"#F5F5F5",200:"#E5E5E5",300:"#C8C8C8",500:"#8A8A8A",700:"#555"},
    accent:{ DEFAULT:"#FF0000", on:"#000", text:"#B00000" } },
  transitionDuration: { 50:"50ms", 100:"100ms", 150:"150ms" },
  transitionTimingFunction: { DEFAULT:"linear" }
}
```

---

## 5. Components

Global: radius 0 (2px on inputs at most), 2px borders on interactive elements, 1px for dividers, no shadows, 44 × 44px minimum targets.

### Buttons

| Variant | Default | Hover / focus | Active | Disabled |
|---|---|---|---|---|
| Primary | ink fill, paper text | flip: paper fill, ink text | accent fill | gray-100 fill, gray-500 text |
| Secondary | paper fill, ink text, 2px border | flip: ink fill, paper text | accent fill | as above |
| Accent (one per view) | accent fill, black text, 2px black border | flip: black fill, paper text | paper fill | as above |

Height 48px, padding 0 24px, transition 50ms linear on color properties only.

```css
.btn { min-height:48px; padding:0 24px; font:500 14px/1 var(--font-sans); letter-spacing:.04em; text-transform:uppercase;
  color:var(--color-paper); background:var(--color-ink); border:2px solid var(--color-ink); border-radius:0;
  transition:background-color 50ms linear, color 50ms linear; }
.btn:hover,.btn:focus-visible { color:var(--color-ink); background:var(--color-paper); }
.btn:active { color:var(--color-accent-on); background:var(--color-accent); }
.btn:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
```

### Forms

Label above the field, always visible. Input 48px high, 2px ink border, radius 0. Invalid: 4px left accent bar plus a text message starting "Error:". Checkbox 24px square, solid ink when checked.

### Cards

Grid cells defined by a 1px black top rule (editorial) or 1px gray-200 border (dense). Padding 24px. Order: label, title, body, action. Hover: inset 2px ink outline, underlined title. Collections share collapsed 1px lines.

### Tables

Header: label token, 2px black bottom rule. Rows: 1px gray-200 hairline, final row black. 48px minimum height. No zebra, no vertical lines. Text flush-left; numbers flush-right, tabular. Selected row: 4px accent bar. Actionable hover: ink fill, paper text.

### Navigation

1px black bottom-ruled bar, 64px high. Wordmark at column 1, nav from column 5 or 9, utilities flush right. Current page: 8 × 8 accent square, underline and `aria-current="page"`. Breadcrumbs use `/`. Mobile menu: full-screen solid ink panel, no slide or fade.

---

## 6. Imagery, Graphics & Icons

**Photography:** objective, unretouched; default high-contrast monochrome, or ink/paper duotone; rectangular crops aligned to columns (1:1, 4:5, 3:2, 16:9); one geometric mask per page at most; no text over photographs; captions in `caption` token with an index ("FIG. 03"); alt text required.

**Graphics:** rectangle, square, circle, line, triangle in ink or accent. Rules at 1, 2 or 8px (one 8px accent bar per page). Charts: flat fills, direct labels, grayscale ramp plus one accent series.

**Icons:** 24px artboard, 2px padding, 2px uniform stroke, butt caps, miter joins, 45°/90° geometry, `currentColor`. Sizes 16/24/32. Icon-only controls need `aria-label`.

```css
.icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:butt; stroke-linejoin:miter; }
```

---

## 7. Motion, Performance & Accessibility

| Token | Duration | Use |
|---|---|---|
| motion-instant | 0ms | Nav hover flips, focus |
| motion-fast | 50ms | Button and row color flips |
| motion-base | 100ms | Accordion, tab swap |
| motion-max | 150ms | Drawer or panel reveal |

All easing is linear. No bounce, float, parallax, hover scale, scroll fade-ins or shimmer.

```css
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition-duration:0ms !important; animation-duration:0ms !important; scroll-behavior:auto !important; }
}
```

### WCAG 2.1 AAA

| Criterion | Implementation |
|---|---|
| 1.4.6 Contrast (Enhanced) | ink/paper 18.9:1; secondary #555 7.5:1; accent text uses text-safe variants |
| 1.4.8 Visual Presentation | 66ch measure, flush-left, no justification, line spacing ≥ 1.5, 36px+ paragraph gap in long-form |
| 1.4.10 Reflow | 4-column mobile grid; tables scroll in their own container |
| 1.4.11 Non-text Contrast | 2px ink borders |
| 2.4.7 Focus Visible | 3px ink outline, 3px offset (paper on inverse) |
| 2.5.5 Target Size | min-height 48px on controls |
| 2.3.3 Animation | `prefers-reduced-motion` honored |
| 1.4.1 Use of Color | Accent always paired with underline, marker or text |

**Performance:** self-host WOFF2 variable fonts, `font-display: swap`, subset to Latin, preload the display weight. No blur or layered compositing.

---

## 8. Figma Tokens (Tokens Studio)

```json
{
  "color": { "paper": {"value":"#FFFFFF","type":"color"}, "ink": {"value":"#111111","type":"color"},
    "accent": { "fill": {"value":"#FF0000","type":"color"}, "on": {"value":"#000000","type":"color"}, "text": {"value":"#B00000","type":"color"} } },
  "spacing": { "1":"8", "2":"16", "3":"24", "4":"32", "6":"48", "8":"64", "12":"96" },
  "borderRadius": { "none":"0", "sm":"2" },
  "typography": {
    "h1": {"value":{"fontFamily":"Neue Haas Grotesk Display","fontWeight":"700","fontSize":"72","lineHeight":"72","letterSpacing":"-3%"},"type":"typography"},
    "body": {"value":{"fontFamily":"Neue Haas Grotesk Text","fontWeight":"400","fontSize":"16","lineHeight":"24","letterSpacing":"0%"},"type":"typography"}
  },
  "motion": { "fast":"50ms", "base":"100ms", "max":"150ms", "easing":"linear" }
}
```

Layout grid styles: Grid/XS (4 col, 16/16), Grid/MD (8 col, 32/16), Grid/LG (12 col, 48/24), Grid/XL (12 col, 64/24, frame 1440), Grid/Baseline (rows, 8px).

---

## 9. Pre-release checklist

- [ ] Every element sits on a column or baseline line
- [ ] No shadows, gradients, radii above 2px or blur
- [ ] One accent only, for action or emphasis
- [ ] Text meets 7:1 (4.5:1 only for text ≥ 24px or ≥ 18.66px bold)
- [ ] Flush-left, unjustified, no indents
- [ ] Display-to-body ratio ≥ 6:1 where display type is used
- [ ] Hover, focus and active states on every interactive element
- [ ] Transitions ≤ 150ms, linear, disabled under reduced motion
- [ ] Targets ≥ 44px; reflow verified at 320px
- [ ] Imagery monochrome or duotone, grid-aligned, with alt text

*Neue Haas Grotesk, Akzidenz-Grotesk and Univers are commercial typefaces; stacks fall back to Inter and Helvetica Neue.*