Superhuman.com — from scratch

Superhuman is a product that signals craft in every micro-interaction. A marketing site that ships at Marketing-Site Average would undercut the pitch before the visitor reads it. Building the new superhuman.com meant translating product values — speed, restraint, considered motion — into a presentation surface where those values are the message.

Context

A new product site for an established brand is a constraint puzzle. The audience already has expectations; the site has to surprise them upward without breaking the recognition contract. Every animation that lands must be deliberate; every animation that loops must justify the loop; every line of copy that earns the click does so because it sounds like the product, not the marketing team.

Move

I was brought in during the Grammarly→Superhuman rebrand to lead the engineering on the new website. The work wasn’t implement a brief — there wasn’t one yet. It was build the surface, build the system that builds the surface, and bring the designers along. I worked directly with the design team on what light/dark color schemes actually meant in their tool, what Figma variables and color modes could and couldn’t do, and where the seams between Figma and code needed to live. Some of that was teaching; most of it was establishing the shared vocabulary the rest of the project would run on.

The artifact underneath the site is a UI library and design system I built from scratch. It now hosts many pages, with multiple contributors shipping into it — and that adoption is the part I’m proudest of. The site is the visible thing; the system is the thing that lets the site keep growing without decaying.

The first decision that scoped everything was: this site is the product’s first frame. Not “the marketing site that explains the product” — the first frame of the product. Every interaction had to feel like Superhuman feels: fast, quiet, considered. That meant restricting myself before I started writing CSS. No bloat budget, no carousel temptation, no scroll-jacked “tell us your story” sequence. If a section needed motion to justify itself, the motion had to be the section.

The motion budget was the constraint that did the most work. I gave myself a small set of easing curves and a small set of durations — every animation on the site had to pick from those, and any new addition cost something elsewhere. The result was that motion compounded into a language rather than fragmenting into decoration. Visitors don’t notice this consciously; they notice that the site feels coherent.

Performance got honest because I refused to put the budget at the end of the schedule. LCP, CLS, INP targets were locked before the site had pages, and every new page had to ship under them. When the perf budget started losing fights with the design — and it did — we changed the design, not the budget.

I also rebuilt how the content gets into the site. Producers were waiting on engineering for every page change, which is the failure mode of any custom CMS. I shifted the content model toward generic, composable content types — page sections that producers can rearrange, plus structured fields that designers and engineers don’t have to revisit for a copy tweak. The next step is LLM-generated entries: a producer describes the page they want, the model fills in a draft against the schema, the producer edits. The CMS becomes a writing surface instead of a ticket queue.

Outcome

The launch perf numbers held. The site shipped under the budget I set and it’s stayed there — a result that’s only impressive if you’ve watched a marketing site decay six months after launch as the brand team adds just one more thing. The budget being load-bearing in the codebase, not just in the brief, is what kept it standing.

The unexpected piece of field feedback was about typography. The detail I’d assumed was an internal-team-only flex — the tracking, the optical sizing, the way headings actually breathe — was the thing customers and prospects reached for in compliments. It’s a useful reminder that craft reads even when nobody can name it.

The pattern that’s leaking into product is the motion language. The marketing site established the easing curves and the durations the product is now adopting, which makes it the rare case where the marketing surface returned something to the application surface instead of the other way around.

What I’d do differently

There’s one animation I’d cut. A section transition that earned its place during build but became wallpaper after a month of looking at it. Animations should keep paying rent; the moment they’re decorative, they’re cost. I’d run a stricter still earning? pass quarterly.

I’d also bring the writing team into the motion conversations earlier. The animations and the words are the same surface — when they’re designed in parallel the page lands harder than the sum. We figured this out a few sprints in; I’d start there next time.

The CMS shift is the piece I’d push further, faster. Producers shouldn’t be waiting on engineering for a copy update in 2025, and they shouldn’t be drafting in a blank textarea either. There’s a working pattern I’m sketching — see Superhuman design tooling for where that thinking is heading.