# DESIGN.md: haydengross.com

This file is the brand kit for haydengross.com. Every AI session that builds or edits the site reads it first. It follows the DESIGN.md convention (nine sections) so any AI coding agent can be pointed at it and produce pages that belong to the same site.

Owner: Hayden Gross. Version: 1.0, 2026-08-18. Companion resume uses the same accent and type logic.

## 1. Visual Theme and Atmosphere

Quiet, warm, exact. The site is a record, not a pitch. Warm paper background, near-black ink, one deep green accent used sparingly. Big serif display type set at calm sizes; a humanist sans for reading; a monospace for small labels and captions. Generous vertical space between sections and hairline rules instead of boxes. One animated element only: the knowledge-base graph. Everything else is still.

If a line of copy sounds impressive, cut it and let the fact carry it. If a component looks like a template, remove the decoration until it does not.

## 2. Color Palette and Roles

Light (default):

| Token | Value | Role |
|---|---|---|
| --paper | #FAF8F4 | page background |
| --paper-2 | #F3F0EA | framed panels, code, figure backgrounds |
| --ink | #14181C | headings, primary text, primary button fill |
| --ink-2 | #2B323A | body copy |
| --muted | #5B6470 | captions, secondary text, labels |
| --rule | #E4E0D8 | hairlines, borders |
| --rule-2 | #D6D1C7 | stronger borders, ghost button border |
| --accent | #0F5C4A | eyebrows, links inside prose, one emphasis per section, graph nodes |
| --accent-soft | #E6F0EC | accent tint for callouts (rare) |

Dark:

| Token | Value |
|---|---|
| --paper | #0F1214 |
| --paper-2 | #151A1D |
| --ink | #ECE8E1 |
| --ink-2 | #D3CEC5 |
| --muted | #98A1AA |
| --rule | #242A2F |
| --rule-2 | #30373D |
| --accent | #7FD1B4 |
| --accent-soft | #12251F |

Rules: text on paper meets WCAG AA (ink 15.5:1, ink-2 11.9:1, muted 5.4:1 on --paper). Accent is never used for body text. Never introduce a second hue. No gradients. No gold, no amber, no neon.

## 3. Typography Rules

- Display: Fraunces (variable), weight 400, optical size 96, letter-spacing -0.015em, line-height 1.05. Used for h1, h2, big numbers, and the lead sentence. Italic 400 for one emphasized phrase per page at most.
- Body: Inter, 17px, line-height 1.6, color --ink-2. Max measure 64ch.
- Labels and captions: system monospace, 11 to 13px, letter-spacing 0.06 to 0.12em, uppercase for eyebrows only.
- Scale: h1 clamp(40px, 6.2vw, 72px); h2 clamp(30px, 4vw, 46px); lead clamp(20px, 2.2vw, 26px); h3 19px semibold; small 14px; caption 13px.
- Numbers use Fraunces at display size with a smaller muted suffix (%, /100, M).
- No bold display type. No all-caps headings. No text shadows.

## 4. Component Stylings

- Buttons: pill, 12px by 20px, 15px semibold. Primary: --ink fill, --paper text. Ghost: transparent, --rule-2 border, --ink text. Hover lifts 1px. Never more than two buttons together.
- Cards: 1px --rule border, radius 10px, 22px padding, paper fill. Big display number top-left, h3, 14.5px muted description, small accent "Read". Hover: border to --rule-2, 2px lift, soft shadow.
- Number tiles: grid with shared 1px --rule borders, radius 10px on the outer frame only. Display number, then 14px muted label.
- Plain lists: no bullets; 1px --rule dividers; bold lead-in in --ink, rest in --ink-2.
- Eyebrow: mono 12px uppercase --accent, 14px below it.
- Framed figure: --paper-2 fill, 1px --rule, radius 14px, soft shadow; caption bar with mono text and a top rule.
- Callout (rare aside): --paper-2 fill, 1px --rule, 3px --accent left rule, radius 10px.
- Tags: mono 12px, pill, --rule-2 border, --muted text.
- Nav: sticky, 60px, translucent paper with blur, hairline bottom rule, brand in Fraunces 19px, links 14px muted.

## 5. Layout Principles

- Max content width 1120px, gutters clamp(20px, 4vw, 48px).
- Sections padded clamp(64px, 9vw, 120px) top and bottom, separated by a hairline rule.
- Two-column sections use a 5/7 split: short display heading left, prose or figure right. Collapse to one column under 860px.
- One idea per section. Heading, at most two paragraphs, then one component.
- Prose pages: single column, max 68ch, h2 in Fraunces 28px.

## 6. Depth and Elevation

Almost flat. Two levels only: the page, and framed figures or hovered cards, which get one soft shadow: 0 1px 2px rgba(20,24,28,.05), 0 18px 40px -24px rgba(20,24,28,.18). No inner shadows, no glass panels, no layered blurs except the sticky nav.

## 7. Do's and Don'ts

Do: write in first person, short sentences, numbers over adjectives; give every claim a date or a count; keep the accent to one job per screen; respect prefers-reduced-motion; keep pages fast (no frameworks, no heavy libraries).

Don't: em dashes; emojis; superlatives; quotes from executives or vendors; dollar figures for company spend (percentages only); private hostnames or IPs; family or friend names; partners or vendors named in a commercial relationship; stock photos; icons for their own sake; hero slogans; second accent colors; dark mode as an identity (it is a preference); anything addressed to a specific employer.

## 8. Responsive Behavior

- Breakpoints: 860px (grids to one column), 760px (nav collapses to a menu button; number tiles two-up).
- Type scales with clamp(); nothing below 14px except captions at 13px.
- Figures keep aspect via a fixed height clamp(360px, 52vw, 560px); labels reposition by percentage.
- Tables scroll inside their own container; the page never scrolls sideways.
- Touch targets at least 34px.

## 9. Agent Prompt Guide

Paste this with the file:

"Build the page using DESIGN.md. Use the tokens as CSS custom properties exactly as named. Fraunces for display, Inter for body, monospace for labels. Warm paper background, one green accent, hairline rules, no boxes unless the component list says so. First person, plain English, no em dashes, no superlatives, no dollar spend figures. Every case page follows: What it was, What I did, What it produced. Verify at 1440 and 390 wide, and check prefers-reduced-motion. If a design choice is not covered here, choose the quieter option."