www/DESIGN.md

<!-- SEED: re-run /impeccable document once there's code to capture the actual tokens and components. -->
---
name: Owen
description: Personal site — work, writing, point of view.
---

# Design System: Owen

## 1. Overview

**Creative North Star: "The Late-Shift Studio"**

A serious studio after hours. The room is dark — not stage-black, not glossy-black, a tinted near-black warm enough to feel like a real space. One magenta-purple lamp picks out what matters: a name, a section title, a focus ring, the live link in a list. The room stays warm; the lamp is deliberately cool. The temperature contrast is the brand: a person at work in a warm space, with focused electric light on the active surface. Everything else falls into precise but quiet darkness, with off-white type doing the load-bearing work. The grid is visible because the work is the proof; alignment is ruler-precise; nothing is decorative for its own sake. The mood is not "developer aesthetic" — it is "someone in the middle of a long, considered piece of work, and the lamp is still on."

The system explicitly rejects the generic SaaS landing-page shape (hero metric, gradient accent, identical card grid, tracked uppercase eyebrows on every section), the bootcamp-portfolio template (three identical project cards + stock illustration + generic "about me"), designer-tryhard maximalism (scroll-jacked, motion-heavy, look-at-me), and the resume-as-a-webpage (linear text dump with no point of view). It also rejects its own first reflex: dark mode plus a cool neon accent (cyan / electric blue / blurple) plus monospace-everywhere is the Linear / Stripe / Twitch monoculture. Engineering-precise is the *reference*; cool-terminal is the *trap*. We sit clearly outside it: warm-tinted surface, magenta-leaning purple (not blurple), sentence-case sans for voice with mono only for metadata.

**Key Characteristics:**

- Tinted-warm near-black surface as the body; magenta-purple accent ≤10% of any view.
- Editorial sans carries voice and hierarchy; mono carries metadata (dates, tags, code, counts).
- Visible, respected grid. Ruler-precise alignment across every section.
- Motion is responsive (state changes, transitions), never choreographed. Reveals enhance an already-visible default.
- One accent. Many tokens, one voice.

## 2. Colors

A restrained palette: a warm-tinted near-black surface, off-white ink, and a single magenta-purple accent that earns every appearance. The strategy is *commitment, not variety* — the accent's rarity is what makes it sharp.

### Primary

- **Magenta-purple accent** — `oklch(0.72 0.21 325)` in dark, `oklch(0.45 0.23 322)` in light. Hue ~322–325 (magenta-leaning, deliberately not the 270–290 blurple lane that fintech / SaaS dark themes settled into). Calibrated against the warm-dark surface so it reads as *deliberate cool light* — an electric desk lamp in a warm room. Used at ≤10% of any rendered view. Earns its place on: the email/social links, the live "now" marker on the current role, focus rings, link hover, the hashtag chip wash on hover.

### Neutral

- **Body surface** — warm-tinted near-black. *Exact value to be resolved during implementation*. Tinted slightly toward the accent's hue family (not cool, not magazine-cream); reads as the actual room, not a stock dark theme.
- **Ink** — off-white tuned to hit ≥4.5:1 against body surface. Carries all body copy and most headings.
- **Muted ink** — for metadata, captions, secondary text. Must still hit ≥4.5:1 against body surface; the lazy "very-light-gray on dark" failure is forbidden.
- **Divider / line work** — hairline (1px) ink at low opacity. The grid is seen, not shouted.

### Named Rules

**The One Lamp Rule.** Exactly one accent. Magenta-purple and nothing else. Adding a second hue *anywhere* (a teal link, a citrus highlight, a green success state) breaks the metaphor and the brand. Success, error, and info states use weight, position, and icons — not new hues.

**The 10% Ceiling.** The accent covers ≤10% of any rendered view, measured roughly by ink coverage. If a section feels like it has too much purple, it does — remove the weakest instance, not the strongest.

**The Warm-Room, Cool-Lamp Rule.** The body surface stays *tinted warm* (hue ~70, very low chroma) even though the accent is cool. This is intentional contrast, not an oversight: the warmth carries the room, the accent carries the focused light. Pure neutral black (#000) is still forbidden — it reads as default dark mode, not as a place. Re-tinting the surface toward the accent's hue (cool / purple-tinted near-black) is also forbidden: it collapses the warm/cool contrast that *is* the brand.

## 3. Typography

**Display & Body Font:** an editorial sans-serif — *family to be chosen at implementation*. Direction: a well-cut neo-grotesque or modern humanist (Söhne / Neue Haas Grotesk / Inter Display family-of-feel), with the *display* and *text* optical sizes pulled apart. One family doing the heading work and the body work, with weight and size carrying hierarchy.

**Mono Font:** a real mono — *family to be chosen at implementation*. Direction: a humanist or editorial mono (JetBrains Mono / Berkeley Mono / IBM Plex Mono family-of-feel), not a default system mono. Reserved for dates, tags, counts, code, post slugs, and any tabular metadata.

**Character:** The pairing is a typesetter's pairing, not a developer's. The sans is the voice; the mono is the marginalia. They share x-height and weight discipline. Together they should read like a well-set technical journal — confident, precise, no decoration.

### Hierarchy

- **Display** (medium / 500, `clamp(2.5rem, 6vw, 5rem)`, line-height 1.0–1.05, letter-spacing ≥ -0.04em): owner's name on the home page; one moment per long-form post. Used sparingly.
- **Headline** (medium / 500, 2rem–2.5rem, line-height 1.1): section titles. Visible from the table of contents, not from the hero.
- **Title** (medium / 500, 1.25rem–1.5rem, line-height 1.25): subsection titles, project titles in the index.
- **Body** (regular / 400, 1rem–1.0625rem, line-height 1.55–1.65, max 65–75ch): all running prose. Off-white on warm-dark; never light-gray-on-dark.
- **Label / Mono** (regular / 400, 0.8125rem–0.875rem, sans for inline labels, mono for metadata; case = sentence): dates, tags, counts, "current role", reading time. *Uppercase tracked labels above every section are forbidden* (eyebrow trope).

### Named Rules

**The No-Eyebrow Rule.** Tiny uppercase tracked eyebrows above each section ("ABOUT", "WORK", "WRITING") are forbidden. Section hierarchy comes from the heading itself, position, and rule-line dividers — not from eyebrows.

**The Mono-Earns-It Rule.** Mono appears only where it carries genuine technical content: dates, tags, code, slugs, numerics, machine-readable strings. Mono used decoratively (a tagline in mono "to look technical") is forbidden — it's the terminal-clone trap.

**The Three-Family Ceiling.** Sans + mono. Two families, no third. A "fun" third display face anywhere on the site is forbidden.

## 4. Elevation

The system is **flat by default**. No drop shadows for decoration. Depth comes from:

1. Surface tone (body / muted-line-work) — two surfaces, one rule line.
2. The accent — anything that lights up reads as *foreground*.
3. State (hover, focus, active) — interactive elements lift via accent or weight, never via a synthesized 3D shadow.

Shadows appear, rarely, as a focus ring or a glow under the accent on hover — and only when they materially improve the interaction. Stock "card with soft shadow" is forbidden.

### Named Rules

**The Flat-By-Default Rule.** Surfaces are flat at rest. Elevation appears only as a response to state. No card has a resting shadow.

## 5. Components

*Omitted in seed mode — no components exist yet. Re-run `/impeccable document` after the first features ship to capture buttons, links, navigation, post lists, project entries, and any signature components.*

When components do land, they must obey the Named Rules in §2 and §3, the Flat-By-Default Rule in §4, and the Do's and Don'ts in §6. The first component to ship should be the **link** (in long-form prose and in the work index) — it carries the accent and sets the rest of the system's interaction grammar.

## 6. Do's and Don'ts

### Do:

- **Do** use exactly one accent (magenta-purple, hue ~322–325) across the entire site. Everything else is the tinted warm-dark surface and off-white ink.
- **Do** verify body contrast ≥4.5:1 against the warm-dark surface. Muted ink for metadata must still hit 4.5:1; "elegantly faded gray" on dark is the most common failure and is forbidden.
- **Do** carry hierarchy with weight and scale (≥1.25 ratio between steps), not with eyebrows, icons, or color.
- **Do** reserve mono for genuine technical content (dates, tags, code, slugs).
- **Do** keep alignment ruler-precise. The grid is the brand.
- **Do** give every animation a `@media (prefers-reduced-motion: reduce)` alternative — crossfade or instant transition, not "motion silently disappears".
- **Do** size the display heading with a clamp ceiling ≤ 6rem (~96px) and letter-spacing ≥ -0.04em.
- **Do** cap body line length at 65–75ch on long-form pages.

### Don't:

- **Don't** ship the generic SaaS landing-page shape (hero metric + gradient accent + identical card grid + tracked uppercase eyebrows). Named in PRODUCT.md as a primary anti-reference.
- **Don't** ship the bootcamp-grad portfolio shape (three identical project cards with screenshots, big gradient name, generic "About me" with stock illustration). Named in PRODUCT.md.
- **Don't** ship designer-tryhard maximalism — scroll-jacking, heavy motion, intentionally hard navigation. Named in PRODUCT.md.
- **Don't** ship the resume-as-a-webpage (linear list of jobs and skills, no point of view). If a PDF could replace it, the page has failed. Named in PRODUCT.md.
- **Don't** ship the second-order trap: dark mode + cool blurple accent (hue 270–290) on cool-tinted near-black + monospace everywhere. That is the Stripe / Linear / Twitch SaaS monoculture, not the brief. The magenta-leaning purple (hue ~325) on warm-tinted near-black is intentionally outside that lane.
- **Don't** re-tint the surface toward the accent's hue "for consistency". The warm/cool temperature contrast IS the brand. A surface tinted cool/purple turns the page into Stripe-clone overnight.
- **Don't** use gradient text (`background-clip: text` + gradient). Forbidden everywhere.
- **Don't** add side-stripe borders (`border-left > 1px` as a colored accent on cards or callouts). Forbidden.
- **Don't** use glassmorphism, decorative blurs, or stock soft shadows on cards.
- **Don't** put a tracked uppercase eyebrow above every section. One section having a deliberate label is fine; every section is the AI grammar.
- **Don't** number sections (`01 · About / 02 · Work / 03 · Writing`) unless the section is *literally* an ordered sequence whose order carries meaning.
- **Don't** use em dashes — or `--` — in copy. Commas, colons, semicolons, periods, parentheses. (This rule applies to copy. Tokens that legitimately use em dashes in display are fine.)
- **Don't** use marketing buzzwords (*streamline, empower, supercharge, leverage, transform, seamless, world-class, enterprise-grade, next-generation, cutting-edge, mission-critical*). Plain nouns and verbs that describe what the thing literally does.
- **Don't** carry meaning in color alone. The accent's job is *emphasis*, not categorical encoding.