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. The client sits in the eyebrow; the headline leads with the reframe.
Case-study summary goes here. The client sits in the eyebrow; the headline leads with the reframe.
Case-study summary goes here. The client sits in the eyebrow; the headline leads with the reframe.
While I was building the site, I spent time with a few versions of the pieces you hover, tap, and read. This is some of that work.
Three of the colors are structural; the other four are accents, used 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 sets headlines, numerals, and labels at heavy weights. Barlow sets body text, 16px minimum. Every size in the scale is fixed. 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 component is shown in every state: default, hover, and pressed. Use the state toggle to force hover and press without a mouse.
"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."
A short summary line.
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 starts hidden and animates in on scroll. Motion happens in two places: ambient loops like the logo marquee, and touch feedback. 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.
Hover — motion matches destination
A hover tells you what an element does. Whether it moves, and how, follows one question: is there somewhere to go — and is it a card or an image grid.
Clickable cards lift. Offer cards and buttons rise on a growing shadow — translateY(−6px), a faint resting shadow that deepens rather than popping, the lift on the GPU and the shadow faded via opacity so it stays smooth even on a heavy page. Class: .offer-lift.
Clickable image mosaics zoom. Tight image grids — the Unmissables tiles, the Cognitive Endurance block, the press grid — scale the photo inside its frame (scale(1.06), ~550ms) instead of lifting. A lift collides with its neighbors in a near-gapless grid; a zoom stays inside the frame.
Non-clickable cards move in place. A card with no destination never lifts — that would promise a click that isn't there. The scattered quest cards straighten as you look at them; the case-study cards peek, a slight tilt hinting the flip on the back.
Hover each one:
Two hand-made marks, borrowed from the Unmissables brand book. They do different jobs and follow different rules — the discipline is what keeps them from turning into decoration.
Tape — labels a thing
Tape labels a thing. Tags, categories, section markers, offer titles — a piece of tape stuck on to name something.
Torn at the ends, straight top and bottom. Real tape comes off a roll: clean long edges, an uneven rip where you tear it. Not rough on every side.
Rotated ~1.5°; the color carries meaning. Pink = professional (work, case studies, offers). Orange = personal (the life-story timeline, side-quests). Tennis = Unmissables. Cream only as a fallback on a dark or saturated ground where those would wash out or clash. Never yellow — that's the highlighter. Text stays crisp; the torn edge is a layer behind it.
Highlighter — marks an owned idea (hover to draw)
The lens for organizations is Experience-Led Growth. For people it's Cognitive Endurance — keeping your judgment your own as AI offers to do more of the thinking.
On red, the fill goes translucent: let's build something unmissable.
Marks an idea you're claiming, not a word you're stressing. Owned IP (Experience-Led Growth, Cognitive Endurance, unmissable) and signature claims. The test: would you want it screenshotted and attributed to you?
A lone word is a glitch; a whole line can stand alone. One highlighted word reads like a stray mark someone forgot to delete — so word-marks come in twos or not at all. A highlighted full line reads as deliberate emphasis, like underlining a sentence, and is fine on its own.
Never adjacent, ~1–2 per page. One per section at most, never two in a sentence or in neighboring sentences. A page full of highlights is a coloring book.
Always yellow — warm, never neon, never pink. 52% on cream. On red it layers the same yellow over an opaque cream base so the red can't bleed through and mud it — a yellow mark on paper. Staying yellow keeps the highlighter one recognizable thing (pink would also collide with the tape). A little gap sits before a mid-sentence mark so it doesn't crowd the word before it.
Both edges are self-contained SVG displacement masks — no images, no library. Tape and highlighter live on aribajahan.com.
Two objects float over the hero and recolor to whatever's behind them, instead of sitting in a full-width bar. The hover is the distinctive part: each letter fills with red from the top down.
Hover the links — the ink pour
How it behaves
Floating, not a bar. Wordmark on the left, links on the right, nothing spanning the width, so the hero fills the whole top of the screen.
Recolors to the ground. Cream text over dark and red, charcoal over cream. It reads the background behind it as you scroll.
Hides on scroll down, returns on scroll up or pause. It stays out of the way while you read and comes back when you scroll up.
Bare over the hero, a faint box past it. Nothing behind the links over the hero; past it a faint tinted panel appears — defined by fill, not a border. It just contrasts the ground: a hair darker on cream, lighter on dark, deeper on the red band (never a black slab).
Ink-pour hover. Each link fills from the top down, staggered letter by letter, with a rippled edge — cherish everywhere, and charcoal over the red band (cherish would vanish into the red).
Mobile is a full-screen menu. Wordmark and a burger; tapping opens a charcoal panel with the links stacked large.
Live on aribajahan.com. The ink pour is an animated clip-path, with no library.
The system in seven moves. Follow them 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.