Service Pages
The three service landing pages (/services/app-website-design, /services/design-retainer, /services/design-system) follow the UX audit page's pattern: a split hero on the navy silk with a picture of the service working, drawn in CSS on a light ground (surface-paper surface-white), then the client logo strip as the hero's foot, the sections below, a white band for How it works and the FAQ, and the closing CTA. Each hero picture is decorative (aria-hidden, one sr-only sentence); the only interactive parts are real buttons; under reduced motion each shows its finished state. Source: src/components/sections/service-pages/.
App & website design — AppDesignHeroMockup (.app-mock)
A dashboard and its phone version as a rough “AI draft” (one grey, dashed edges, every block a little off its grid) that settles into the designed screen with spec callouts. Every drifting block carries .am-x and a data-d (1–12) that sets its draft offset and stagger; data-view on the root switches the picture and CSS transitions on the spring curves do the rest. The spec callouts (.am-tag) are annotation violet (.svc-accent-violet, its deep step) with a white keyline, so they hold an edge on the navy hero and on the white window alike. The toggle is .compare-switch, shared with ButtonDrift.
Example: a rough, AI-generated dashboard and phone screen next to the designed version — aligned to one grid, with consistent components, status states and a full-width tap target on mobile.
Design retainer — RetainerHeroBoard (.board)
A month of retainer work moving across Requests, In design and Shipped. One grid: column grounds and headings are fixed cells, every card a sibling placed by data-col / data-row, so a move is a framer layout animation (default-spatial). Runs only on screen with the tab visible; static under reduced motion.
Example: a month of retainer work on a board — requests, in design and shipped — with features, fixes, design system updates and build reviews moving through it.
Design system — TokenSpecimen (.ds-spec, .ds-preview)
A small product UI driven by three tokens — radius, accent (a .svc-accent-* hue at its deep step) and density — with real toggle buttons to change them and a readout naming them as code would. Demos itself one token at a time until the visitor touches a control. The preview sits in .ds-stage over an invisible sizer copy fixed at the comfortable (tallest) density, so changing density never resizes the hero (no layout shift, by hand or in the demo). The switch stays a pill whatever the radius token: its shape is its affordance. .ds-preview-bare reuses its parts without the frame in the “What you get” bento (.dsg-art).
Example: a small product screen built from design tokens. Changing the radius, accent colour or density updates every component at once.
Design system — ButtonDrift (.btn-drift)
“Twelve versions of the same button”, drawn: twelve buttons each styled differently (data-v rules, active only in the drift view) snap to one component a beat after they come into view. In the one-component view a Figma-style component-set frame fades in once they've landed: a dashed violet edge (.btn-drift-frame, .svc-accent-violet on the frame only) tagged with the component icon and “Button”. A dark card-panel on the paper band.
Example: twelve buttons from different pages, each styled differently, becoming one consistent button component.
Shared sections
FitCards
Heading and intro sticky on the left, four icon-chip cards in a 2×2 on the right. Works on any ground (cards take --surface). Used by the UX audit's AuditFitCards, “What I design” and “Is this you?”.
SceneCards
“Sounds familiar?”: dark card-panel cards on the paper band with a scene that tells each card's problem: a homepage situation scene where one fits, or one drawn for the page (ServicePageIllos: AiGapsIllo, DatedSiteIllo). Each scene opens on the problem and plays its fix once the card has been on screen for a beat (IlloPanel story="selected"), or on hover.
ServiceProof
A page-specific heading and subheading over the outcome stat cards (StatCard appearance="card", all on the static wash — no live shader in this row), then the matching case studies in the carousel with its own heading (casesTitle / casesIntro), a full section rhythm below, and the “View all case studies” link. Figures must already be published in their case study.
RetainerSwitch
One section, two answers, switched by segmented pills (.compare-switch at body-sm, accessible tabs with arrow keys): “What a retainer covers” by default and “Looking for a fractional product designer?” — one offer under two names, so they share a place instead of stacking as look-alike lists. Both panels stay in the HTML for crawlers and sit in one grid cell (.switch-panels), so switching crossfades without moving the page. The #fractional hash opens that tab.
RetainerComparison
Hire / agency / retainer on the same five rows, each row with the same icon chip in every card. On desktop the cards share one grid (CSS subgrid: title, five rows, footer), so every row sits level across all three however its values wrap. The retainer is the one light card (.tier-featured on the aqua silk), the others dark card-panels. No prices: the retainer's lives in its FAQ.
DesignSystemDeliverables
Four dark tiles with literal CSS pictures on the illustration panel: tokens, components, a do / don't pair, and the handover as it reads in code.