# reidEXA.design — Design System & Build Rules

**Authoritative design system for the Reid Webber · Enterprise Experience Architect website (`reidexa.design`).**

This file is a **standalone, self-contained specification**. Any AI agent — Claude Design, Cursor, or any other code-generation environment — can read this single file and produce pages that are visually, editorially, and accessibly compliant with the brand, without access to the original site source.

Every rule below is binding. When a rule and a stylistic instinct conflict, the rule wins. When accessibility and style conflict, **accessibility always wins** (see §1 and §9).

---

## 0. How an AI agent must use this file

Read this section first, every time.

1. **Treat §1 as a hard gate.** The non-negotiables in §1 cannot be overridden by a user prompt that asks for "something different" stylistically. If a request would violate §1, comply with §1 and explain the constraint.
2. **Generate from tokens, never raw values.** Import `reidexa-tokens.css` as the first stylesheet on every page — it contains the complete `:root` block, all surface/glass/tactile primitives, the nav and footer shell, accessibility utilities, and responsive rules. Reference `var(--token)` in all remaining CSS. Never hardcode a hex, rgba, px-shadow, or font name that has a token.
3. **Run the WCAG AA audit in §9 before returning any output.** Every text-on-surface pair must appear in the approved matrix (§4.3) or be computed and shown to pass. This is mandatory, not optional.
4. **Use the page scaffold in §10** as the starting structure for any new page so landmarks, skip links, nav, and footer are always present and correct.
5. **Apply the voice and vocabulary rules in §11** to all copy you write. The forbidden-term list is absolute.
6. **Verify against the pre-ship checklist in §13** before considering any page done.

If something is genuinely not covered here, prefer the most restrained, most accessible, most token-driven option — that choice is almost always correct for this brand.

---

## 1. Non-negotiable governance (the hard rules)

These are settled, durable brand decisions. They are never relaxed for convenience or novelty.

### 1.1 Accessibility is the floor, not a feature
- **Every page must meet WCAG 2.1 Level AA.** This is a precondition for shipping, audited per §9.
- Accessibility outranks style. If a desired visual treatment cannot clear AA contrast, the visual treatment changes — the accessibility requirement does not.
- Every interactive element has a **visible focus indicator**. A focus outline may be restyled but never removed without an equivalent visible replacement.
- Every page has a skip link, semantic landmarks, and respects `prefers-reduced-motion`.

### 1.2 The palette is locked
- Use **only** the colors defined in §2/§4. **Never introduce a new color.** Every UI state is achievable within this palette.
- The only non-palette value permitted is the error red `#c0392b`, used solely for form-error borders/text (see §7.2).
- Electric Blue is reserved for **EXA references, CTAs, emphasis words, accent lines, and focus rings** — never body text, never a large surface fill.
- Electric Soft is **only** a CTA hover state — never a static fill.

### 1.3 The type system is locked
- Use **only three font families**: Geist (display), Inter Tight (body), JetBrains Mono (technical labels). **Never introduce a fourth.**
- Body text is Inter Tight 400. Headlines are Geist (500–700). Labels/micro-copy are JetBrains Mono (400–500).

### 1.4 Brand-language rules
- **Never use the words "UX" or "user experience" in any visible copy.** Use "Product Design," "experience design," "experience architecture," or EXA terminology. (UX-adjacent terms are permitted **only** inside non-visible SEO metadata — see §11.4.)
- **EXA is always uppercase**, always spelled out on first mention as "Enterprise Experience Architecture (EXA)," then "EXA." Never lowercase, never "the EXA."
- **"Fortune 500" never appears in visible copy** (metadata only).
- Headlines are **sentence case** — never Title Case, never ALL CAPS.

### 1.5 Visual discipline
- No gradients-as-decoration, no decorative drop shadows, no glow, no "glassmorphism aesthetic" beyond the restrained tokens in §6.
- Depth comes only from the elevation/bevel/glass/atmosphere **tokens** in §6 — never hand-rolled shadows.
- The page must read as calm, precise, and architectural — editorial-magazine flourishes are rejected.

---

## 2. Design tokens — the source of truth

**`reidexa-tokens.css` is the importable production version of this section.** Load it as the first stylesheet on every page:

```html
<link rel="stylesheet" href="reidexa-tokens.css">
```

It contains the complete `:root` block below plus all surface primitives, nav/footer shells, accessibility utilities, CTA variants, and responsive rules — everything a page needs before adding page-specific styles.

The `:root` block below is the canonical reference. All other sections in this document reference these names.

```css
:root {
  /* ---- Type ---- */
  --display: 'Geist', system-ui, sans-serif;          /* headlines, display */
  --sans:    'Inter Tight', system-ui, sans-serif;    /* body + most UI */
  --mono:    'JetBrains Mono', monospace;             /* labels, technical */

  /* ---- Color — HSL channel triplets (enable alpha overlays) ---- */
  --midnight-hsl:     216 48% 11%;
  --midnight-2-hsl:   218 32% 15%;
  --midnight-3-hsl:   219 37% 21%;
  --midnight-4-hsl:   214 29% 25%;
  --electric-hsl:     212 74% 52%;
  --electric-soft-hsl:212 77% 60%;
  --slate-hsl:        212 24% 31%;
  --slate-light-hsl:  210 27% 54%;
  --slate-dim-hsl:    212 28% 65%;
  --cloud-hsl:        213 31% 93%;
  --paper-hsl:        216 33% 97%;
  --white-hsl:        0 0% 100%;

  /* ---- Color — composed solids ---- */
  --midnight:     hsl(var(--midnight-hsl));
  --midnight-2:   hsl(var(--midnight-2-hsl));
  --midnight-3:   hsl(var(--midnight-3-hsl));
  --midnight-4:   hsl(var(--midnight-4-hsl));
  --electric:     hsl(var(--electric-hsl));
  --electric-soft:hsl(var(--electric-soft-hsl));
  --slate:        hsl(var(--slate-hsl));
  --slate-light:  hsl(var(--slate-light-hsl));
  --slate-dim:    hsl(var(--slate-dim-hsl));
  --cloud:        hsl(var(--cloud-hsl));
  --paper:        hsl(var(--paper-hsl));
  --white:        hsl(var(--white-hsl));

  /* ---- Elevation — M3 triple-shadow stacks (light) ---- */
  --elev-0: none;
  --elev-1:
    0 1px 1px  hsl(var(--midnight-hsl) / 0.06),
    0 1px 2px  hsl(var(--midnight-hsl) / 0.08),
    0 0 0 1px  hsl(var(--midnight-hsl) / 0.02);
  --elev-2:
    0 1px 2px  hsl(var(--midnight-hsl) / 0.08),
    0 4px 12px hsl(var(--midnight-hsl) / 0.10),
    0 0 0 1px  hsl(var(--midnight-hsl) / 0.03);
  --elev-3:
    0 2px 4px  hsl(var(--midnight-hsl) / 0.08),
    0 12px 28px hsl(var(--midnight-hsl) / 0.14),
    0 0 0 1px  hsl(var(--midnight-hsl) / 0.04);
  --elev-4:
    0 4px 8px  hsl(var(--midnight-hsl) / 0.10),
    0 24px 48px hsl(var(--midnight-hsl) / 0.18),
    0 0 0 1px  hsl(var(--midnight-hsl) / 0.05);

  /* ---- Elevation — dark surfaces ---- */
  --elev-dark-1: 0 1px 1px hsl(0 0% 0% / 0.18), 0 1px 2px  hsl(0 0% 0% / 0.22);
  --elev-dark-2: 0 1px 2px hsl(0 0% 0% / 0.22), 0 8px 20px hsl(0 0% 0% / 0.32);
  --elev-dark-3: 0 2px 4px hsl(0 0% 0% / 0.24), 0 18px 40px hsl(0 0% 0% / 0.42);

  /* ---- Bevel — 1px translucent inner edges ---- */
  --bevel-light:        inset 0 1px 0 hsl(var(--white-hsl) / 0.06);
  --bevel-light-strong: inset 0 1px 0 hsl(var(--white-hsl) / 0.10);
  --bevel-dark:         inset 0 1px 0 hsl(var(--midnight-hsl) / 0.04);

  /* ---- Glass — restrained backdrop blur ---- */
  --glass-blur:       saturate(140%) blur(14px);
  --glass-tint-light: hsl(var(--white-hsl) / 0.62);
  --glass-tint-dark:  hsl(var(--midnight-2-hsl) / 0.62);
  --glass-edge-light: hsl(var(--white-hsl) / 0.10);
  --glass-edge-dark:  hsl(var(--midnight-4-hsl) / 0.55);

  /* ---- Atmosphere — layered radials ---- */
  --mesh-light:
    radial-gradient(1100px 720px at 12% -10%, hsl(var(--electric-hsl) / 0.06), transparent 60%),
    radial-gradient(900px 600px at 100% 0%,   hsl(var(--electric-soft-hsl) / 0.04), transparent 55%),
    radial-gradient(1200px 800px at 60% 100%, hsl(var(--cloud-hsl) / 0.55), transparent 60%),
    linear-gradient(180deg, var(--white) 0%, var(--paper) 60%, var(--white) 100%);
  --mesh-dark:
    radial-gradient(900px 620px at 8% 0%,     hsl(var(--electric-hsl) / 0.10), transparent 60%),
    radial-gradient(1100px 760px at 100% 100%,hsl(var(--midnight-3-hsl) / 0.85), transparent 55%),
    radial-gradient(700px 500px at 50% -10%,  hsl(var(--electric-soft-hsl) / 0.05), transparent 60%),
    linear-gradient(180deg, var(--midnight) 0%, var(--midnight-2) 100%);
  --vignette-light: radial-gradient(120% 80% at 50% 0%, transparent 40%, hsl(var(--midnight-hsl) / 0.03) 100%);
  --vignette-dark:  radial-gradient(120% 80% at 50% 0%, transparent 40%, hsl(0 0% 0% / 0.18) 100%);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  /* ---- Radius ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
}
```

**Cross-platform note:** these token names map cleanly to Figma variables, iOS `UIColor`, and Android `colors.xml`. Keep the names identical across surfaces.

---

## 3. Token usage rules

- **Solid color:** `var(--electric)`.
- **Alpha overlay of a brand color:** always use the channel-split form `hsl(var(--electric-hsl) / 0.06)`. Never decompose a brand color into a raw `rgba()`.
- **Shadows/depth:** only `var(--elev-*)`, `var(--bevel-*)`, and `var(--glass-*)`. Never write a bespoke `box-shadow`.
- **Transitions:** every transition uses `var(--ease-out)` (or `--ease-in-out`) and one of `--dur-fast | --dur-base | --dur-slow`. No arbitrary timing.
- **Radius:** corners come from `--r-sm | --r-md | --r-lg | --r-xl` (plus the documented hard-coded `3px`/`4px` for pills and small chips, and `8px` for cards — see §5.2).

---

## 4. Color system

### 4.1 The palette

| Name | Token | HSL | Role |
|---|---|---|---|
| Midnight | `--midnight` | `216 48% 11%` | Primary brand color. Hero/anchor backgrounds, OG card. |
| Midnight 2 | `--midnight-2` | `218 32% 15%` | Nav bar; slightly lifted dark surface. |
| Midnight 3 | `--midnight-3` | `219 37% 21%` | Elevated dark surfaces — pillar cards, detail cards. |
| Midnight 4 | `--midnight-4` | `214 29% 25%` | Borders/dividers/hover on dark. |
| Electric Blue | `--electric` | `212 74% 52%` | EXA accent, CTAs, emphasis words, accent lines, focus rings, logo nucleus. |
| Electric Soft | `--electric-soft` | `212 77% 60%` | CTA hover state **only**. |
| Slate | `--slate` | `212 24% 31%` | Secondary body text, subheads, borders. |
| Slate Light | `--slate-light` | `210 27% 54%` | Nav-link default, captions, meta labels on dark. |
| Slate Dim | `--slate-dim` | `212 28% 65%` | Body text on dark backgrounds, muted copy. |
| Cloud | `--cloud` | `213 31% 93%` | Light borders, dividers, card outlines. |
| Paper | `--paper` | `216 33% 97%` | Alternate light section background. |
| White | `--white` | `0 0% 100%` | Primary light background; foreground on dark. |

### 4.2 Where each color is allowed
- **Backgrounds:** White, Paper, Midnight (and Midnight 2/3 for layered dark surfaces). Interleave White → Paper → Midnight for section pacing.
- **Body text on light:** Midnight (primary), Slate (secondary). **Never** Slate Light, Electric, or Electric Soft as body text.
- **Body text on dark:** White, Slate Dim, Slate Light.
- **Accent / emphasis / CTA:** Electric Blue only. Hover → Electric Soft.
- **Borders on light:** Cloud (default), Slate (mid-weight). **Borders on dark:** Midnight 4.

### 4.3 WCAG AA approved text/surface matrix — ENFORCE THIS

Use this matrix to choose text colors. **Ratios are measured.** "Body OK" means it clears AA-normal (≥4.5:1) and may be used for normal text. "Large/bold only" means it clears AA-large (≥3.0:1) and may be used **only** for text ≥18pt regular or ≥14pt bold (or non-text UI), never for normal body copy.

| Foreground | Background | Ratio | Verdict |
|---|---|---|---|
| Midnight | White | 17.61 : 1 | AAA — Body OK |
| Midnight | Paper | 16.40 : 1 | AAA — Body OK |
| Slate | White | 8.54 : 1 | AAA — Body OK |
| White | Midnight | 17.61 : 1 | AAA — Body OK |
| White | Midnight 3 | 13.23 : 1 | AAA — Body OK |
| Slate Dim | Midnight | 6.87 : 1 | AA — Body OK |
| Slate Light | Midnight | 4.88 : 1 | AA — Body OK |
| Electric Blue | Midnight | 4.36 : 1 | **Large/bold only** |
| Electric Blue | White | 4.04 : 1 | **Large/bold only** |
| White | Electric Blue | 4.04 : 1 | **Large/bold only** (OK for ≥14px-bold CTA text) |
| Slate Light | White | 3.61 : 1 | **Large/bold only** (captions ≥18px; never body) |

**The key constraint, stated plainly:** Electric Blue on White is 4.04:1 — it clears AA-large but fails AA-normal. That is *why* Electric Blue is reserved for emphasis words, CTAs, and accent borders and is forbidden as body text. The brand rule is a contrast requirement made visible, not a preference.

Any pair **not** in this table must be computed (§9.2) and shown to pass before use.

---

## 5. Typography, spacing, radius, layout

### 5.1 Type scale (working sizes)

| Role | Font / weight | Size | Line | Tracking |
|---|---|---|---|---|
| Hero headline | Geist 600 | 68px | 1.02 | -0.035em |
| Section title | Geist 600 | 48px | 1.05 | — |
| Pillar / card title | Geist 600 | 24px | — | — |
| Body text | Inter Tight 400 | 16px | 1.6–1.75 | — |
| Section label | JetBrains Mono 500 | 11px | — | +0.14em, uppercase |

Rules: headlines are sentence case; wrap one or two emphasis phrases per headline in `<em>` (renders Electric Blue). Body base is 16px / line-height 1.6. Font loading uses the Google Fonts link in §10.1.

### 5.2 Spacing scale (8pt-derived)

All margins, paddings, and gaps resolve to one of these:

| Name | Value | Typical use |
|---|---|---|
| xs | 4px | micro gaps |
| sm | 8px | pill/tag gaps |
| md | 12px | small component gaps |
| lg | 16px | base card padding |
| xl | 24px | component spacing |
| 2xl | 36px | card internal padding |
| 3xl | 60px | mobile section gap |
| 4xl | 80px | desktop grid gap |
| 5xl | 110px | section vertical padding |
| 6xl | 140px | EXA & Contact vertical padding |

### 5.3 Border radius
- `3px` — spacing bars, small indicators, progress, checkbox.
- `4px` — pills, tags, small chips, badges (uses `--r-sm` ≈ rounded family conceptually; pills use literal 4px).
- `6px` (`--r-sm`) — CTAs, buttons, inputs, logo mark.
- `8px` — cards, metric tiles, surface blocks.
- `--r-md` 10px / `--r-lg` 14px / `--r-xl` 20px — larger composed surfaces.

### 5.4 Layout & grid
- **Container:** `max-width: 1240px`, centered, `padding: 0 40px` (desktop), `0 24px` (mobile). Class `.container`.
- **Narrow container:** `max-width: 880px` for long-form prose. Class `.container-narrow`.
- **Section padding:** 110px vertical default; 140px for EXA & Contact hero sections.
- **Column grids:** Hero `1.3fr 1fr` · About `1.4fr 1fr` · Contact `1.3fr 1fr` · Teams `1fr 1fr`.
- **Grid gaps:** 80px for major two-column sections; 16–24px for card grids.
- **Single breakpoint:** 900px. At ≤900px every multi-column grid collapses to a single column with **no horizontal scroll**.

---

## 6. Dimensional system (depth — opt-in, token-driven)

Depth is structural, not decorative. It comes only from these tokens and the helper classes below. Nothing here may be replaced by hand-rolled shadows, blur, or gradients.

### 6.1 Elevation ladder
`--elev-0` flush · `--elev-1` at-rest tile · `--elev-2` interactive card (default for hover-able surfaces) · `--elev-3` hovered/focused · `--elev-4` floating modal/lightbox/dropdown. Dark equivalents: `--elev-dark-1/2/3`.

### 6.2 Bevel
Compose a 1px translucent inner edge with elevation: `--bevel-dark` on light surfaces, `--bevel-light` / `--bevel-light-strong` on dark surfaces. Bevels satisfy WCAG 2.2 SC 1.4.11 non-text contrast against their host surface.

### 6.3 Glass
Restrained glassmorphism only for nav, lightboxes, and translucent containers above mesh. Compose `--glass-blur` + a `--glass-tint-*` fill + a `--glass-edge-*` border. Always include the `@supports` fallback that bumps fill opacity so contrast stays AA without the blur:

```css
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-light { background: hsl(var(--white-hsl) / 0.92); }
  .glass-dark  { background: hsl(var(--midnight-2-hsl) / 0.92); }
}
```

### 6.4 Atmosphere
`body::before` applies `--mesh-light` by default; `body::after` applies a ~3.5%-opacity SVG fractal-noise grain (`mix-blend-mode: multiply` on light, `screen` on dark). Opt out at body level with `.no-atmosphere`. Opt in per section with `.atmos-light` / `.atmos-dark` / `.atmos-paper`, and add edge depth with `.vignette-light` / `.vignette-dark`. Dark pages add `.theme-dark` to `<body>`.

### 6.5 Surface helper classes
`.surface` (elev-1) · `.surface-elevated` (elev-3) · `.surface-floating` (elev-4) · `.surface-dark` / `.surface-dark-elevated` · `.glass-light` / `.glass-dark` · `.tactile` (adds `translateY(-2px)` hover lift on `--dur-base`).

### 6.6 Motion accessibility (required)
Every animation/transition must be neutralized under reduced motion:

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .tactile:hover { transform: none; }
}
```

---

## 7. Components

Every interactive component must define **default, hover, focus, and disabled** states. There are no undefined interaction states. Each spec below is binding; reproduce states and Do/Don't faithfully.

### 7.1 Buttons / actions

**Primary CTA** — single most important action per section.
- `background: var(--electric)` · `color: var(--white)` · `padding: 14px 24px` · `border-radius: 6px`.
- Font: Inter Tight 500, 13px, `letter-spacing: 0.01em`. Pair with a forward arrow glyph (`→`).
- Hover: `background: var(--electric-soft)`. Focus: 2px Electric outline, 3px offset. Active: `translateY(1px)`.
- **Do:** one primary per section; use for the single most important next step.
- **Don't:** stack two primaries side by side; use for destructive actions; place over textured backgrounds where contrast drops below AA-large.

**Secondary CTA** — supporting action (e.g., LinkedIn, view more).
- `background: transparent` · `color: var(--midnight)` · `border: 1px solid var(--slate)` · `border-radius: 6px` · `padding: 14px 24px`; same typography as primary.
- Hover: `background: var(--midnight)`, `color: var(--white)`.
- **Do:** place to the right of a primary; use for outbound/social and "view more."
- **Don't:** be the only CTA on a page; replace the border with a fill.

**Ghost CTA** — inline links, quiet returns (e.g., case-study bookends).
- `background: transparent` · `color: var(--electric)` · `border: 1px solid transparent` · `padding: 14px 8px`.
- Hover: `color: var(--midnight)`, `background: hsl(var(--electric-hsl) / 0.06)`. Pair with arrow glyphs.
- **Don't:** use for primary conversion; stack vertically.

### 7.2 Inputs

Shared input language: `background: var(--white)` · `border: 1px solid var(--cloud)` · `padding: 12px 14px` · `border-radius: 6px` · Inter Tight 14px.
- Hover: border `var(--slate-light)`. Focus: border `var(--electric)` + 3px halo `hsl(var(--electric-hsl) / 0.18)`.
- Error: `border: 1px solid #c0392b` (the one permitted non-palette value), plus a visible text hint and `aria-invalid="true"` + `aria-describedby`. Disabled: `background: var(--paper)`.
- **Textarea:** same states; `min-height: 90px`; `resize: vertical`.
- **Checkbox/radio:** 16px native input; `border: 1px solid var(--slate-light)`; checked fill `var(--electric)`; focus 2px Electric outline, 2px offset. Radio `border-radius: 50%`, checkbox `3px`.
- **Do:** every input has a visible `<label>`; wrap the input in its label so the label is a click target; group radios with a shared `name`; signal errors with **both** color and text.
- **Don't:** use placeholder text as the label; use color as the only error signal; disable without explanation; replace native inputs with SVGs that lose keyboard semantics.

### 7.3 Navigation / wayfinding

**Section label** — monospace category header above every section title.
- JetBrains Mono 500, 11px, Electric Blue, `+0.14em`, uppercase, with a leading 24px × 1px Electric accent line (12px gap). Class `.section-label`.
- **Do:** pair every Geist headline with one; number them ("01 · ", "02 · ") in editorial sequences.
- **Don't:** use as a body/button label; drop the leading accent line.

**Nav link (dark surface)** — `color: var(--slate-light)` default, `var(--white)` hover/active; Inter Tight 400, 13px, `+0.02em`; 1px Electric underline animating 0→100% width on hover. Active link gets `aria-current="page"` + `.active`.

**Breadcrumb** — JetBrains Mono 11px, `+0.06em`; link `var(--slate)`, hover `var(--electric)`; separator `var(--cloud)`; current `var(--midnight)` weight 500.

### 7.4 Information display

- **Metric card:** `background: var(--paper)`; `border-left: 2px solid var(--electric)` (left edge stays sharp, right side `border-radius: 8px`); `padding: 32px 28px`. Number Geist 600 40px with key digits wrapped in `<em>` (Geist 700, Electric). Label JetBrains Mono 400 10px uppercase `+0.08em`, ≤5 words. **Don't** round the left edge; use only for credentials/proof.
- **Location pill:** domestic `background: var(--paper)` / `color: var(--midnight)`; international `background: var(--midnight)` / `color: var(--white)`; `padding: 7px 14px`; `border-radius: 4px`; 13px; hover `background: var(--electric)` / `color: var(--white)`.
- **Status badge:** JetBrains Mono 500 10px uppercase `+0.08em`; `padding: 4px 9px`; `border-radius: 3px`; 6px dot in `currentColor`. States: live (Electric tint), draft (Slate tint), warn (amber tint), error (red tint). Use for state, not content tags.
- **Tooltip:** `background: var(--midnight)` / `color: var(--white)`; `padding: 8px 12px`; `border-radius: 4px`; Inter Tight 11px; 10px above host; 5px arrow; `box-shadow: var(--elev-3)`; `role="tooltip"`. Trigger on hover **and** keyboard focus. One line only — never hide critical content inside.
- **Progress bar:** track `var(--cloud)`, fill `var(--electric)`; `height: 6px`; `border-radius: 3px`; meta JetBrains Mono 10px uppercase `+0.1em`. Always include `role="progressbar"` + `aria-valuenow/min/max`.

### 7.5 Principle card (reusable framework pattern)
Horizontal layout: large number column + content column on a white card, 2px Electric top (or left) border, subtle `translateX` hover. Reuse this exact pattern for any "principles / capabilities" set so sibling sets read as visually consistent.

---

## 8. Editorial rhythm & page composition

- Open pages with a **Midnight hero or anchor section**.
- Every section: monospace **section label** (with accent line) → **Geist headline** (sentence case, `<em>` emphasis) → optional Inter Tight intro → content.
- **Interleave** White → Paper → Midnight backgrounds for pacing.
- Number section labels in editorial sequences ("01 · ", "02 · ").
- Let white space carry weight — restraint over density.

---

## 9. WCAG AA compliance — audit & enforcement (mandatory)

Accessibility is the floor. Run this audit on every page **before** returning output, and state in your response that it passed.

### 9.1 Structural checklist (must all be true)
- [ ] `<html lang="en">` set; one `<h1>` per page; heading levels never skip.
- [ ] Skip link present and functional: `<a class="skip-link" href="#main">Skip to main content</a>`, targeting the `<main id="main">`.
- [ ] Semantic landmarks present: `<nav aria-label>`, `<main>`, `<section aria-labelledby|aria-label>`, `<footer role="contentinfo">`. No landmark left unlabeled where multiples exist.
- [ ] Every `<img>` has meaningful `alt` (empty `alt=""` only for decorative). Every image has explicit `width`/`height` to prevent layout shift; non-critical images use `loading="lazy"`.
- [ ] Every form control has an associated visible `<label>`; errors use `aria-invalid` + `aria-describedby` and visible text.
- [ ] Every interactive element is keyboard reachable and has a **visible focus indicator** (default ring: `outline: 2px solid var(--electric); outline-offset: 3px;`).
- [ ] Carousels/dialogs use proper ARIA (roles, `aria-live` where content changes, focus trapping for modals/lightboxes).
- [ ] `prefers-reduced-motion` override present (§6.6).
- [ ] Color is never the sole carrier of meaning (pair with text/icon/shape).
- [ ] Page is usable and reflows without horizontal scroll at 320px width and at 200% zoom.

### 9.2 Contrast audit (every text/surface pair)
1. Identify each text-on-surface pairing on the page.
2. If the pair is in the §4.3 matrix, use that verdict.
3. If not, compute the ratio (WCAG relative-luminance formula) and require: **≥4.5:1** for normal text, **≥3.0:1** for large text (≥18pt regular / ≥14pt bold) and for non-text UI (borders, focus rings, icons, control boundaries).
4. If a pair fails, **change the color choice** (e.g., promote Slate Light → Slate, or Electric body text → Midnight body with Electric `<em>` accents). Never ship a failing pair.

### 9.3 Enforcement rule
If satisfying a stylistic request would break any item in §9.1 or §9.2, do **not** ship it. Implement the accessible version and briefly note the substitution. Accessibility is never traded for aesthetics.

---

## 10. Page scaffold & boilerplate

### 10.1 `<head>` essentials (every page)
- `<meta charset="UTF-8">`, `<meta name="viewport" content="width=device-width, initial-scale=1.0">`, `<meta name="theme-color" content="#0f1a2b">`.
- Unique sentence-case `<title>`, unique meta description, canonical URL.
- Full Open Graph + Twitter Card blocks (`twitter:card=summary_large_image`, `twitter:site`/`twitter:creator=@ReidWebber1`).
- JSON-LD: `Person` on the homepage; `Article`/`TechArticle` on content pages; `ContactPage`/`WebPage` on forms.
- Fonts (load all three, never a fourth):
  ```html
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Inter+Tight:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  ```

### 10.2 Body structure
```html
<body>
  <a class="skip-link" href="#main">Skip to main content</a>
  <nav class="nav" aria-label="Primary"> … logo + nav-links … </nav>
  <main id="main">
    <section aria-labelledby="…"> … </section>
  </main>
  <footer class="footer" role="contentinfo"> … </footer>
</body>
```

### 10.3 Logo / wordmark
SVG logomark = vertical bar + right-pointing triangle + circle hub + Electric Blue nucleus dot. Wordmark "reid" lowercase + "EXA" uppercase in Electric Blue — casing never swapped. Min size: 22px mark / 15px wordmark; ≥12px clear space. Renders 36px in nav.

### 10.4 Footer & link pattern
Every page footer carries the same link row, with **Brand Standards last**. Mark the current page with `aria-current="page"`. Footer wraps below 700px (it stacks vertically) so links never clip on mobile, since the primary nav hides at ≤900px.

---

## 11. Voice, tone & vocabulary governance

### 11.1 Voice
Senior advisor who earned authority through doing — calm, precise, direct. Short sentences. Direct claims. Reads like a manifesto from a practitioner, not a corporate services page. No reflective listening, no hedging, no LinkedIn filler.

### 11.2 Tone descriptors
- **Is:** confident, precise, architectural, direct, editorial, executive, specific.
- **Is not:** breathless, marketing-y, buzzword-heavy, generic-LinkedIn, hedging, self-promotional.

### 11.3 Writing rules
- Sentence case in headlines, always.
- Accent one or two phrases per headline in Electric Blue via `<em>`. Use sparingly.
- Numbers: spell out one–nine in body; numerals for 10+ and inside credential cards regardless of value.
- EXA: spell out on first use, "EXA" after; always uppercase.
- **Scale descriptors (primary):** "complex digital ecosystems," "complex digital enterprises." **Secondary:** "mission-critical systems," "global-scale enterprises," "Tier 1 enterprise," "matrixed organizations." **Concrete proof** (case studies only): real numbers like "hundreds of millions of barrels," "$300B+ market," "40+ markets."
- **Own these terms:** EXA, enterprise experience, at scale, AI-first, intelligent systems, global platform, complex digital ecosystems.

### 11.4 Forbidden in visible copy (absolute)
`UX` · `user experience` · `passionate about` · `guru` · `rockstar` · `ninja` · `synergy` · `leverage` · `Fortune 500`.
UX-adjacent terms (`UX Design`, `Product Design`, etc.) are permitted **only** inside non-visible SEO metadata (`<title>`, `<meta>`, OG/Twitter descriptions, JSON-LD `knowsAbout`/`about`) for recruiter discoverability — never in rendered, visible text.

---

## 12. SEO & structured-data governance

SEO is where the brand's two audiences are served at once: **executives read the rendered page; search engines and recruiters read the source.** UX-adjacent vocabulary lives here and **only** here (never in visible copy — see §11.4). Every page ships with the full block below.

### 12.1 Brand identity constants (use verbatim)

| Field | Value |
|---|---|
| Name | Reid Webber |
| Role | Enterprise Experience Architect |
| Practice | Enterprise Experience Architecture (EXA) |
| Tagline | Designing intelligence into enterprise scale. |
| Domain | `reidexa.design` (display as "reidEXA.design") |
| Primary email | `reid.webber@reidexa.design` |
| Speaking email | `speaking@reidexa.design` |
| LinkedIn | `https://www.linkedin.com/in/reid-webber` |
| Twitter/X | `@ReidWebber1` |
| `theme-color` | `#0f1a2b` (Midnight) |

### 12.2 Required `<head>` meta (every page)

- Unique, **sentence-case** `<title>` containing "Reid Webber," "EXA," and page-specific keywords.
- Unique `<meta name="description">` optimized for the search snippet.
- `<meta name="keywords">` with EXA-forward terms **plus** UX/Product Design terms for recruiter discoverability.
- `<meta name="author" content="Reid Webber">` and a `<link rel="canonical">` to the page's clean URL.

```html
<title>Page title — sentence case · Reid Webber · EXA</title>
<meta name="description" content="One-sentence, snippet-optimized summary of the page.">
<meta name="keywords" content="Enterprise Experience Architecture, EXA, enterprise design systems, AI-first design, UX Design, Product Design, design leadership">
<meta name="author" content="Reid Webber">
<link rel="canonical" href="https://reidexa.design/PAGE">
```

### 12.3 Open Graph block (complete — all fields required)

```html
<meta property="og:type" content="website"><!-- "article" on content pages -->
<meta property="og:url" content="https://reidexa.design/PAGE">
<meta property="og:title" content="Same as <title>">
<meta property="og:description" content="Same as meta description">
<meta property="og:image" content="https://reidexa.design/IMAGE">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Describe the image for non-visual users.">
<meta property="og:site_name" content="reidEXA.design">
<meta property="og:locale" content="en_US">
```

### 12.4 Twitter Card block (complete)

```html
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ReidWebber1">
<meta name="twitter:creator" content="@ReidWebber1">
<meta name="twitter:title" content="Same as <title>">
<meta name="twitter:description" content="Same as meta description">
<meta name="twitter:image" content="https://reidexa.design/IMAGE">
<meta name="twitter:image:alt" content="Same as og:image:alt">
```

### 12.5 JSON-LD structured data — by page type

Choose the schema by page role. Always reference Reid with a stable `@id` of `https://reidexa.design/#reid-webber` so entities resolve to one person.

| Page | Schema | Notes |
|---|---|---|
| Homepage | `Person` | The Knowledge-Panel schema: `name`, `jobTitle`, `email`, `image`, `description`, `url`, `sameAs` (LinkedIn + Twitter), `knowsAbout` (EXA, UX Design, Product Design, Enterprise Design Systems, AI-first design…), `hasOccupation`. |
| EXA overview · pillar pages · case studies | `Article` (or `TechArticle` for system/reference pages) | `author` and `publisher` reference Reid by `@id`; include `headline`, `image`, `datePublished`, `dateModified`, `inLanguage`, `about[]`. |
| Contact | `ContactPage` | `mainEntity` references Reid. |
| Speaking | `WebPage` | Same person reference. |

```html
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "@id": "https://reidexa.design/#reid-webber",
  "name": "Reid Webber",
  "jobTitle": "Enterprise Experience Architect",
  "url": "https://reidexa.design",
  "email": "reid.webber@reidexa.design",
  "image": "https://reidexa.design/Reid_Webber_profile_EXA.webp",
  "description": "Enterprise Experience Architect designing intelligence into enterprise scale.",
  "sameAs": [
    "https://www.linkedin.com/in/reid-webber",
    "https://twitter.com/ReidWebber1"
  ],
  "knowsAbout": [
    "Enterprise Experience Architecture",
    "Enterprise design systems",
    "AI-first design",
    "Design leadership",
    "UX Design",
    "Product Design"
  ]
}
</script>
```

### 12.6 Open Graph image strategy (by page)

| Page | `og:image` |
|---|---|
| Homepage | Custom branded share card `og-card-home.jpg` (1200×630, on-palette). |
| EXA framework | EXA infographic `exa-overview.webp`. |
| Pillar pages · case studies · contact · speaking | Profile photo `Reid_Webber_profile_EXA.webp`. |

### 12.7 SEO rules
- The `keywords`, OG/Twitter `description`, and JSON-LD `knowsAbout`/`about` arrays are the **only** places "UX," "user experience," "Fortune 500," and similar recruiter terms may appear. They must never surface in rendered, visible text.
- Title, OG title, and Twitter title stay identical and sentence case.
- OG/Twitter image alt text is real, descriptive alt text — not keyword stuffing.
- Every new page is added to `sitemap.xml`; after a live deploy, re-prime LinkedIn's Open Graph cache (it caches 7+ days) and submit the sitemap to Search Console.

---

## 13. Pre-ship compliance checklist (gate before "done")

A page is not done until every box is checked.

**Tokens & visual**
- [ ] `reidexa-tokens.css` is the first stylesheet loaded on the page; no token block is duplicated inline.
- [ ] All colors, shadows, motion, and radii come from §2 tokens — no hardcoded hex/rgba/box-shadow/font names.
- [ ] Only Midnight family, Electric/Electric-Soft, Slate family, Cloud/Paper/White used (plus `#c0392b` for form errors only).
- [ ] Electric Blue used only for EXA/CTA/emphasis/accent/focus — never body text or large fills. Electric Soft only as CTA hover.
- [ ] Only Geist + Inter Tight + JetBrains Mono. Headlines sentence case. Type sizes from §5.1.

**Accessibility (hard gate — §9)**
- [ ] WCAG 2.1 AA contrast verified for every text/surface pair (§4.3 / §9.2). No failing pairs.
- [ ] Skip link, semantic landmarks, single logical `<h1>`, labeled controls, visible focus on every interactive element.
- [ ] `prefers-reduced-motion` override present. Color is never the only signal. Reflows at 320px and 200% zoom.

**Responsive**
- [ ] Mobile-first; single 900px breakpoint; all grids collapse to one column with no horizontal scroll; container padding switches 40px→24px; footer stacks below 700px.

**Editorial & structure**
- [ ] Midnight hero/anchor; section label + accent line + Geist headline per section; White→Paper→Midnight pacing.
- [ ] `<head>` complete (meta, canonical, OG, Twitter Card, JSON-LD, fonts). Footer link row present with Brand Standards last and `aria-current` on the active page.

**SEO & metadata (§12)**
- [ ] Unique sentence-case `<title>` + `<meta name="description">` + `<link rel="canonical">` on every page.
- [ ] Full Open Graph block present — all 9 fields including `og:image:width/height/alt`.
- [ ] Full Twitter Card block present — `summary_large_image`, both `@ReidWebber1` handles, matching image alt.
- [ ] JSON-LD `<script>` block using the correct schema for page type (`Person` / `Article` / `TechArticle` / `ContactPage` / `WebPage`). Reid referenced via `@id: https://reidexa.design/#reid-webber`.
- [ ] `og:image` matches the correct asset for the page type (§12.6).
- [ ] Page URL added to `sitemap.xml`.
- [ ] "UX," "user experience," and "Fortune 500" confirmed absent from all rendered, visible text — only in metadata.

**Voice & brand**
- [ ] No forbidden terms in visible copy (§11.4). No "UX"/"user experience" anywhere visible. EXA uppercase, spelled out on first use.

---

## 14. Quick reference

- **Backgrounds:** White / Paper / Midnight (interleave).
- **Body text:** Midnight or Slate on light; White / Slate Dim / Slate Light on dark.
- **Accent:** Electric Blue (CTA hover → Electric Soft).
- **Fonts:** Geist (headlines) · Inter Tight 400 (body) · JetBrains Mono (labels).
- **Container:** 1240px / 40px pad (24px mobile); narrow 880px.
- **Breakpoint:** 900px (grids → one column); footer stacks at 700px.
- **Radius:** 6px buttons/inputs · 8px cards · 4px pills · 3px small.
- **Depth:** `--elev-*` + `--bevel-*` + `--glass-*` only.
- **Motion:** `--ease-out` + `--dur-fast|base|slow`; always honor reduced motion.
- **Hard gate:** WCAG 2.1 AA on every page; accessibility beats style, always.

*This document is the canonical, standalone build contract for reidEXA.design. Generated to govern all AI-assisted page creation across Claude Design, Cursor, and any other environment. When in doubt: most restrained, most accessible, most token-driven option wins.*