ResumeSite/docs/design/03-visual/DESIGN_SYSTEM.md

# DESIGN_SYSTEM.md
Design direction: **"Kontrollrom"** (control room) — a quiet, Nordic-restrained engineering aesthetic.

---

## 1. Concept

The site should feel like **well-run production infrastructure given a public face**: calm surfaces, precise alignment, information-dense but never busy, one living accent colour that behaves like a status light. Not a marketing site pretending to be technical; a technical artefact polished until it feels premium.

Three ideas fused, none copied:
1. **Nordic restraint** — generous whitespace, muted surfaces, understatement (matches the Norwegian market and the candidate's voice).
2. **Console/ops vernacular as *seasoning*** — monospace metadata labels, status chips, subtle grid/blueprint texture. Used at ~10% intensity: labels, captions, chips — never full terminal cosplay, no fake CLIs, no green-on-black.
3. **SaaS product craft** — case studies presented like product launch pages (framed screenshots, TL;DR boxes, proof strips).

**Litmus test for every design decision:** *"Would this look at home in the admin console of a product you trust?"* If it's decorative noise — cut it.

## 2. Identity elements

- **Monogram:** `CB` set in the mono face inside a rounded square, with a 2px accent tick in the corner — reads as both initials and a status LED. Used as favicon, header mark, OG-image anchor.
- **Signature motif — "the trace":** a thin (1.5px) accent line that draws horizontally then steps (like an oscilloscope/PCB trace). Appears once in the hero (animated draw on load), as section-divider punctuation, and in the 404. This is the site's single ownable visual move.
- **Status chips:** rounded-full, mono, 12px, used for facts (location, permit, availability) and project status (`ACTIVE`, `IN DEVELOPMENT`). The chip *is* the brand's information atom.
- **Photography:** the outdoor headshot, duotone-treated in dark mode (slight cool grade) and natural in light mode; always in a hairline-bordered rounded frame with a mono caption (`tønsberg, norway · 2025`).

## 3. Surfaces & elevation

Flat-first. Depth via **hairline borders (1px, low-alpha)** and background steps, not drop shadows.

| Token | Dark | Light | Use |
|---|---|---|---|
| `surface-0` | #0B0E14 | #FAFAF8 | Page background |
| `surface-1` | #11151D | #FFFFFF | Cards, panels |
| `surface-2` | #171C26 | #F1F2EF | Nested/hover panels, code-ish blocks |
| `border` | #FFFFFF @ 8% | #16181D @ 10% | All hairlines |
| `border-strong` | #FFFFFF @ 16% | #16181D @ 20% | Focused/hover cards |

Shadows: only two, both subtle, only in light mode + overlays (`shadow-card`, `shadow-overlay`). Dark mode uses border-strong + surface step instead.
Radius scale: `4px` (chips inner) · `8px` (buttons, inputs) · `12px` (cards) · `16px` (screenshot frames) · `full` (chips).

## 4. Grid & layout

- Max content width **1200px**; case-study prose measure capped at **72ch**.
- 12-column grid, 24px gutters desktop; 4-column, 16px gutters mobile.
- Left-rail section labels on desktop (mono, vertical rhythm anchor): `01 — ABOUT`, `02 — SKILLS`… echoing the current site's numbering, done properly.
- Breakpoints: 480 / 768 / 1024 / 1280 / 1536.
- Background texture: an extremely faint dot-grid (border-colour dots, 24px pitch) on `surface-0` hero + section headers only — the "blueprint" whisper. Disabled in forced-colors/high-contrast.

## 5. Core components (design-level inventory)

| Component | States to design | Notes |
|---|---|---|
| Header / nav | default, scrolled (compressed + blur), mobile overlay | see mockups M7 |
| Split CV button | default, hover, open (menu shows both languages + file size) | locale-aware default |
| Language switch | EN active, NO active, hover, focus, keyboard | segmented control, see M11 |
| Theme toggle | dark, light, hover (icon morph sun⇄moon) | respects system on first load |
| Status chip | fact, status-active (accent dot pulse ≤ 2 loops), status-dev (amber dot) | |
| Skill group card | default, hover (border-strong) | chips inside |
| Project card | default, hover (screenshot parallax-shift 4px + border glow), focus | whole card clickable, single tab stop |
| Timeline item | featured (expanded), compact (one-liner), hover | |
| TL;DR box | — | surface-2, accent left edge (3px) |
| Architecture diagram frame | static SVG, nodes highlight on hover (desktop only) | must read perfectly with zero interaction |
| Screenshot frame | loading (skeleton), loaded, lightbox open | browser-chrome mock, aspect-locked |
| Form field | default, focus, filled, error, success | error text + icon, never colour-only |
| Buttons | primary (accent), secondary (outline), ghost | see MICRO_INTERACTIONS |
| Footer | — | dense, mono-flavoured, sitemap + channels |
| 404 | — | trace motif breaks/frays; bilingual links home |

## 6. Iconography & illustration

- Icons: single stroke-icon set, 1.5px stroke, 20px grid (Lucide-class aesthetic — final set is a Phase 2 choice). Never filled+outlined mixed.
- No stock illustration, no 3D blobs, no particles. The only "illustrations" are: the trace motif, architecture diagrams (drawn in-system: surface-2 nodes, border hairlines, accent flow arrows, mono labels), and framed product screenshots.

## 7. Theming rules

- Dark is the **design-lead theme** (P2 audience default; screenshots of both apps present well on dark), light must be equally finished — P1/P3 recruiters often browse light.
- Every token has a pair; no theme-conditional layouts. Accent identical in both (passes contrast both ways — see COLOUR_SYSTEM).
- First paint must match user preference without flash (implementation constraint flagged for Phase 2).

## 8. What this system deliberately avoids

Percentage skill bars · testimonial carousels · particle heroes · scroll-hijacking · fake terminals · gradient-everything · cookie-consent theatre (no tracking → no banner; a privacy footnote instead — itself a trust signal).