# DESIGN.md — brendanfitzpatrick.club A working reference to the design system underneath this site. Useful for: future-me coming back to edit, anyone who forks the repo, and AI agents asked to inspect or extend the design. The companion file [`/llm.txt`](/llm.txt) describes Brendan A. Fitzpatrick the candidate. This file describes the design. --- ## The shape of the site A static HTML/CSS/vanilla-JS portfolio. No framework, no build step, ~13 pages plus an `llm.txt` and a one-page resume HTML that exports to PDF. The publish directory is `site/`. Hosting is Cloudflare Pages. Pages: `index.html` · `about.html` · `work.html` · `recognition.html` · `404.html` · `projects/{platform-next, platform-unification, partner-center-sell, discover-mobile, hot-dougs, static, loom, emojio}.html` · `resume-source.html` · `og-source.html` --- ## Palette All tokens live in `:root` at the top of `css/style.css`. They're paired by intent, not just hue. | Token | Hex | Used for | |---|---|---| | `--navy` | `#04123f` | Primary brand surface (hero, footer, section-dark); all headings | | `--navy-2` | `#0a1a55` | Hover deepening on dark CTAs | | `--ink` | `#111a36` | Default body text | | `--ink-soft` | `#2c3653` | Secondary body (project ledes, prose paragraphs) | | `--muted` | `#5a647f` | Eyebrow text, captions, meta lines | | `--paper` | `#f5f6fb` | Default page background | | `--paper-2` | `#ebeff7` | Soft section background; card-media default | | `--paper-3` | `#ffffff` | Cards, modals, contrast surfaces | | `--rule` | `#d6dceb` | Borders, dividers, card edges | | `--rule-soft` | `#e6ebf4` | Lower-contrast dividers (award list, beliefs) | | `--accent` | `#2c5dd6` | Links, P→I→S accents, focus ring | | `--accent-2` | `#1f48b8` | Link hover, button hover | | `--accent-soft` | `#d6e1fb` | Badge fills, soft gradient accents | Navy is intentionally warmer than IBM blue (`#0f62fe`) and richer than pure black-blue (`#000d3d`, the original). The accent is a touch darker than the source PDF's blue so that small-text links clear AA contrast on white. --- ## Typography Two faces from Google Fonts: **IBM Plex Serif** (headings, project hero ledes, italicized asides) and **IBM Plex Sans** (UI, eyebrows, meta, buttons, code-adjacent micro-copy). Plex was chosen because Brendan worked inside the IBM Cloud design system for a decade — it's literal, not arbitrary. ### Body `18px / 1.55 / Plex Serif`, with `font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "onum" 1` and `font-optical-sizing: auto`. `hanging-punctuation: first` so opening quotes hang into the margin. ### Headings | Heading | clamp | line-height | letter-spacing | |---|---|---|---| | `h1` | `2rem → 6vw → 4.6rem` (mobile floor 1.7rem) | `1.04` | `-0.022em` | | `h2` | `1.6rem → 3.6vw → 2.85rem` | `1.10` | `-0.018em` | | `h3` | `1.18rem → 2vw → 1.55rem` | `1.22` | `-0.012em` | All headings: `text-wrap: balance`, `overflow-wrap: break-word`, `font-feature-settings` including `lnum 1` for true lining numerals. ### Eyebrow + meta (Plex Sans) Eyebrows: `0.72rem / 500 / 0.18em tracking / uppercase / --muted`. Meta lines (captions, status lines, project-when): `0.78–0.86rem`, often with tabular numerals where numbers belong. ### Prose links Animated bottom-edge gradient (not a static `border-bottom`) so the underline transition feels deliberate. --- ## The Venn mark Three overlapping equilateral circles, radius `45` on a `200×200` viewBox, centers at `(100, 70)`, `(75, 113.3)`, `(125, 113.3)`. The central Reuleaux-shaped intersection is filled with a hatch pattern at 45° — that's the brand signature. Source: the cover Brendan made for his 2022 IBM Design Principal portfolio. The site treats it as the logo equivalent. It appears in the nav (28px, stroked), the hero (large decorative, animated gentle drift via `@keyframes ventle`), the favicon, the OG share image, the 404 hero, and the Platform.next card thumbnail. --- ## Component patterns ### Card (`.card`) Default white card with `--rule` border, `--radius` (8px), `--shadow-md` lift on hover, image-scale on `card-media` children, accent-tinted border-color on hover. `.card.is-featured` adds an `accent-soft` gradient background and accent-tinted border. On the indie product cards with saturated logos, the soft drop shadow gets absorbed by the bright color — those use a `box-shadow: 0 0 0 1px var(--navy)` ring on hover instead. ### Card media variants The top-of-card image slot supports four variants: - **default** — full-bleed photo or screen with `object-fit: cover`, scales 1.04 on parent hover. - **`.card-media--logo`** — flat-color background, padded logo art (Static's S, Loom's "1"). - **`.card-media--type`** — typographic title card, used where no strong photo exists (Partner Center, Catalog, IBM Cloud TV, Personal Playbacks). Soft gradient bg, two short accent lines at top-left and bottom-right corners, project name centered in serif. - **`.card-media--ink`** — navy background with radial-gradient glow, used for the Platform.next Venn card. ### AI-assisted badge (`.ai-badge`) Outlined pill (not filled) so it reads as a tag, not a sticker. Hover transitions to filled (`accent-soft` background, accent border, accent-2 text). The `.is-corner` variant absolute-positions it top-right of a card. The tooltip uses pure CSS hover/focus + a JS `is-active` toggle for touch. ### P→I→S blocks (`.pis-block`) Three-column grid on project pages. Each column has a 2px navy top rule with a 36px accent overlay (the brand motif of `navy` + `accent` together). Heading is sans-serif, uppercase, accent-colored — clearly a label, not a heading proper. ### Throughlines + Beliefs Both use rule-top + accent overlay (same motif). Throughlines are three icon-lead h3s in a row. Beliefs are a 2-column rule-separated list — title on the left, expansion on the right, single-column on mobile. ### Modal (`.modal-backdrop` + `.modal`) Used for the "Working with AI?" feature. Backdrop blur, focus trap, ESC + click-out close, restore focus to trigger on close. The preview pane is `
` with `--mono` typography. The modal also has tabs (this file vs `llm.txt`).

### Buttons

`.btn-primary` (white-on-navy), `.btn-ghost` (outlined for dark sections), `.btn-dark` (navy-on-light). Press effect is `translateY(1px)` on `:active`, ~1px shadow on primary so it looks slightly raised. Transitions use `--ease`.

### Availability pill

Mint-tinted, with a pulsing dot via `@keyframes pulse`. Respects `prefers-reduced-motion`.

---

## Grid + breakpoints

| Token | Value |
|---|---|
| `--grid` | `1100px` (default `.wrap` max-width) |
| `--grid-wide` | `1340px` (nav, footer, full-bleed sections) |
| Wrap padding | `24px` (sides) |

| Breakpoint | What changes |
|---|---|
| ≤ 860px | Split sections collapse to single column |
| ≤ 720px | Nav links collapse behind hamburger toggle |
| ≤ 600px | h1/h2/h3 floors drop; hero padding tightens; Venn deco shrinks; metric/card padding tightens |
| ≤ 480px | Nav brand text hides (icon only); AI brief trigger collapses to icon-only |

`overflow-x: clip` on `html` and `body` as a safety net against any overflowing absolutely-positioned decoration.

---

## Motion

Tokens: `--ease` (`cubic-bezier(0.4, 0, 0.2, 1)`, standard material-style) and `--ease-out` (`cubic-bezier(0.16, 1, 0.3, 1)`, soft-landing).

Animations: hero Venn drift (`@keyframes ventle`, 18s), availability dot pulse (`@keyframes pulse`, 2.4s).

All animations are gated by `@media (prefers-reduced-motion: reduce)` — set to `0.01ms` duration globally, including page scroll behavior.

---

## Non-obvious decisions

- **`text-wrap: balance` on every heading.** Headings should break aesthetically, not at whatever word the line happens to end on. Negligible perf cost, large legibility win.
- **Navy `#04123f` rather than pure IBM `#0f62fe`.** The site is influenced by IBM Plex but isn't an IBM artifact. The warmer, deeper navy reads as editorial; pure IBM blue reads as corporate.
- **AI badge has a soft fill.** Tinted with the accent at low opacity so the disclosure reads at a glance without overpowering the card content.
- **Card hover swaps shadow for ring on saturated cards.** Drop shadow gets absorbed by magenta/pink backgrounds. A 1px navy ring is the cleanest editorial lift.
- **PDF-page-render thumbnails were replaced with typographic title cards** where the source screenshot read as visual noise at thumbnail size. PUP's dog logo stays (iconic); Catalog's catalog screen got replaced with a serif "Catalog" title card.
- **Smart quotes + em-dashes were a manual sweep** via a Python regex pass on text nodes only (skipping HTML attributes and ``/`