# Aesthetic Guide: Crash Test Dev

**Created:** 2026-05-26
**Status:** Active
**Author aesthetic:** Ken Chau's personal technical publishing site

---

## User's Vision (Preserved)

**Raw input:**
> A well-used workshop. Not a pristine showroom — the one where someone actually builds things.
> Tools are organized because disorganization wastes time. The wood has warmth.
> The light is good because you need to see details. There's a coffee cup somewhere.

**Audience hierarchy:** Ken first (personal reference), his kids someday, peers second, other travelers last.

**The site is:** A thinking journal with publishing-grade craft. War stories about building software at scale — webpack performance battles, React localization strategies, architecture patterns. Names problems like enemies. Shows receipts.

---

## Aesthetic Direction

### 1. Visual Metaphor and Personality

The governing metaphor is **the workbench, not the gallery**. Think of a woodworker's shop where someone has spent years building real things: the surfaces show honest use, the light comes from where you need it, the tools hang in order because order serves the work. Nothing is decorative for its own sake. Everything earns its presence.

"Crash Test Dev" itself carries kinetic energy — impact testing, deliberate stress, the willingness to break things in controlled conditions and report what happened. The aesthetic should feel **steady, not flashy**. The confidence of someone who has already done the hard thing and is now writing it down clearly. No performance of expertise. Just the evidence and the story.

The personality is dry warmth. A person who cares deeply about craft but doesn't need you to know that — you figure it out from the precision of the writing and the quality of the page it sits on.

### 2. Color Philosophy

Warm, grounded, and deliberately un-digital. Where the Amplifier Masterclass palette lives in cool lavender-grays and steel blues, Crash Test Dev shifts the entire temperature toward **aged paper, warm stone, and natural wood**.

The base surface should feel like heavy unbleached stock — not pure white, not yellow, but the warm off-white of a quality notebook page. Text should be warm near-black, the brown-black of good ink rather than the blue-black of digital defaults. This warm-neutral foundation is the site's primary material.

Accents should come from **fired earth and aged metal** — a muted terracotta or rust for emphasis, a tarnished brass for subtle highlights. These are not bright; they're the colors of materials that have been used, heated, and cooled. Secondary tones draw from warm mid-grays with a stone or clay undertone, never blue-gray or cool silver.

Contrast should be high for readability but not harsh. The Itten cold-warm contrast principle applies here: warmth in both the lights and darks creates visual comfort even at strong contrast ratios. Aim for WCAG AAA on body text against the paper surface.

### 3. Typography Philosophy

Three voices, each with a clear job. This is the core elegance of the site.

**Serif for prose** — the reading voice. A serif body face signals "this is meant to be read at the pace of thought." It carries the authority of published writing without the stiffness of academic text. Source Serif 4 or a similar transitional serif: readable at 18-19px, with enough personality to feel human but enough regularity to disappear during sustained reading. Weight 400 for body, 600 for inline emphasis. The serif is the site's primary voice — it's how Ken sounds on the page.

**Sans-serif for structure** — the navigation voice. Headings, UI labels, metadata, timestamps, tags. The sans face organizes and directs without competing with the prose. Inter or a similar humanist sans: warm enough to belong on this page, precise enough to create clear hierarchy. Semi-bold (600) for headings creates contrast with the lighter serif body without shouting.

**Monospace for evidence** — the proof voice. Code blocks, terminal output, file paths, inline code. This is where Ken shows receipts. JetBrains Mono or equivalent: generous width, clear character differentiation, ligatures optional. The monospace voice should feel like a different register entirely — factual, verifiable, this-is-what-actually-happened.

The interplay between these three is the entire typographic identity. Prose flows in serif. Structure appears in sans. Proof arrives in mono. The reader always knows which voice is speaking.

### 4. Spatial Philosophy

The page breathes like a well-set book, with one key deviation: **code breaks the column**.

Prose lives in a reading column around 720px — roughly 65-70 characters per line at 18px serif, which is the sweet spot for sustained reading. Generous line-height (1.7-1.75) because these are dense technical narratives, not skimmable listicles. Paragraph spacing should be generous enough to let ideas land.

Code blocks break wider — approximately 840px — creating a visual rhythm of **narrow-wide-narrow** as the reader moves through a post. This breakout isn't decorative; it reflects the reality that code needs horizontal space and that code is a different kind of content. The width shift signals the register change from narrative to evidence.

Vertical rhythm follows the content's natural structure: generous space above H2s (a full breath between sections), tighter space between a heading and its first paragraph (they belong together), and enough air around code blocks that they feel like exhibited artifacts, not inline interruptions.

The audio player, when present, should sit in the prose column's width — it's a companion to the reading, not a separate interface. It belongs where you'd put a sticky note: near the top, unobtrusive, reachable.

### 5. Material Quality

Every surface should feel like it has physical weight and texture, without literally simulating materials.

The page background carries the faintest warmth — not a texture image, but a color warm enough to feel like paper under good light. Surfaces (cards, code blocks, callouts) use subtle warm-gray backgrounds that feel like slightly different weights of the same stock, not floating panels. Borders, when used, should feel like score lines or folds — thin, warm, understated.

Shadows are minimal and warm-toned. No dramatic elevation or layered depth systems. If something casts a shadow, it's the small, soft shadow of a card sitting on a desk — barely there, suggesting just enough physicality. Code blocks should feel slightly inset, like a different material embedded in the page — a subtle background shift and perhaps a left-edge accent line in the terracotta/rust accent.

Nothing gleams. Nothing floats. Nothing blurs. The material vocabulary is: **paper, ink, wood, stone, iron**. Flat but not sterile. Physical but not skeuomorphic.

### 6. What This Is NOT

**Not cold or clinical.** No blue-grays, no pure white backgrounds, no thin light-weight fonts creating an airy sterile feel. This site has body heat.

**Not dark-hacker aesthetic.** No dark backgrounds with neon syntax highlighting, no terminal-green-on-black theatrics. Ken's work happens in daylight.

**Not "personal brand."** No logo-heavy headers, no consistent color-accent-as-identity system, no "building in public" performance aesthetic. The craft IS the brand. The writing IS the identity.

**Not corporate.** No card grids, no hero banners, no CTAs, no engagement patterns. This is a library, not a landing page.

**Not minimalist-to-barren.** Minimalism here means nothing wasted, not nothing present. The page should feel furnished and warm, not empty and austere.

**Not trendy.** No glassmorphism, no wild gradients, no animated mesh backgrounds, no oversized display type for its own sake. Every effect used in 2024-2026 that will look dated by 2028 should be avoided. The reference point is: will this page look as good in five years? Ten?

---

## Emotional Direction

**Primary feeling:** Quiet confidence with warmth
**Personality adjectives:** Crafted, warm, clear, honest, unhurried

**What readers should feel:**
- First impression: "Someone built this with care"
- During reading: "I can focus here — the page serves the writing"
- After reading: "This person knows what they're talking about, and I want to come back"

---

## Design Tokens Direction (For design-system-architect)

The following are aesthetic intentions, not final values. The design-system-architect should translate these into concrete CSS custom properties.

### Color Intent
- **Surface base:** Warm off-white, like heavy unbleached paper stock
- **Text primary:** Warm near-black, brown-black ink
- **Text secondary:** Warm mid-gray, stone undertone
- **Accent primary:** Muted terracotta/rust — fired earth, not bright red
- **Accent secondary:** Tarnished brass/dark gold — aged metal highlight
- **Code surface:** Slightly cooler warm-gray, like a different paper weight
- **Border/divider:** Warm light gray, barely there, like a score line

### Typography Intent
- **Prose (serif):** Source Serif 4 or equivalent transitional serif, 18-19px base, weight 400, line-height 1.7-1.75
- **Structure (sans):** Inter or equivalent humanist sans, weight 600 for headings, weight 400-500 for UI
- **Evidence (mono):** JetBrains Mono or equivalent, slightly smaller than prose (~0.9em)
- **Type scale:** ~1.25 ratio (Major Third), conservative — hierarchy through weight and family contrast, not dramatic size jumps

### Spatial Intent
- **Prose column:** ~720px max-width (~65ch at 18px serif)
- **Code breakout:** ~840px max-width
- **Paragraph spacing:** Generous (1.5em+)
- **Section spacing:** Very generous above H2 (3-4rem), tighter below (1-1.5rem)
- **Code block spacing:** Generous vertical margin (2-2.5rem), slight inset feel

### Shadow/Depth Intent
- **Minimal.** Warm-toned, soft, barely-there desk shadows only
- **Code blocks:** Subtle inset feel via background shift + left accent line
- **No elevation system.** Nothing floats.

### Corner Treatment
- **Subtle softness:** 4-6px radius on cards/code blocks — just enough to not feel sharp, not enough to feel "designed"
- **Rationale:** Workshop surfaces have worn edges, not machined radii

---

## Multi-Format Considerations

The warm palette and serif/sans pairing should translate to:
- **Podcast cover art:** Terracotta accent + warm near-black + the "Crash Test Dev" name in sans-serif
- **YouTube thumbnails:** Sans-serif headings at display weight, warm paper background, high contrast
- **Presentation slides:** Same color philosophy, sans-serif for slide content, serif for pull-quotes

The visual identity is the PALETTE + TYPOGRAPHY PAIRING, not a logo or mark.

---

## Evolution

**Last updated:** 2026-05-26
**Changes:** Initial creation from Ken's brief

This guide evolves as the site grows. Update when:
- Ken provides aesthetic feedback after seeing implementations
- New content types emerge (podcast, video, slides)
- Dark mode is eventually considered
- The site's audience shifts or expands