Value: Archivo 700 at clamp(1.75rem, 3vw, 2.25rem). Label: 0.75rem, 600, uppercase, muted.

Do not extend this to other stat groups without a reason. It earns its place on one page; repeated it becomes decoration.

Hover it. Motion is wrapped in a prefers-reduced-motion guard, so the transform is dropped for anyone who has asked their system to reduce animation while the color change still fires; the state is never lost.

Case study cards, earlier-work rows, the principles cross-link, “See it in action”, “View all work”, “More on how I lead”. template-parts/icon-arrow.php

Email, LinkedIn, GitHub, ADPList, Instagram, Dribbble, the coffee link, Mentorship Resources. template-parts/icon-arrow-external.php

These look like drift and are not: each does a different job. Adding a fourth would be drift.

• 72rem — the one container width, shared by every section including heroes
• 42rem — prose measure. Applied to paragraphs, not to their container, so figures can use the full width
• 48rem — the main breakpoint: two-column layouts collapse to one
• 40rem — the small breakpoint: three-column grids collapse, label columns stack

• The Home Depot

  Header Modernization

  Reframing a fragmented navigation layer as a platform problem.

• Client name

  Locked case study

The whole card is one link; the corner glyph is the only affordance. Hover rotates -0.4deg and scales 1.012, the site’s oldest piece of motion, and what the button nudge was matched to. The locked variant swaps the arrow for a lock, drops the reframe line and the stat row, and a single password note renders above the grid rather than on every card.

Closes each decision block. Hairline border, no radius, micro-label, no accent; it follows the system, but it went through a near-black box and a terracotta-rule version first. It carries an unlocked-padlock mark. Deliberately not an arrow: the two arrows now mean internal and external navigation, and a third meaning would muddy them.

A: what is live. B: the same content in the “What it unlocked” box. The question is whether that box is a single-meaning device or a general callout pattern.

B makes the page more systematic: one bounded-callout pattern doing both jobs, with the label saying which job. It also matches the three boxes in the decisions above it, so the section reads as a bookend. The cost is the typographic drama: the principle stops being the largest thing on the page and becomes another line of body copy inside a box. A also keeps the box meaning one thing, the way the two arrows each mean one thing.

Two tones only: --color-surface for the two ordinary bands, --color-surface-deep for the single section that has to stand apart. A third tone would flatten the distinction. Bands never sit directly against each other with white between them; that reads as an accident.

“

There’s too much going on and I don’t know where to start.

ParticipantB2C shopper, RITE testing

Terracotta left border and an oversized quote mark. One of the few places the accent is allowed, and one of the few treatments on this site that landed first time. Do not redesign it without a reason.

Image sits here at container width

.cs-media wraps the image and caption. Images carry a hairline border so light screenshots do not bleed into the page. Placeholders use a dashed border, deliberately unlike every other box on the site, so an unfinished slot is never mistaken for a finished one.

A second, smaller photo overlaps the main one at a different scale, with just enough shadow to separate the two layers. Depth comes from the photos themselves rather than an added shape. This is the direction that scales down cleanly to two photos instead of three.

A slight rotation and a soft, wide, low-opacity shadow: ambient, not a hard drop shadow. This is the one real system change here: the site has zero box-shadow anywhere today, and this introduces the idea for the first time. It reads well as a single photo on its own, if Katie goes down to one on About rather than three.

No shadow, no rotation. Depth comes from breaking the equal-square grid: two different aspect ratios at two different vertical positions. The most conservative option relative to the flat, square-cornered system; the safest to say yes to without reopening other rules.

Keep exploring

The information wasn't missing from the page. It just wasn't visible at the moment someone actually needed it.

From Screen to Aisle's "gist": currently normal body copy inside the boxed summary. Set at headline scale instead, the closing line of the problem statement gets the same visual weight the reference gives its Challenge quote. This would sit alongside "The gist", not replace it; the box still carries Role/Scope/Client and the fuller paragraph.

Same two Screen to Aisle screenshots, on a full-bleed soft-gray band with real air around them, instead of sitting directly on white inside a .cs-decision grid. Reads calmer and more considered with fewer images per page; the tradeoff is it asks for more vertical space than the current inline treatment.

Katie, browsing garri.design's homepage separately: she likes how its hero fills most of the viewport rather than sitting in a normal-height band at the top. Same real headline and subline, same type styles, just given the room to breathe: roughly 80% of viewport height instead of a content-height band. Shown here at a fixed height rather than true viewport height so it fits the guide's flow; the real thing would use min-height: 80vh.

A “not X” construction argues with a strawman before it says anything. Affirmative claims read as confident; corrective ones read as defensive.

Generic framework names are interchangeable between portfolios — which is exactly how this page ended up reading like someone else’s. A title that only describes your project cannot be borrowed.

Reusable across every case study so they read as one system. “What it cost” is the one that does the most work — most portfolios only show wins.

Borrowed from the How I Lead moves on the Leadership page, so the case studies speak the same language as the rest of the site.

Tradeoffs and the moment something nearly went wrong are the parts that read as seniority. The launch-pushback section is the strongest thing on the site for exactly this reason.

• Focus is a 2px accent outline at 3px offset, defined globally. Never remove it without replacing it.
• All motion sits behind a prefers-reduced-motion guard; color changes still fire, so no state depends on movement alone.
• One H1 per page. Work has two headings at the same visual size: the second is an H2 carrying .page-heading, which is how they match without breaking the outline.
• Anything that looks like a heading must be a heading. A styled span was caught doing this job once already.
• Decorative marks (rules, quote glyphs, arrows) carry aria-hidden. Icons that are the only affordance sit inside a link with real text.