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).