docs: establish approved Phase 1 design + Phase 2 spec as project foundation

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-03 21:07:25 +02:00
commit 1f695d3932
39 changed files with 2686 additions and 0 deletions
@@ -0,0 +1,43 @@
+# TYPOGRAPHY_GUIDE.md
+
+## 1. Type roles (three voices, strict casting)
+
+| Role | Direction | Character | Used for |
+|---|---|---|---|
+| **Display / headings** | Modern grotesque with slight technical edge — *Space Grotesk-class* (alternatives in that register: General Sans, Hanken Grotesk) | Confident, engineered, not cold | H1–H3, nav, buttons, stat numbers |
+| **Body** | Highly-legible humanist/neo-grotesque — *Inter-class* (alternatives: Source Sans 3, Figtree) | Invisible, effortless at 16–18px | Paragraphs, lists, form fields |
+| **Mono (identity voice)** | *JetBrains Mono-class* (alternatives: IBM Plex Mono, Commit Mono) | The "console seasoning" | Section labels, chips, captions, metadata, diagram labels, footer |
+
+Exact typeface licensing/loading = Phase 2. Design intent: **two families max loaded + mono**, variable weights preferred, `ø æ å` coverage mandatory in all three (Norwegian body text is first-class, not fallback).
+
+## 2. Scale (1.25 major-third, 16px base)
+
+| Token | Size / line-height | Weight | Tracking | Use |
+|---|---|---|---|---|
+| `display` | 61/1.05 (desktop) · 40/1.1 (mobile) | 600 | −0.02em | Hero name only |
+| `h1` | 49/1.1 · 34/1.15 | 600 | −0.015em | Page titles |
+| `h2` | 39/1.15 · 28/1.2 | 600 | −0.01em | Section titles |
+| `h3` | 31/1.2 · 24/1.25 | 550 | 0 | Card titles, case-study subsections |
+| `h4` | 20/1.35 | 550 | 0 | Minor headings |
+| `body-lg` | 18/1.6 | 400 | 0 | Hero summary, TL;DR, lead paragraphs |
+| `body` | 16/1.65 | 400 | 0 | Default prose |
+| `small` | 14/1.5 | 400 | 0 | Secondary info, form hints |
+| `mono-label` | 12/1.4 | 500 | +0.08em, UPPERCASE | Section labels (`01 — PROSJEKTER`), chips |
+| `mono-meta` | 13/1.5 | 400 | 0 | Captions, dates, file sizes |
+
+**Rule: uppercase + letter-spacing lives only in `mono-label`.** (The old site letter-spaced everything; the CV letter-spaces headings into A T S soup. Reserve the effect and it becomes identity instead of noise.)
+
+## 3. Rhythm & measure
+
+- Prose measure 60–72ch; hero summary ≤ 55ch.
+- Space *before* a heading ≈ 2× space after (sections cohere downward).
+- Baseline rhythm on the 8pt grid — line-heights above are chosen to land on it at 16px base.
+- Norwegian headline audit: NO strings run ~10–15% longer and compounds don't hyphenate freely (`systemadministrasjon`); every headline layout must be tested with the NO string at the mobile breakpoint. Wrapping rule: allow hyphenation in body NO text, never in headings — reword instead.
+
+## 4. Typographic details (the seniority tells)
+
+- Real dashes (– —), curly quotes per language convention (EN “ ” · NO « »), non-breaking spaces before units and inside `8+ yrs`.
+- Numbers in stats use tabular lining figures (mono or `tnum`).
+- Links in prose: accent-coloured underline (2px offset), full colour+underline — never colour-only (a11y).
+- Code/tech names inline (C#, .NET) stay in body face — mono inline is reserved for actual paths/commands in case studies.
+- Focus states use a 2px accent outline + 2px offset, same in both themes.