Archive for month: March, 2026

Roughly a third of the design work we love internally never reaches the client. We kill it before it leaves the studio. This is not a quality control problem. It is the quality control system.

The first cut: directional review

Every project has an internal review at the end of the first design week. The team presents three to five directions. The studio principal asks one question: which of these is the strongest position for the company we’re working with? The other directions die.

This sounds harsh. It is. Designers are emotionally invested in directions they’ve spent a week on. The cull is hard. But sending three directions to a client and letting them pick is not a service — it is offloading the studio’s expertise back to the founder, who hired us specifically because they did not have the expertise to make that call.

The second cut: production review

By week four we have a fully-built brand system: typography, color, lockups, motion, applied across mock surfaces. The studio principal sits with the team and asks: would I send this in five years and feel proud? If the answer is qualified — “yes, with some tweaks,” “yes, mostly” — we go back another week.

Roughly a third of week four reviews fail this test. The cost is real. The studio loses a week of margin on the project. The team loses a week of energy. But the alternative — shipping work that is “almost there” — costs the client a brand they will need to redo in eighteen months. We carry the cost so they don’t have to.

What the cull rate produces

The work that survives both cuts is the work the team is unambiguously proud to ship. There is no “I would have wanted to push this further.” There is no “I think this is what they wanted, even though I wasn’t sure.” The work has been beaten on internally for two and a half weeks before the client sees it. By the time it arrives, it is done.

Most founders who come to us with “we need a brand refresh” describe the problem as a logo problem. Sometimes it is. More often the logo is fine and the system around it is missing. Without the system, every new asset is an improvisation, and improvisation at scale produces the inconsistency the founder is reacting to.

The four components every brand system needs

One: a typography hierarchy with three levels at most. Display, body, micro. Each with a defined weight, line height, and use case. Without this, every layout is an argument.

Two: a color system with primary, secondary, semantic, and neutral roles. Each with hex, HSL, RGB, and accessibility-tested contrast pairings. Without this, the marketing site looks different from the product UI which looks different from the deck.

Three: a motion vocabulary. How does this brand enter? Exit? Hover? Focus? If you cannot answer those questions, the brand falls apart the moment anything moves — which is everywhere on the modern web.

Four: a voice document. Three to five tonal principles, written sentences that demonstrate them, three to five anti-patterns. Without this, the brand sounds different in every channel because every author is inventing the voice from scratch.

The system as document

None of this is theoretical. It is a 30-to-50 page document. It includes pixel-perfect type specs and live-coded tokens. It includes ten written exemplar paragraphs in the brand voice. It includes a motion library video, twenty seconds long, that shows entrance and exit principles in motion. It is a deliverable, not a vibe.

If you commissioned a brand and you got a logo file and a one-page color palette, you got a logo. You did not get a brand system. The next person to design something for you will improvise. The improvisations will not match. That is the inconsistency you’re reacting to.

The single largest cause of slow websites is design choices made without performance constraints in the room. The hero video that nobody flagged. The custom font set with seven weights. The thirty-section landing page with a parallax background image per section. Each decision adds two hundred milliseconds. By production, the page costs five seconds.

The constraint is the design

We treat Largest Contentful Paint, Cumulative Layout Shift, and Interaction to Next Paint as design constraints — not engineering remediations. That means: before we ship a design to the build team, we know what the LCP element will be, what its weight is, and what the budget is for everything else.

This sounds tedious. It is tedious. It is also the reason our shipped sites land in green for all three Core Web Vitals on launch day, instead of needing a six-week post-launch optimization sprint.

The substitutions we make on the way in

Hero video → animated WebP at 1/10 the file size, with a poster image as the LCP element. Sixty-fps motion → CSS-driven animation that respects prefers-reduced-motion. Font weight 100, 200, 300, 400, 500, 600, 700, 800, 900 → variable font axis with two ranges defined. Image-heavy editorial sections → above-the-fold images preloaded, below-the-fold lazy-loaded with native browser support, no external library required.

Why this matters beyond Lighthouse

The reason this matters is not that Google rewards fast sites in search. It does, but the bigger reason is that fast sites convert. A landing page that takes three seconds to interact loses 30% of mobile traffic before a single brand decision is made. The most beautifully designed page that is too slow to use is not a beautifully designed page. It is a slow page that nobody saw.

Motion in interfaces and brand work is treated, almost universally, as decorative. Add a fade. Animate the hover. Make it smoother. None of these are wrong, but they describe motion as polish on a finished thing. We treat motion as a hierarchy tool.

What motion communicates

An element that animates in is more important than an element that appears statically. An element that animates with a 600ms ease is more important than one that animates with a 150ms snap. An element that originates from another element is causally related to it; an element that fades in independently is not.

Every motion choice answers a hierarchy question. What enters first? Why? What is the user supposed to look at as the page settles? Where is the click going to take them? Animation telegraphs the answers. Static design has to encode them in space, weight, and color alone.

The constraints we follow

One: motion should respect prefers-reduced-motion. Always. There is no exception. If your animation breaks the experience for users with vestibular conditions, your animation is the bug, not the user.

Two: nothing animates above 800ms. Nothing. Even cinematic transitions. If a motion takes longer, it is no longer felt as motion — it is felt as waiting.

Three: ease curves are not aesthetic, they are physical. Material moves with weight. A cubic-bezier(0.32, 0.72, 0, 1) feels right for most UI; a linear motion almost never does. We pick from a library of five curves and reuse them ruthlessly across the system.

The final test

Turn off the motion. Does the design still communicate the hierarchy? It should. Motion accelerates and reinforces hierarchy; it does not create it. If the static layout works, the motion makes it sing. If the static layout doesn’t work, no amount of animation will save it.