# haydenbleasel.com — Design System ## 1. Visual Theme & Atmosphere Hayden Bleasel's personal site embodies a specific strain of minimalism: confident, typographic, and deliberately restrained. The canvas is pure white. The text is near-black. The margins are vast. Nothing competes for attention except the content itself. What elevates this beyond generic minimalism is the typographic pairing. The h1 uses Instrument Serif — an elegant, slightly quirky display serif with character — at a modest 38px. Everything else runs on a geometric sans. This single serif/sans split does enormous work: the name or hero line becomes a human signature, while the surrounding interface recedes to pure utility. It's a designer's portfolio that doesn't shout; it holds space. The color vocabulary is intentionally absent. No accent color was extracted. No brand hue asserts itself. The only color in the interactive states is a shift from medium-dark gray to near-black on hover — the gentlest possible signal that something is clickable. This is a design that trusts the reader. --- ## 2. Color Palette & Roles **Backgrounds** - Pure white `rgb(255, 255, 255)` — universal page background - Neutral-100 `--secondary` — subtle secondary surface (hover states, code blocks) **Text** - Near-black `lab(2.75381 0 0)` ≈ `#060606` — headings, primary content - Dark gray `lab(34.924 0 0)` ≈ `#4a4a4a` — body text, links at rest - Muted `--muted: neutral-600` — captions, secondary labels **Borders & Dividers** - Neutral-200 `lab(90.952 0 0)` ≈ `#e5e5e5` — universal border color - The same value appears consistently across all element borders **Buttons** - Near-black at 80% opacity `oklab(0.145 / 0.8)` — translucent dark fill - White text on dark button - Focus: opaque near-black **Hover States** - Links: `lab(34.924...)` (body gray) → `lab(2.75381...)` (near-black) — darkens without color change - No underlines, no color, no background fill — pure value shift What's absent: no accent color, no brand hue, no semantic colors (no green for success, no red for error). The palette is a grayscale system. --- ## 3. Typography Rules **Instrument Serif** — hero/h1 only - `38px` / `400` weight / `45.6px` line-height / `-0.24px` letter-spacing - Used for the name or primary headline — where personality is needed - Normal weight (not bold) — elegance over emphasis **Sans (custom)** — the system font for everything else - h2: `16px` / `500` / `24px` — medium weight section labels - Body/paragraphs: `16px` / `400` / `26px` — slightly open line-height for readability - Links: `16px` / `400` / `26px` — no visual differentiation from body other than context - Buttons: `16px` / `400` / `24px` - Inputs: `16px` / `400` / `26px` - Letter-spacing: `-0.24px` globally — a subtle tightening applied to every element The `-0.24px` letter-spacing is the system's quiet signature: it makes the sans feel more premium without being visibly compressed. **What's absent:** no monospace, no bold body text, no uppercase labels, no size variation below 16px in the primary content hierarchy. --- ## 4. Component Stylings **Navigation** - Transparent background, no border, `24px` gap between items - Links shift from body gray `lab(34.924...)` to near-black on hover — imperceptible on fast glance **Buttons** - Translucent near-black `oklab(0.145 / 0.8)` — feels like a dark glass button - Pill-shaped via extreme border radius (`3.35544e+07px` — effectively `border-radius: 9999px`) - White text - Focus changes to fully opaque near-black — accessibility-friendly **Content Links** - No underline assumed, no background — pure typography - Hover: color darkens from `#4a4a4a` to `#060606` **Sections** - `0px` padding, `24px` gap between internal elements — sections are tight containers - Main layout: `128px 16px` padding, `0 304px` margin — creates a centered narrow column **Borders** - All borders: `lab(90.952 0 0)` ≈ `#e5e5e5` — neutral-200, consistently light - `6px` radius on small components (non-pill elements) --- ## 5. Layout Principles The layout is a study in generous whitespace and tight column control. The `main` element uses `margin: 0 304px` — a large fixed margin that creates an extremely narrow reading column at desktop. This is closer to a blog or long-form reading layout than a portfolio grid. Combined with `padding: 128px 16px`, the content sits far from all edges. The vertical breathing room (128px top) is exceptional — the page opens with air before content appears. Sections have `24px` gap between them: not tight, not loose, just right for a vertical narrative flow. Only one breakpoint at `600px` is visible in the extracted data — suggesting the design collapses cleanly at mobile with minimal intermediate states. The `304px` margin would need to collapse to `0` or `16px` at that breakpoint. --- ## 6. Depth & Elevation There are no shadows. No extracted shadow values, no box-shadow tokens. The design achieves separation through whitespace, typography scale, and color steps alone. No surface elevation, no card lift, no glass morphism. The one button has a translucent fill (`oklab(0.145 / 0.8)`) that creates implicit depth — it looks slightly like a glass layer over white — but this is the extent of dimensional play. The `border: #e5e5e5` on elements does light work to separate sections. No inset shadows, no outer glows. The absence of elevation is itself the design statement: everything is on the same plane, readable, equal. --- ## 7. Do's and Don'ts **Do:** - Use pure white `#ffffff` as the only background — no off-whites, no gray - Apply Instrument Serif exclusively to the primary name/hero heading - Set `-0.24px` letter-spacing globally on the sans — it's the system's tonal signature - Give the layout generous margins — the narrow reading column is intentional - Keep hover states as value-only shifts: gray → near-black, no color - Use `border-radius: 9999px` for pill buttons **Don't:** - Don't introduce an accent color — the monochromatic palette is the point - Don't reduce the 128px top padding — the opening air is essential to the atmosphere - Don't add shadows or elevation — the design is intentionally flat - Don't use Instrument Serif below 32px — it reads as decoration, not signature, at small sizes - Don't add border-bottom underlines to links — the color shift alone signals interactivity - Don't add more than two type scales — the 38px + 16px system is complete --- ## 8. Responsive Behavior A single breakpoint at `600px` is all that's needed — the layout is so simple that it requires minimal adjustment. At mobile, the `margin: 0 304px` on main collapses to full-width with `padding: 16px`. The `128px` top padding likely reduces to `64px` or `80px`. The narrow reading column that feels generous at desktop becomes a natural full-width column at mobile — no content reflow needed. The single CTA button (pill shape) works at any width. Typography stays at `16px`; Instrument Serif at `38px` may scale to `28–32px` on mobile. --- ## 9. Agent Prompt Guide Use this block when prompting an AI to generate UI in the style of haydenbleasel.com: ``` Design a minimal personal portfolio with pure white background (#ffffff) and no accent colors. Text hierarchy uses two values: near-black (#060606) for headings and #4a4a4a for body. Apply -0.24px letter-spacing globally. Hero heading uses Instrument Serif (or a similar editorial serif) at 38px/400 weight. All other text uses a geometric sans-serif (or system sans) at 16px. Layout is a centered narrow column with 128px vertical top padding and generous side margins. No shadows, no elevation, no card backgrounds. Borders are neutral-200 (#e5e5e5). Hover links darken from body gray to near-black — no color change. Primary button is a pill shape with translucent near-black fill and white text. One breakpoint at 600px. The design is about whitespace and typographic restraint. ``` --- *Generated by Sparkbites — extracted from live CSS analysis*