Swiss Mono Precision

# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Monospace — engineered, technical, the "drawing instrument" register |
| **Examples** | IBM Plex Mono, Space Mono, JetBrains Mono |
| **Weight** | 400-500 (regular/semibold — the display voice is confident, not loud) |
| **Tracking** | 0.02em-0.05em (slightly open; mono already demands more air) |
| **Size** | `clamp(2rem, 5vw, 4.5rem)` — large but measured, locked to the grid |
| **Transform** | UPPERCASE for section identifiers, sentence case for headlines |

**Why monospace:** The fixed character width is the typographic echo of the grid — every glyph occupies its own column, every line aligns to the same invisible rails. IBM Plex Mono or JetBrains Mono gives the page the feel of a dimensioned engineering drawing: the type is *printed*, not rendered. This is the register the style is named for — precision must be visible in the letterforms themselves.

---

## Body Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Same monospace family, lighter weight — the annotation voice |
| **Examples** | IBM Plex Mono Light (300), Space Mono Regular, JetBrains Mono Light |
| **Weight** | 300-400 |
| **Tracking** | 0em-0.02em (mono at body size needs no added tracking) |
| **Size** | `clamp(0.875rem, 1vw, 1rem)` — 14-16px |
| **Line Height** | 1.5-1.6 (tight-ish; mono is tall-bodied and needs discipline) |

**Why monospace at body size:** Mono body text is harder to read than grotesque — that difficulty is the point. It forces the reader into the technical register, like reading a spec sheet. Keep line lengths strict (45-70 characters — i.e. a real column count) and the line height tight. The reading experience is dense and precise, not airy.

---

## Micro / Label Type

| Property | Specification |
|----------|--------------|
| **Register** | Same family, with letter-spacing to widen the fixed width |
| **Examples** | IBM Plex Mono Light, JetBrains Mono Light |
| **Weight** | 300-400 |
| **Tracking** | 0.12em-0.2em (very wide — makes mono feel like stamping) |
| **Size** | 10-12px |
| **Transform** | UPPERCASE with tabular figures |

**Usage:** Section labels, figure indices, coordinates, timestamps, dimension annotations. These labels are the numbering system of the page — "SEC. 02 / GRID SYSTEM", "REF. 042", "X: 64 / Y: 128". Tabular figures are mandatory so columns of numbers align precisely.

---

## Type Scale

```
Display:  clamp(2rem, 5vw, 4.5rem)  — monospace, uppercase identifiers
Body:     clamp(0.875rem, 1vw, 1rem) — 14-16px, mono light
Micro:    10-12px, uppercase, wide tracking
```

The scale is a **systematic ratio (1.25x-1.5x modular scale)** built on an 8px base unit, so every size in the system lands on a grid interval. Sizes are few and locked — the hierarchy comes from weight, case, and tracking, not from size proliferation. A display size is never chosen ad hoc; it is computed from the scale.

---

## Font Pairing Logic

**Monospace system with one grotesque escape:** Use a single mono family (IBM Plex Mono recommended) at 300/400/500 across all registers — the consistency is the system, one instrument at different pressures. Where a change of voice is needed (a quote, a pull fact, a metric callout), switch to a neo-grotesque sans (Akkurat, Aeonik, Neue Haas) at Regular weight only — the grotesque is the *human* voice inside the *machine* voice.

**Never:** Serif typefaces (too literary — this is a spec, not a magazine), script or display novelty fonts (breaks the instrument register), or mixing multiple mono families (each mono has its own proportions — the alignment discipline collapses).

**Micro-typography is mandatory:** proper en/em dashes, hanging punctuation, tabular figures, and single quotes. Sloppy dashes break the precision contract faster than any layout mistake.

# Color Architecture

## Ground

The ground is the Swiss paper field — a controlled, neutral canvas that lets the grid and type do the talking. Two light ground states and one dark, all strictly off-pure to keep the page architectural rather than glowing:

```css
--color-ground-light: #FAF9F7;    /* Paper white — cold, matte, like blueprint stock */
--color-ground-dark: #101010;     /* Engineering black — flat, no blue/no purple tint */
```

**Why paper white and engineering black:** Pure #FFFFFF reads as a screen, not a surface. A cold paper tone (#FAF9F7) feels like drafting paper; #101010 is the flat black of a darkroom, not the glowing black of a UI skin. The two grounds are the anchors the grid locks against.

---

## Monochrome Neutrals

```css
--neutral-black: #101010;       /* Structural black — rules, type, blocks */
--neutral-ink: #1A1A1A;         /* Body text black (slightly lifted, never pure #000) */
--neutral-gray: #6E6E6E;        /* Muted gray — secondary labels, captions */
--neutral-line: #DCDBD9;       /* Hairline gray — muted rule color */
```

**These are the base colors.** Black, near-black, and one muted gray are the entire chromatic range of the system. The gray only appears where information is demoted — figure numbers, timestamps, secondary measurements. Everything structural is black. Nothing decorative exists in the neutral ramp: every value maps to a job (rule, body, label, margin).

---

## Swiss Red Accent

```css
--accent-red: #E4002B;          /* Swiss red — the single permitted accent */
--accent-red-active: #C40025;   /* Pressed / active state of the same red */
```

**Usage:** One red, used sparingly and always meaningfully — a highlighted grid intersection, a validated state, the active filter in a numbered system, a single underscore below a figure that changed. It performs the function a hairdresser's marker would on a drawing: it says *"this is the one thing that matters on this plane."*

**Rule:** Max 2-3 colors in the entire composition (black, paper white, one red). If a second accent is unavoidable, it must be a muted desaturation of the red — never a new hue. The red is an instrument, not decoration.

---

## Text

```css
--color-text-on-light: rgba(16, 16, 16, 0.92);  /* Ink black on paper — near solid */
--color-text-on-dark: rgba(250, 249, 247, 0.92); /* Paper white on engineering black */
--color-text-muted: rgba(16, 16, 16, 0.55);     /* Muted gray — captions, measure labels */
```

**Why near-solid text:** Unlike soft, floating styles, Swiss Mono Precision sets text at near-solid opacity (92%). The type is an instrument of the grid — it must print sharply against the ground. Muted text is reserved for the small technical annotations (dimensions, indices, run numbers) where demotion is part of the information hierarchy.

---

## Hairline / Structural Colors

```css
--color-rule: rgba(16, 16, 16, 0.85);   /* 1px hairline rule — structure, not decoration */
--color-rule-muted: rgba(16, 16, 16, 0.25); /* Faint grid ruling — the blueprint underlay */
--color-rule-red: #E4002B;            /* Accent rule — marks the active column */
```

**Usage:** Hairs are the Swiss structural element. They separate, align, and quote the grid. The faint ruling (#25 opacity) is the *underlay* — the invisible 12-column scaffold made barely visible; the strong rule (#85) is actual content structure — table borders, definition lines, section breaks. The red rule marks the system's active state.

---

## Color Don'ts

| Don't | Do Instead |
|-------|------------|
| Pure #FFFFFF background | Cold paper white #FAF9F7 |
| Pure #000000 everywhere | Engineering black #101010 with lifted ink #1A1A1A |
| Multiple accent colors | One Swiss red #E4002B, used functionally |
| Gradients or color ramps | Flat, clipped color fields — no blending |
| Rounded-corner colored blocks | Hard-edged black/white/red fields |
| Soft, muted neon palette | High-contrast monochrome with one red against paper |
| Color carries the design | Structure (grid, type, rule) carries it — color reports |

# Motion Principles

## Philosophy

Motion in Swiss Mono Precision is **mechanical and minimal**. Nothing drifts, nothing morphs, nothing floats. Elements appear when the system calls for them — on a grid interval, on a state change — and they are gone the same way. The motion vocabulary is the motion of a drawing instrument: a rule being struck, a stamp hitting the page, a dimension being marked. Every animation must be justifiable as a state transition. No flourish, no parallax theater, no organic easing — motion reports, it does not perform.

---

## Precise Reveals

| Element | Animation | Duration | Easing |
|---------|-----------|----------|--------|
| Section headers | Clip-path or `width` reveal 0→100% (like a rule being drawn) | 300-500ms | `cubic-bezier(0.4, 0, 0.2, 1)`, once |
| Block content | Opacity 0→1 with 0px translation (no slide) | 200-300ms | `ease-out`, once |
| Figure indices | Opacity 0→1 + counter increment display | 150-250ms | `ease-out`, once |

**The reveal is a stamp, not a sweep.** Content appears fully formed, aligned to the grid — there is no entrance choreography. The only sanctioned entrance effect is the *rule draw*: a 1px line extending from 0 to full width, like a hairline being struck across the page. Everything else simply switches on.

---

## Grid-Snap Alignment

| Element | Specification |
|---------|--------------|
| Scroll-triggered alignment | Content snaps to grid rows as it enters — no smooth, organic settling |
| Table / list updates | Values change on a tick (200ms), never fade-dissolve |
| Column changes | Columns reveal instantly; the layout never animates its structure |

**The grid is static truth.** Layout shifts (column resizing, re-ordering) happen instantly or via a single 200ms snap — the grid never appears to wobble. If a value changes, it changes like a digital readout: old figure out, new figure in, no tween. This is the anti-"smooth scroll theater" stance — precision reads as stillness.

---

## Hairline Transitions

```css
.hairline-rule {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hairline-rule.is-drawn {
  transform: scaleX(1);
}
```

**Purpose:** The single signature motion — a 1px hairline drawing itself across the page on section entry or hover. It references the drafting-table action of striking a rule. Used only for structural separators and active-column markers; never for decorative underlines.

---

## Entrance Animations

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Section rule | scaleX(0)→1 (rule draw) | 400ms | `cubic-bezier(0.4, 0, 0.2, 1)` | 0ms |
| Section header | Opacity 0→1 | 200ms | `ease-out` | 100ms |
| Body content | Opacity 0→1 | 200ms | `ease-out` | 150ms |
| Figures / indices | Opacity 0→1 + counter | 200ms | `ease-out` | 200ms |

**Key:** All durations are short (200-500ms) and delays are small and systematic (50-100ms steps). This is one of the fastest, most restrained styles in the library — but the speed is not energetic. It is the speed of a machine confirming state: instant, legible, repeatable.

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Links | Underline rule draws 0→100% (200ms) | Color flips to Swiss red (0ms) |
| Buttons | Background flips to solid black, text to paper (100ms) | Background flips to red (0ms) |
| Table rows | Hairline highlight, row background shifts one step darker (100ms) | — |
| Figure thumbnails | Border color switches to red (0ms) | Scale 1.0→1.005 (150ms, optional) |

**Hover is state, not theater.** Most interactions are binary flips (on/off, black/white/red) — the red accent marks the active state instantly. The only transitions are the link rule-draw and short 100ms color flips. If an interaction needs more than 200ms to communicate, the UI is failing, not the animation.

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- All rule draws: replaced with instant appearance
- All opacity reveals: instant
- All transitions: 0ms state flips

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

The style survives reduced motion nearly unchanged — it is already 90% instant state flips.

---

## What NOT to Animate

| Never | Why |
|-------|-----|
| Parallax or scroll-linked drift | The page is a drawing, not a scene — nothing moves with the viewport |
| Bounce or spring physics | Springs are emotional; this system is mechanical |
| Morphing borders or organic shapes | Organic motion breaks the grid's authority |
| Staggered, choreographed reveals | Elements appear when the system calls them, not in sequence theater |
| Auto-advancing carousels | State changes belong to the user's interaction |
| Hover scale on cards | Geometry is fixed by the grid — scaling breaks alignment |
| Infinite ambient motion | A static page is a correct page; stillness is a feature |

# Layout Grammar

## Grid System

**The 12-column grid is the composition.** No layout decision exists outside it. Every block, rule, and text column lands on an 8px base unit; every column edge is a shared rail that elements must justify to.

- 12-column grid (16-column permitted for data-dense views), 8px base unit
- Gutters: 16px (2 × 8px) minimum; margins derived mathematically, never arbitrary
- Content max-width: 1200px (12 × 72px columns + 11 × 16px gutters, locked to the scale)
- Hairline rules (1px) drawn exactly on column edges — they quote the grid, they do not decorate it
- Asymmetry permitted but derived: an offset block must justify to a grid rail, with the justification visible

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | Full viewport — `min-h-[100dvh]` |
| Background | Paper white `#FAF9F7` or engineering black `#101010` — flat, no imagery |
| Layout | 12-column grid, content locked to the left rail |
| Headline size | `clamp(2rem, 5vw, 4.5rem)` — monospace, uppercase identifier |
| Structure | Hairline rules + a single red accent (active column, coordinates) |

```
┌───────┬───────┬───────┬───────┬───────┬───────┬───────┬───────┬───────┬───────┬───────┬───────┐
│                                                                                               │
│  SEC. 01 / GRID SYSTEM          │                        [hairline rule]                      │
│                                                                                               │
│  SWISS MONO                      │                                                            │
│  PRECISION                       │  [red rule — active column]                                │
│  The grid is the                 │                                                            │
│  composition.                    │                                                            │
│                                                                                               │
│  REF. 001 — 08.05.2026          │  X: 04 / Y: 02                                              │
│                                                                                               │
└───────────────────────────────────────────────────────────────────────────────────────────────┘
```

**The hero is the grid made visible.** The headline prints on the paper field, dimension annotations sit in the opposite gutter, one red rule marks the active column. Nothing floats, nothing is centered by eye — every element is at a computable position.

---

## Section Spacing

```css
--section-padding-y: clamp(4rem, 12vh, 10rem);  /* multiple of 8px, locked */
--content-max-width: 1200px;                     /* 12 columns + gutters */
--edge-margin: clamp(2rem, 4vw, 4rem);           /* margin = gutter multiple */
--base-unit: 8px;                                /* every offset is n × 8px */
```

**Whitespace is the architectural element.** Generous margins separate sections like panels on a drawing sheet. Spacing never "feels" right — it is computed from the base unit. If an offset is not a multiple of 8px, it is wrong.

---

## Layout Patterns

### Pattern 1: Full-Width Document (Spec Sheet)
```
┌──────────┬──────────┬──────────┬──────────┬──────────┬──────────┬──────────┬──────────┬──────────┬──────────┬──────────┬──────────┐
│ 01 │ LABEL          │  HEADLINE TEXT — LOCKED TO COLUMN RAILS                  │  [hairline] │
│    ├────────────────┼──────────────────────────────────────────────────────────┼─────────────┤
│ 02 │ Body column    │  Body column    │  Data table with tabular figures       │             │
│    │ (45-70 chars)  │  (45-70 chars)  │  REF 042 | 0031 | 0008                │             │
│    └────────────────┴─────────────────┴────────────────────────────────────────┴─────────────┘
```

### Pattern 2: Split — Annotation + Content
```
┌────────────┬────────────────────────────────────────────────────────────────────────────────┐
│  SEC. 03   │  Content block — justifies to the shared rail                                   │
│  TYPOGRAPHY│                                                                                │
│            │  [hairline rule on the rail — the split is structural, not decorative]          │
│  REF. 042  │                                                                                │
└────────────┴────────────────────────────────────────────────────────────────────────────────┘
```

### Pattern 3: Numbered Index (the numbering system made layout)
```
┌────────────────────────────────────────────────────────────────────────────────────────────┐
│  01 ──────── GRID         05 ──────── MOTION         09 ──────── TEXTURE                     │
│  02 ──────── COLOR        06 ──────── HIERARCHY      10 ──────── RESPONSIVE                  │
│  03 ──────── TYPE         07 ──────── DENSITY        11 ──────── ACCESSIBILITY               │
│  04 ──────── LAYOUT       08 ──────── SPACING        12 ──────── REDUCED MOTION              │
│  [red rule under the active index — 06]                                                      │
└────────────────────────────────────────────────────────────────────────────────────────────┘
```

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | 12 columns; side annotations in outer gutters; hairline rules full-width |
| **Tablet (768px)** | 8 columns (derived from 12 — never re-drawn ad hoc); annotations collapse into the flow |
| **Mobile (375px)** | 4 columns; margins shrink to one gutter multiple; rules stay 1px |

**On mobile:** The grid collapses, it does not break. Columns halve in a 12→8→4 sequence; the base unit stays 8px. Headlines shrink along the modular scale, not by eye. If a 12-column feature cannot survive at 4 columns, it is demoted or removed — never squeezed.

---

## Layout Don'ts

| Don't | Do Instead |
|-------|------------|
| Card grids with shadows | Flat fields separated by hairline rules |
| Centered, symmetric layouts | Asymmetric but derived — justified to grid rails |
| Floating, unanchored elements | Every block on a computed grid position |
| Arbitrary margins | All spacing = multiples of the 8px base unit |
| Visible decorative rules | Rules that quote structure — column edges, section breaks |
| Rounded corners above 2px | Hard-edged fields; 2px max on interactive elements |
| Imagery as background | Flat paper/engineering surfaces; the grid is the visual |

# Texture & Surface

## Primary Texture: Engineering Flatness

The texture of Swiss Mono Precision is **flatness itself** — the material truth of a drafting surface, not a digital glow. Where other styles build texture from imagery or material imitations, this style builds it from the drawing tools themselves:

| Quality | Description |
|---------|-------------|
| **Flat, clipped color fields** | Solid black, paper white, and red shapes with hard edges — no inner shadow, no emboss |
| **Matte grounds** | Paper-white and engineering-black surfaces with zero gloss or bloom |
| **Hairline structure** | 1px rules doing the work of what other styles do with shadows |
| **Blueprint underlay** | Faint grid ruling (12/16 columns) visible at low opacity — the drawing exists on ruled paper |
| **Fabricated artifacts** | Simulated print imperfections are banished; this is a clean vector drawing, not a scan |

**The goal:** Every surface should read as *drawn* — generated on a clean drafting plane, aligned to the grid, dimensioned. Where a softer style would add texture to feel alive, this style withholds texture to feel *authoritative*. The richness is in the precision of the edges, not the depth of the material.

---

## Hairline Rules

```css
.hairline {
  height: 1px;
  background: rgba(16, 16, 16, 0.85);
}

.hairline--underlay {
  height: 1px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(16, 16, 16, 0.25) 0,
    rgba(16, 16, 16, 0.25) 1px,
    transparent 1px,
    transparent 24px
  );
}
```

**Purpose:** The hairline is the primary surface element — 1px rules as borders, section separators, table structures, and column markers. The underlay variant repeats the 8px base-unit rhythm so the ruling itself becomes texture. Hairs are kept at crisp 1px (never `0.5px` blur); on high-DPI they render as a sharp physical line.

---

## Grid Ruling System

```css
.grid-underlay {
  background-image: linear-gradient(rgba(16, 16, 16, 0.08) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(16, 16, 16, 0.08) 1px, transparent 1px);
  background-size: 64px 64px;  /* 8px base unit · 12/16 columns · 64px module */
}
```

**Purpose:** Make the mathematical grid materially present. Sections can optionally show their column structure as a faint ruled underlay — like the printed grid on a technical pad. This is the only "pattern" the system permits, and it is always an honest quote of the actual grid, never a decorative motif. When it appears, it appears as surface truth, not ornament.

---

## Image / Asset Processing

Assets (figures, thumbnails, technical imagery) are processed to hold the drawing-plane register:

| Processing | Effect | Parameters |
|-----------|--------|------------|
| **B&W or single-tone** | Keep images monochrome or bi-tone (B&W, or B&W with red tint) | Desaturate 100%; optional red channel remap |
| **Crisp edges** | No blur, no glass, no glow | `filter: none` on outputs; hard clipping at grid bounds |
| **Flatten contrast** | Stable, even contrast — no HDR bloom | Contrast within ±10% of source |
| **Hairline framing** | Every asset sits behind a 1px rule frame | `outline: 1px solid rgba(16,16,16,0.85)` |
| **Overlay charts / annotations** | Dimension lines, index markers on top of assets | 1px rules + mono micro-type |

**The goal:** no asset may break the flat, measured plane. Imagery is treated as a technical figure in a manual — framed by hairs, annotated in mono, clipped to the grid. If an image can't be flattened to this register, it does not belong in the system.

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Background | Paper white or engineering black ground — flat, unlit |
| Text overlays | Near-solid ink, no background plate — type sits on the plane |
| UI elements | Flat fills with hairline frames; no shadows, no borders beyond 1px |
| Buttons | Solid black fill (paper text); active state solid red |
| Navigation | Flat bar locked to the top grid band, hairline rule below |
| Dividers | 1px hairlines — the only sanctioned separation |
| Cards (optional) | Flat field with 1px frame + top hairline accent; no radius above 2px, no shadow |

**Everything is on the plane.** No elevation, no float, no depth stack. Hierarchy is encoded in weight, rule density, and the red accent — never in shadow or layering.

---

## Texture Don'ts

| Don't | Do Instead |
|-------|------------|
| Drop shadows / elevation | 1px hairlines and flat color fields |
| Noise, grain, or paper scans | Clean vector flatness — a drawing, not a scan |
| Glassmorphism or translucency | Solid, near-opaque fills |
| Blur gradients or glows | Hard edges and crisp 1px rules |
| Rounded corners above 2px | Geometric corners (grids stay rectangular) |
| Organic or abstract textures | Grid ruling and ruled lines only |
| 3D depth / perspective | Flat projection — the front elevation of the page |

# Vocabulary Bank

## Primary Terms

| Term | Why It Matters |
|------|---------------|
| `hairline rule` | 1px structural line — the workhorse of Swiss layout, divides without decoration |
| `Swiss grid` | The mathematical column system — every element locked to it, nothing floats |
| `grid system` | 12-column (or 16-column) framework with 8px base unit — the page's skeleton |
| `baseline grid` | Horizontal rhythm — text sits on the grid line, not optically centered |
| `Swiss red` | The classic single accent (#FF0000) against black/white — loud restraint |
| `register` | Vertical alignment of elements across columns — the eye travels in straight lines |
| `modular scale` | Type sized by fixed ratio (1.25x or 1.5x) — systematic hierarchy, no eyeballing |

---

## Secondary Terms

| Term | Effect |
|------|--------|
| `neo-grotesque` | The sans family (Akkurat, Aeonik, Neue Haas) — clean, neutral, authoritative |
| `monospace annotation` | Mono type for data, numbers, labels — the engineering-drawing voice |
| `systematic spacing` | All margins/padding derived from the 8px base unit — no arbitrary values |
| `mathematical margin` | Whitespace as a computed element, generous and architectural |
| `tabular figures` | Monospaced numerals — numbers align in columns, tables look engineered |
| `hanging punctuation` | Quotes/dashes hang outside the measure — micro-typographic rigor |
| `numbered system` | Sections, rows, figures labeled 01/02/03 — the page reads like a spec sheet |
| `engineering-drawing feel` | Dimension lines, datum marks, annotation — technical documentation aesthetics |
| `flat surface` | No gradients, no shadow, no texture — pure ink on paper |
| `asymmetric but derived` | Layout looks free, but every position is mathematically locked |

---

## Context Terms

| Term | Mood |
|------|------|
| `Swiss International Style` | Mid-century Swiss typographic discipline — the historical foundation |
| `International Typographic Style` | The design movement: grid, sans-serif, objective communication |
| `grid discipline` | Rules before expression — the system is the message |
| `precision` | Every pixel justified, every measurement intentional |
| `restraint` | Fewer elements, more rigor — beauty in what is removed |
| `authoritative` | The tone of engineering specs and official documents |
| `objective layout` | Communication without personality noise — content first |

---

## Banned Terms

| Term | Why It Breaks the Style |
|------|------------------------|
| `decorative elements` | Everything must earn its place — no ornament without function |
| `gradients` | Flat surfaces only — the engineering aesthetic has no blend modes |
| `rounded corners above 2px` | Sharp geometry is the language — radius is a concession, not a style |
| `asymmetric without system` | Asymmetry is allowed ONLY when derived from the grid |
| `drop shadows` | Flat ink-on-paper surfaces — no elevation, no depth |
| `skeuomorphism` | The page is a drawing, not a simulation of objects |
| `bouncy motion` | Motion is utilitarian — a 150ms crossfade, not a performance |
| `serif display type` | Neo-grotesque sans and mono only — no editorial serif warmth |
| `background imagery` | Photography dilutes the drawing-like clarity — type IS the hero |
| `saturated palette` | Black, white, one accent. Swiss red is the only color allowed |
| `lorem ipsum placeholder` | The page must read like a real engineering document |
| `hero image` | No image-led heroes — a typographic lockup on the grid is the hero |

---

## Prompt-Ready Phrases

```
"12-column grid with 8px base unit — every element mathematically locked"
"neo-grotesque sans (Akkurat/Aeonik/Neue Haas) at modular scale (1.25x or 1.5x)"
"hairline rules (1px) as structural dividers — not decoration"
"black/white base with Swiss red (#FF0000) as the single accent"
"monospace annotation for data, numbers, and labels (tabular figures)"
"numbered system — sections labeled 01/02/03 like a spec sheet"
"engineering-drawing feel — dimension lines, datum marks, annotations"
"baseline grid — all text registered to horizontal grid lines"
"generous mathematical whitespace as an architectural element"
"asymmetric composition derived from the grid — free-looking but locked"
"proper micro-typography — em/en dashes, hanging punctuation, true quotes"
"flat surfaces — no gradients, no shadows, no texture, no rounded corners above 2px"
"minimal motion — 150-200ms fades, nothing decorative, no bounce"
"monochrome (black/white/gray) plus one muted accent per page"
```

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Developer tools** | The engineering-drawing aesthetic signals precision and technical competence |
| **Engineering/manufacturing** | Grid discipline and spec-sheet layouts match the domain's own language |
| **Data & analytics platforms** | Tabular figures and numbered systems make data feel authoritative |
| **Technical documentation** | The grid, mono annotations, and hairline rules ARE documentation design |
| **Design systems & component libraries** | The style proves the system — locked grids, systematic spacing |
| **Architecture & construction** | Blueprint aesthetics map directly onto the drawing-like layout |
| **Financial/industrial services** | Restrained, systematic, trustworthy — credibility without warmth |
| **Swiss/institutional brands** | Heritage alignment with the International Typographic Style |
| **Fintech & infrastructure** | Precision, rules, and rigor — the anti-hype alternative to playful fintech |

## Brand Personality Match

This style reinforces brands that are:
- **Systematic** — processes, standards, repeatable results
- **Precise** — measurement matters, error is not tolerated
- **Mathematical** — numbers are the language
- **Restrained** — confidence without noise, credibility without warmth
- **Authoritative** — the voice of a spec sheet, not a sales pitch

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **Consumer lifestyle/e-commerce** | Too cold and technical — product grids need warmth and imagery |
| **Entertainment/media** | The rigid grid strangles expressive, editorial energy |
| **Health/wellness** | The clinical precision reads as sterile, not caring |
| **Playful/creative brands** | Restraint is the opposite of the brand's personality |
| **Kids/family products** | The authoritative tone is alien to the audience |
| **Photography/art portfolios** | Typography-first layout competes with the work itself |
| **Fashion (avant-garde)** | Too orderly — fashion needs tension, not alignment |
| **Brands needing friendliness** | Monochrome + mono type is designed to feel impersonal |

## How to Decide

Ask: **"Does my brand want to feel like an engineered instrument — systematic, precise, and mathematically certain?"**

If yes → Swiss Mono Precision.
If no → Monochrome Single Accent (if you want monochrome discipline with more color freedom and warmth), Data Visualization Aesthetic (if charts and dashboards are the message itself), or Dark Tech Terminal (if you want the technical voice in a dark, screen-native register).

# Reference Gallery

## Live Sites

### Swiss Mono Precision Reference Implementation
- **What works:** 12-column grid with 8px base unit, hairline rules, neo-grotesque type at modular scale, black/white/Swiss red palette, mono annotations, numbered systems
- **URL:** Reference implementation — the canonical example of this style

### IBM (ibm.com)
- **What works:** Grid-locked corporate layout, IBM Plex family (sans + mono), engineering heritage, red accent discipline, documentation-grade structure
- **URL:** ibm.com — study the Carbon design system pages and IBM Plex usage

### Braun (braun.com)
- **What works:** Dieter Rams-era product design DNA — monochrome, hairline precision, systematic layout, typography as the interface
- **URL:** braun.com — heritage sections are the strongest references

### SBB Swiss Federal Railways (sbb.ch)
- **What works:** Live Swiss International Style — grid system, mono timetables, red/white institutional palette, real engineering-drawing information design
- **URL:** sbb.ch — the timetable is a masterclass in tabular data layout

### Josef Müller-Brockmann's Grid System
- **What works:** The source itself — 12-column math, baseline grids, hairline rules, objective typography. Study the original posters and "Grid Systems in Graphic Design"
- **URL:** Search "Müller-Brockmann grid poster" — museum/digital archives

### Technical Documentation Sites (Stripe Docs, MDN, Vercel Docs)
- **What works:** Sidebar + content grid discipline, mono code annotations, numbered steps, hairline separators, tabular data tables
- **URL:** stripe.com/docs, developer.mozilla.org, vercel.com/docs

## Key Visual References

### Grid & Structure
- **12-column grid** — every element locked to the column system
- **8px base unit** — all spacing mathematically derived
- **Hairline rules (1px)** — structural dividers, not decoration
- **Baseline grid** — text registered to horizontal lines
- **Asymmetric but derived** — compositions that look free but measure out

### Color References
- **Pure black #000000 / pure white #FFFFFF** — the binary ground
- **Swiss red #FF0000** — the heritage accent (or muted red #C8102E for calmer brands)
- **Neutral gray #666666** — secondary text and annotations
- **Hairline gray** — rgba(0,0,0,0.15) rules on white

### Typography References
- **Neue Haas Grotesk / Akkurat / Aeonik** — neo-grotesque display and body
- **IBM Plex Mono / JetBrains Mono / Space Mono** — data, numbers, labels
- **Modular scale** — 1.25x or 1.5x ratio, systematic hierarchy
- **Tabular figures** — numbers aligned in columns
- **Wide tracking on mono labels** — 0.15em+, uppercase
- **Micro-typography** — proper dashes, hanging punctuation, true quotes

### Motion References
- **Entrance** — single 200ms fade, 40ms stagger, ease-out
- **Hover** — color shifts and rule reveals only, 150ms
- **Numbers** — no celebratory counting animations; changes crossfade in 120ms
- **Reduced motion** — transitions fully disabled, instant states

## Screenshot Notes

> When capturing references for this style, look for:
> - The grid (columns must be visible and consistent — count them)
> - The rules (1px hairlines as structure, not borders for borders' sake)
> - The color (monochrome plus at most one accent — no gradients)
> - The type (neo-grotesque + monospace, systematic scale, tabular figures)
> - The annotation layer (mono labels, numbered systems, spec-sheet voice)
> - The whitespace (generous, mathematical, architectural)
> - The overall mood (must feel engineered, restrained, authoritative)