Swiss Design
1
Philosophy and principles
An interface is an objective carrier of information. Every pixel must communicate something; if it does not, remove it.
Seven principles
Six laws
Align or justify. One idea per field. Type before decoration. One accent. Flat is final. Instant, linear response.
Hard fails
2
Grid and spatial layout
Asymmetric 12-column hero
Columns 1–8 display type, column 9 empty as structural void, columns 10–12 meta and call to action.
Spacing scale
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 |
Asymmetry rules
The left edge is the primary axis. Reserve at least 25% of columns as void on large screens. Use at most three alignment lines per page: the left margin, column 5 and column 9.
3
Typography and hierarchy
Neue Haas Grotesk where licensed, Inter as the open fallback. One family per product, weights 400, 500 and 700. Text sizes follow a perfect fourth; display sizes deliberately break the ratio.
Scale
Precision rules
Flush-left, ragged-right, never justified. Manual hyphenation. No paragraph indents; separate paragraphs with 16px. Headings use line-height 0.9 to 1.0 and negative tracking. Sentence case, with uppercase only for labels. Tabular figures in data. Emphasis by weight, not italics.
4
Color and surfaces
Neutrals
Accent: choose one per product
Text on white: #B00000
White text on #FF0000 measures 4.0:1 and fails AAA, so red surfaces carry black text. The accent marks action or the current state, at most one cluster per viewport.
Surface rules
Solid fills only. Full-bleed, grid-aligned blocks. No gradients, no shadows, no alpha-made colors. Modals are a solid panel with a 2px border.
5
Components
Buttons
Hover or tab to a button: colors flip in 50ms, with no easing.
Form field
Error: add a domain, for example [email protected].
Card
Principle
Reduction
One accent, one family, one stroke weight.
Data table
| Token | Role | Size | Line |
|---|---|---|---|
| h1 | Page title | 72 | 72 |
| h2 | Section title | 48 | 48 |
| body | Running text | 16 | 24 |
Navigation
6
Imagery, graphics and icons
Photography treatment
Objective and unretouched. Default to high-contrast monochrome or an ink and paper duotone. Crop to rectangles aligned to columns; allow one geometric mask per page. Never set text over a photograph.
Icons
24px artboard, 2px uniform stroke, butt caps, miter joins, 45° and 90° geometry, always currentColor.
7
Motion, performance and accessibility
Linear motion tokens
| 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 |
No bounce, float, parallax, hover scale or scroll fade-ins. Under reduced-motion settings every transition drops to 0ms.
WCAG 2.1 AAA
| Criterion | Implementation |
|---|---|
| 1.4.6 Contrast | Ink on paper 18.9:1; secondary text 7.5:1 |
| 1.4.8 Presentation | 66ch measure, flush-left, line spacing at least 1.5 |
| 1.4.10 Reflow | 4-column mobile grid, no sideways page scroll at 320px |
| 2.4.7 Focus visible | 3px ink outline with 3px offset |
| 2.5.5 Target size | 48px minimum height on controls |
| 1.4.1 Use of color | Accent always paired with underline, marker or text |
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 large text)
- Transitions are 150ms or less, linear, and respect reduced motion
- Imagery is monochrome or duotone, grid-aligned, with alt text