Every principle, color, typeface, component, and design token used across the Reid Webber · Enterprise Experience Architect website. This guide explains not just what the system is, but why each decision was made — the rationale that makes a brand defensible at scale.
Five principles guide every decision in this system. They are the criteria against which any new page, component, or piece of copy is judged. When a choice is unclear, the principles break the tie.
The brand personality is best described as minimalist, but architectural. Calm and precise, never breathless. Direct and confident, never grandstanding. The voice belongs to a senior practitioner who has earned authority through doing — not to a brand asking for attention.
<em> tags. Use sparingly — one or two phrases per headline maximum.Three font families, each with a distinct role. The combination is the brand voice — never introduce a fourth. Each typeface was chosen for a specific architectural quality: Geist for modern geometric authority, Inter Tight for editorial readability at small sizes, JetBrains Mono for technical precision in labels.
A disciplined palette of two accents (Midnight and Electric Blue) supported by a Slate family for text and a Cloud/Paper family for surfaces. Never introduce new colors — every UI state is achievable within this system. Every text/surface combination on the live site has been verified against WCAG 2.1 contrast targets.
Every text/surface combination used on the live site, with measured contrast ratios. AA-normal (≥4.5) is required for body text under 18pt regular. AA-large (≥3.0) is acceptable for headings 18pt+ regular or 14pt+ bold. The system is engineered so accessibility falls out of the palette by default — not as an afterthought.
The constraint is the design: Electric Blue is reserved for emphasis words, CTAs, and accent borders precisely because its 4.04:1 ratio against white only clears AA-large. The brand rule "never use Electric Blue for body text" isn't a stylistic preference — it's a contrast requirement made visible.
All spacing on the site is built on multiples of 4 and 8 pixels, the standard 8pt grid that ensures consistency across screen sizes and component combinations. The named tokens below are how the system is applied — every margin, padding, and gap on every page resolves to one of these values.
1240px · centered with auto margins40px desktop · 24px mobile110px vertical · 140px for EXA & Contact hero sections1.3fr 1fr · About 1.4fr 1fr · Contact 1.3fr 1fr · Teams 1fr 1fr80px major two-column sections · 16–24px card grids900px and below · all grids collapse to single columnThree button variants cover every action on the site. Primary for the single most important conversion on a page. Secondary for supporting actions. Ghost for in-line links and quiet returns. Each has explicit hover, focus, and disabled states — there are no undefined interaction states in the system.
Form fields share a single visual language: 1px Cloud border at rest, Slate Light on hover, Electric Blue on focus with a 3px translucent halo. The system covers text inputs, textareas, checkboxes, and radios — all built natively for accessibility and keyboard navigation.
name attribute.
The navigation language is restrained: monospace section labels with leading accent lines, slim nav links with hover underline, and case study bookend links. There is no decorative menu chrome — the architecture itself signals hierarchy.
Components that surface state, metrics, and supporting context: metric cards for credentials, location pills for the global teams strip, badges for status, tooltips for inline explanation, and progress bars for any quantitative reveal.
<em> for the Electric Blue accent. Keep labels under five words.
Every color, shadow, motion curve, and border radius on this site is exposed as a CSS custom property in styles/site.css. Components consume tokens — never raw values. This is what allows the system to scale: change a token once, every consumer updates atomically. Token names follow predictable categories so a developer can reason about them without reading the docs.
hsl() wrapper). Lets any rule produce alpha overlays via hsl(var(--midnight-hsl) / 0.18).hsl(var(--midnight-hsl)). Use in solid contexts.160ms / 220ms / 360ms — quick interactions, default transitions, slow reveals.6px / 10px / 14px / 20px — composable corner radii.--electric-hsl once → every CTA, every accent line, every focus ring updates. No find-and-replace, no orphans.border-left: 2px solid var(--electric) understands intent. They don't have to memorize that #2B7FE0 is the brand accent.The dimensional layer adds depth without breaking the palette or typographic discipline. Material 3-style triple-shadow elevation stacks, restrained backdrop-filter glass, and atmospheric mesh gradients on body and section backgrounds. Every token is opt-in at the section or component level — nothing changes site-wide except the body atmosphere, which is itself defeatable.
Five tiers for light surfaces (--elev-0 through --elev-4) plus three for dark (--elev-dark-1/2/3). Each is a triple-shadow stack — a soft ambient wash, a softer mid-distance penumbra, and a sharper umbra. The progression maps to information hierarchy: 0 is flush, 1 is at-rest tile, 2 is interactive card, 3 is hovered/focused, 4 is floating modal.
Restrained glassmorphism — used only for navigation overlays, lightboxes, and translucent containers above mesh backgrounds. Combines backdrop-filter: var(--glass-blur) with a high-transparency surface fill and a 1px translucent inner edge. @supports fallback bumps fill opacity for browsers without backdrop-filter.
Layered radial gradients applied via body::before by default; opt-in per-section via .atmos-light / .atmos-dark / .atmos-paper. Paired with a faint SVG fractal noise overlay (~3.5% opacity) on body::after using mix-blend-mode: multiply on light and screen on dark. Opt out at body level with .no-atmosphere.
--elev-0 · --elev-1 · --elev-2 · --elev-3 · --elev-4 — five tiers, each a triple-shadow stack--elev-dark-1 · --elev-dark-2 · --elev-dark-3 — three tiers tuned for Midnight surfaces--bevel-light · --bevel-light-strong · --bevel-dark — 1px translucent inner-shadow edges, composable with elevation--glass-blur · --glass-tint-light · --glass-tint-dark · --glass-edge-light · --glass-edge-dark--mesh-light · --mesh-dark — layered radial gradient compositions for body + section backgrounds--vignette-light · --vignette-dark — corner-falloff overlays for depth at edges.atmos-light · .atmos-dark · .atmos-paper · .surface · .surface-elevated · .surface-floating · .surface-dark · .glass-light · .glass-dark · .tactile.no-atmosphere on <body> disables the default mesh + grain (rarely needed)@media (prefers-reduced-motion: reduce) override · WCAG AA contrast preserved on every elevated surfaceThe component-level rules above apply locally. These apply everywhere. When extending the system, treat both lists as binding.
The logomark combines three geometric elements — a vertical bar (the foundation), a directional triangle (the outward trajectory), and a hub with an Electric Blue nucleus (the signal point). Together they represent enterprise scale with intentional direction and an intelligent core. Always paired with the wordmark "reidEXA" — "reid" lowercase, "EXA" in Electric Blue, casing never swapped.
reidexa.design · displayed as reidEXA.design1240px centered · 40px side padding16px · line-height 1.6900px and belowWhen creating new pages — case study details, writing, speaking — follow these patterns to maintain consistency. The system is designed to extend without bending: every new piece resolves to existing tokens, classes, and editorial rhythm.
Two files encode the complete design system in a form AI agents and developers can consume directly. Drop them into any project and every token, primitive, and governance rule travels with them — no manual copy-paste from this page required.
reidexa-design-system.mdreidexa-tokens.css<link rel="stylesheet" href="reidexa-tokens.css">reidexa-design-system.md as project context in Claude or Cursor — it is a self-contained build contract. Every governance rule, token, and compliance check is inside.reidexa-tokens.css before any page-specific stylesheet. Reference var(--token) in all CSS — never hardcode hex values, shadows, or font names.