Editorial Resume Site

---
title: "Editorial Resume Site"
slug: resume-site-editorial
bestFor: "Job seekers, personal brand, IC engineers/designers"
aestheticFamily: "Editorial"
description: "Typography-led personal site that signals taste and clarity — ideal for senior IC roles where the portfolio IS the resume."
---

# DESIGN.md — Editorial Resume Site

## Brand essence
A quiet, typographic personal site for someone whose work speaks first. Confident, edited, grown-up. No hero video, no animated gradients. The page reads like a well-set magazine masthead.

## Color palette
- `--ink`: `#0E0E10` — body text, headings, primary marks
- `--paper`: `#FAF8F4` — page background (warm off-white, not pure white)
- `--rule`: `#1F1F22` — hairline rules, dividers, borders
- `--accent`: `#B5341F` — single accent (links, period markers, the one annotation that matters)
- `--muted`: `#6E6A60` — secondary text, dates, captions
- `--surface`: `#F2EEE6` — block quotes, sidebar, "Now" cards

Use accent sparingly — fewer than 5 marks per viewport. Never as a fill on large surfaces.

## Typography
- **Display**: a serif with high contrast (e.g., GT Sectra, Tiempos Headline, Recoleta). Weights: 400, 700.
- **Body**: a humanist serif at 18–19px (e.g., Source Serif Pro, Lora) — readable in long paragraphs.
- **Mono**: IBM Plex Mono or JetBrains Mono — used only for inline metadata (years, role tags, file paths).
- **No sans-serif anywhere on the page.** The whole identity rests on serif tension.

Type scale (px / line-height):
- H1: 64 / 68, weight 700, letter-spacing -0.02em
- H2: 36 / 42, weight 700
- H3: 24 / 30, weight 400 italic
- Body: 19 / 31
- Caption / mono: 13 / 18, uppercase, letter-spacing 0.08em

Hierarchy rules:
- One H1 per page. Always followed by an italic deck (H3) summarizing the page in one sentence.
- Section headings are preceded by a number ("01 — Work", "02 — Now") in mono caption.
- Drop caps allowed on long-form bio sections only.

## Spacing & layout
- Container: max-width `680px` for prose pages, `980px` for the index, centered.
- Single-column layout. No multi-column except the case-study grid (2 columns at >=900px).
- Vertical rhythm: 8px baseline. Section gap = 96px. Paragraph gap = 24px.
- Generous left margin on desktop — never edge-to-edge.
- Hairline rules (`1px solid var(--rule)`) separate sections. No box shadows. No card backgrounds except `--surface`.

## Component patterns
- **Navigation**: top-left wordmark in display serif, top-right 3 inline links separated by middle-dot (`·`). Sticky, with a 1px bottom rule. No mobile hamburger — links wrap.
- **Buttons**: text-style only. Underlined on hover, accent color. No filled CTAs. The single exception: the "Email me" button on contact = accent fill, inverted ink text, sharp corners (radius 0).
- **Cards** (work entries): no background, no border. Just title (H3 italic), one-line role, mono date range, then a 2-sentence prose description. Whole row is a link; hover = accent underline on title.
- **Form fields** (contact): single underline (1px ink), no border-box, label above in mono caption. Focus: underline thickens to 2px in accent.
- **Quotes / testimonials**: oversized opening quotation mark in display serif, accent color, quote in italic body, attribution below in mono caption.

## Motion
- Easing: `cubic-bezier(0.22, 1, 0.36, 1)` — slow-out, decisive arrival.
- Durations: 200ms for hover, 400ms for page-section reveals, never longer.
- Principles: motion is invisible by default. Page load = 8px upward fade-in on H1 only. No parallax. No scroll-jacking. Cursor stays a cursor.

## Imagery / iconography
- Photos in monochrome or duotone (ink + paper). No saturated photography.
- One feature image per page max, full-width within container, with a mono caption beneath.
- Icons: do not use icons. If absolutely required, hairline (1.25px stroke), 16px, ink color.

## Voice & tone
First-person, declarative, edited. Sentences have rhythm — short, then longer, then short. No emoji. No "passionate about." No "I love to." Show the work, then briefly say what it was.

## What to AVOID
- No glassmorphism, no gradient borders, no neon.
- No card grids with shadows.
- No sans-serif body.
- No hero animations, no Lottie, no scroll-triggered word reveals.
- No filled accent buttons except the single contact CTA.
- No emoji in copy.
- No stock illustrations.