Each control changes one rule of the system. Switch the ground, the density, or the viewport, and the preview re-renders the way a real page would. The controls read the same values the site is built from.
Organizations earn relevance — they don't inherit it. The experiences people have are downstream of decisions made upstream.
Work with me →Case-study summary goes here. Lead with the reframe.
Case-study summary goes here. Lead with the reframe.
Case-study summary goes here. Lead with the reframe.
Three structural colors carry the whole site. Four accents appear only where each one is reserved. Click any swatch to copy its hex.
Primary — the majority of the design
Accent — graphics and small moments only, ≤30% of the visual space
The rhythm rule — never more than two same-tone sections in a row
Red earns at least one full appearance per page beyond CTAs. White text on charcoal or red always uses cream #FFFBF3, never pure white. Testimonials are color-coded by relationship: leadership on cream-with-border, speaking on charcoal, client on red.
Big Shoulders Display carries every headline, numeral, and label at heavy weights. Barlow does all the reading, with a 16px floor. Every size in the scale is a fixed value: there's no fluid clamp, so 48px stays 48px until the mobile breakpoint takes over.
88px
The tier that sets up an ask sits above the body floor, so the reading that leads to a click never feels like filler.
Sixteen pixels is the floor anywhere on the site. Body runs at a comfortable measure — never wider than about sixty-five characters.
Import: Big Shoulders Display 700;800;900 + Barlow 400;500;600 + italic 400
Each piece is shown in the states it takes. Use the state toggle to force hover and press without a mouse; the interaction rules are part of the spec.
"This is such an incredible leadership testimonial, it must be on the site."
"This is such an incredible speaking testimonial, it must be on the site."
"This is such an incredible client testimonial, it must be on the site."
Front of the card: the reframe headline.
Role and context line
Back of the card: the challenge, the solution, and the impact.
For teams whose surface keeps breaking because the system underneath hasn't changed.
Nothing is parked offscreen waiting to reveal itself. Motion lives in two places: continuous ambient loops like the logo marquee, and the feedback of touch. Hit replay on any one to run it again.
The claim.
The context.
All motion respects prefers-reduced-motion. Press state is the hover state pulled to about 60%. Every clickable element carries both; nothing gives feedback on hover alone.
The whole system in seven moves. Follow these and a new page matches the site without re-deriving a single decision.
Spacing spec
| Token | Value | Where it's used |
|---|---|---|
| Section max-width | 1400px | Centered. Shared by every section. |
| Section padding-x | clamp(24, 5vw, 80)px | The formula that aligns all left edges. |
| Tier A top padding | 120px | Any section opening with eyebrow + headline. No exceptions. |
| Tier B top padding | 40–90px | Utility rows: marquees, stat strips, dividers. |
| Card grid gap | 24px | Cards, offers, testimonials. |
| Photo-grid gap | 3–4px | Photo grids and color-blocked panels. |
Copy nav + footer verbatim. They're fixed. Never rebuild them per page.
Rotate the three grounds. Cream, charcoal, red — never more than two same-tone sections in a row.
Match the max-width and padding rhythm so nav, hero and sections all align on the left.
Use the image-slot for every photo — never a flat background-image div — so images stay swappable in the Studio.
Reach for tape only on a real "look here" moment. Don't default to it everywhere.
Pair every hover with a press state. Nothing gives feedback on hover alone.
16px body floor, fixed type scale. Sizes are decisions. Don't reintroduce a clamp on H2.
The lens is expectation. Experience-Led Growth is what that means for organizations; Cognitive Endurance for people. The practice and the lens never appear apart.