The system behind this site
Three of the case studies on this site are design systems. This is a fourth — and the only one you can inspect while you read about it. Every token, scale, and rule below is the one rendering this page.
Color
One gradient carries the whole brand. Everything else is a neutral doing structural work. Deliberately narrow — a system with four accent colors is a system nobody can apply consistently.
Primary gradient
Surfaces
Ink & lines
Type
Three families, each with one job. Montserrat 800/900 for display only — it has the width to hold a 5rem headline without looking thin. DM Sans for everything a person actually reads. DM Mono for labels, indices, and data, where tabular numerals matter more than warmth.
Headings use text-wrap: balance and
body copy uses text-wrap: pretty. Costs nothing, removes every orphan and
widow on the site. Numerals in mono contexts are locked to
font-variant-numeric: tabular-nums so the case study indices stay optically
aligned in a column.
Space & layout
Fluid rather than stepped. Every major rhythm is a clamp(),
so the layout breathes between breakpoints instead of jumping at them.
| Token | Value | Applied to |
|---|---|---|
| --max | 1200px | Content container |
| --gut | clamp(1.25rem, 4vw, 2.5rem) | Horizontal padding |
| Section | clamp(4.5rem, 9vw, 8rem) | Vertical rhythm |
| Case study measure | 880px | Long-form reading column |
| Radius | 10 / 14 / 18px | Buttons / panels / cards |
| Breakpoints | 560 · 700 · 820 · 960 · 1000 · 1200 | Set by content, not device |
Breakpoints were chosen by measuring text against available width, not by picking device sizes. The About heading holds one line above 1000px and the grid stacks below it, because that is the width where 511px of heading stops fitting in a 530px column.
Components
Small inventory on purpose. Buttons, cards, panels, marquee, icon tile, section rail. Everything else is composition.
44px gradient tile, 20px stroke icon, one animation each. The motion is the affordance — a static icon in this position would just be decoration.
Motion
One easing curve for everything, one duration band, and a hard rule: motion must either communicate state or connect two views. Nothing moves to be impressive.
| Behavior | Spec | Why it exists |
|---|---|---|
| --ease | cubic-bezier(.22,.61,.36,1) | Single curve, whole site |
| Hover lift | translateY(-1 to -4px) · .2–.3s | Confirms the target is interactive |
| Scroll reveal | 20px rise · .65s · 80ms stagger | Directs reading order on first pass |
| View transition | .45s · thumbnail → hero morph | Preserves object identity across pages. The name is assigned at click time, since the hero carousel and the work grid show the same five studies and a view-transition-name must be unique per document |
| Marquee | 42s linear · pauses on hover | Legibility beats continuous motion |
| Reading progress | 2px gradient · rAF-throttled | Depth cue on long case studies |
Every one of these is wrapped in
prefers-reduced-motion. With it enabled the site is fully static — reveals
resolve to visible, the marquee stops, view transitions turn off, the progress bar hides.
Content never depends on motion to be reachable.
Accessibility
| Area | Decision |
|---|---|
| Contrast | Body ink 10.4:1, secondary 4.8:1 — AA at every size in use |
| Gradient text | @supports fallback to solid #3B6EF8; print falls back to solid ink |
| Focus | Visible 2px ring with 3px offset on every interactive element |
| Keyboard | Skip link; arrow keys page between case studies; rail is tab-reachable |
| Motion | Full prefers-reduced-motion coverage |
| Semantics | One h1 per page, ordered headings, labelled landmarks, alt text on all images |
| No-JS | Reveals, rail, and progress bar are enhancements — content reads without them |
Stack
Vanilla HTML, CSS, and a few hundred lines of JavaScript. No framework, no bundler, no dependencies, no build step. The ten case study pages are generated from a Python content dictionary so they cannot drift apart, but the output is plain static HTML with no runtime dependency on the generator.
| Layer | Choice |
|---|---|
| Markup | Static HTML, one file per page |
| Styles | One stylesheet, CSS custom properties throughout |
| Behavior | Vanilla JS — IntersectionObserver, rAF, pointer events |
| Transitions | Native cross-document View Transitions API |
| Generation | Python, dev-time only |
| Hosting | Vercel static, clean URLs, 301s from prior paths |
| Resume PDF | Print stylesheet — one source of truth, never a stale file |
Why publish this
Muse, GE Core, and the chart library underneath Digital Command Center are all described here in the past tense, in someone else's product, behind someone else's NDA. It seemed worth having one you can open the inspector on.
The interesting part of a design system was never the swatch grid. It is the set of decisions about what to leave out: one gradient instead of a palette, six breakpoints chosen by measuring text, an icon inventory small enough to hold in your head. Those constraints are the reason a system survives contact with a second designer.