Rebranding Superhuman, Grammarly, and Coda

Last year we were approached by Grammarly to brand their new AI agent. But things took a wild turn when they said, “Hold up, some stuff is happening behind the scenes…we might have to change the scope.”

Turns out that “stuff” was them acquiring Coda (an all-in-one collaborative workspace). Not only was the acquisition a big deal, but now the CEO from Coda was stepping into the role of CEO for Grammarly. NBD, just a massive org shift, totally normal. Then two-ish months later—another acquisition—this time it was Superhuman (an AI-native email app that a lot of CEOs/designers swear by). And guess what? Now Grammarly is changing its name to Superhuman.

Hold up. What is going on??????

Our little AI agent branding gig just turned into a giant merger of three beloved companies that are building the future of AI-native workspaces, taking the challenge head on.

This post is a little (extensive) behind the scenes look at how we developed an interactive identity with motion design at it’s core while the brand architecture was constantly evolving every day.

Then a Hero comes along…

We started this project like we start every project, with mild panic. Just kidddddding, 99% of the time we start on paper, just doodling stuff. My sketches don’t look anything like the designer-y Instagram sketches with fancy pencils, splayed Pantone books, rulers, and whatnot. It’s literally just doodles of random shapes. Some of which include teleportation?

Just putting the dot on top of the cursor shape made my mind take off like a rocket. We could do so so so much with just these two shapes. And my first thought was: there’s no way they are going to let us get away with this. There’s just no way.

I knew we had something special, so I called in the big guns Justin Lawes to animate this bud for our first round presentation, even before the client had seen anything. I just felt that this logo needed to be in motion in order for it to be a contender. I worked up a super rough outline of all the things that this logo/character could potentially do—not knowing if this was even part of the product at all—just overdelivering to try to sell a direction we believed in.

When we were presenting the logo to the execs, one of their only comments was, “What should we call it?” and without missing a beat, Rahul from Superhuman just said, “Hero.” And it was like the clouds parted to a beautiful blue sky full of potential.

So now, I’d love to introduce you to Hero. The new logo and mascot for Superhuman.

The one thing they don’t tell you about unintentionally designing a mascot/character as a logo is that it opens up one of the largest cans of worms that could possibly exist.

Here are some actual things we talked about over the course of many meetings:

Does it have a personality? Is it cute? How much is too cute? How do we NOT make it feel like Clippy? Should it feel like Clippy? Does the head have magical powers? Should it wave? Should it spin? What’s the weighted relationship between the head and the cape? Can the cape morph into things? Should it be a color? Should it be 3D? What material can it be made out of? How dense is it? How heavy should it feel? Can it fly around your screen? Can the cursor be seen without the head? Is it called a cursor or a pointer? Should it have a stroke around it like a real cursor? Does it have human qualities? Can it dance? It shouldn’t dance…right?

UI Icons

We loved the simplicity and malleability of Hero so much that we tried to work it into the UI icon system. It was a fun little challenge to try and build a whole library that included some part of Hero in one way or another. The moments where it felt really successful were when the cape shape fit into the arrow on version history, the little tie on account symbol, and the tip of the pencil on the writing icon, just some fun little nods towards the logo.

Turns out trying to include a little weird triangle in a system of over 500 icons is not ideal. So Helena Zhang, icon extraordinaire, lent a helping hand to build out the full system.

Instead of leaning into the shape of Hero as a whole, she took a more deconstructed approach for added flexibility. She referenced all the details of the full logo—not only Hero’s cursor, but also the dot, the outside squircle, the angles, the corners, and the roundness-meets-chunkiness of the Superhuman wordmark. Then she turned it into a complete system that balances soft and sharp elements to create a precise, yet human feeling that can extend across the entire icon library.

A wordmark that speaks a thousand words—actually, just one word.

We made a lot of wordmarks, like a lot a lot. You name it, we tried it. But when push came to shove, we realized that Superhuman already had a widely recognized brand, one that felt luxurious and sleek with its thin, tracked-out wordmark. So we focused on creating something that felt like a thoughtful evolution. Not a lot of wordmarks in the tech space are feeling elegant these days so we were like, let’s just keep the ethos and vibe of the original but add some more momentum and concept to it.

The bolder weight also allows us to pair sub-brands with it, set in lighter weights, down the road. Think like SUPERHUMAN Mail, SUPERHUMAN Documents, etc. We also customized the P & R to give it some upward momentum.

One of the main pieces of direction from the Grammarly team was that they wanted it to feel like the word that was written, almost onomatopoetic. It needed to feel super, but also a little bit human.

For a product that’s entirely about words, we had to get the type right.

When you acquire a bunch of different companies, that means you acquire their products…and all of their illustration styles and type families as well. So suddenly they were using about seven or eight different type families across all of their platforms which, if you know anything about type licenses, gets really really expensive. (Not to mention really inconsistent.) So how do we solve this?

We suggested, hey, what if we use a super family? Something with a sans, a serif, and a mono all built around the same baseline principles. (It’s not lost on me that we proposed using a super family for Superhuman.) The goal was to let the type seamlessly switch from sans to serif both throughout the brand and within the product canvas itself.

Fun side note: I put out a tweet asking about super families and Matthew Smith ended up putting together an entire directory of them for everyone to enjoy. The internet is great sometimes. Awful most times tho.

Using them interchangeably in paragraphs just felt so special, like it doesn’t need to be that pretty. In an era where every product looks almost identical, maybe a beautiful swashy italic would be the thing to make users feel like this was something different, something more thoughtful and not just another soulless clone.

Not to mention Messina also came with a mono, so we could use it for code snippets and still feel consistent. Shout out to Luzi for making this beast. You’re a legend dude.

Supersizing Messina.

Since Superhuman needed such a comprehensive license, we were like welllll, why don’t we take the opportunity to make it exacttttttly how we want? A semi-custom brand typeface?? AND we get to name it?? What a DREAM!!

Introducing Super Sans & Super Serif

A color palette full of heart and mystery.

We approached color by breaking up the name Superhuman. What can we make that feels super? What can we make that feels human?

Mysteria

For the super side of things we wanted to lean a bit into magic and mystery of superheroes and their powers, so our primary color is a purple we named Mysteria. It’s a color that elegantly straddles the line between blue and purple. We were aiming to make a color that felt like it was floating or hovering. A floating color? Lofty concept, I know. But this Mysteria color felt like a twilight sky being lit up by some sort of magical aura.

Heart

For the human side of things, we decided to get a bit more warm and moody to bring things back down to Earth. Our second brand color is something we named Heart. A deep maroon that has a sense of seriousness and professionalism to it. It’s the perfect balance to Mysteria’s lightness. When these two colors get together, it creates a wonderfully unique combo that doesn’t feel like I’ve seen it 10 trillion times.

The art of the process.

The new Superhuman works with you and helps you write every step of the way, from ideation through to final product. Whether that’s a term paper, a novel, an email to your boss to tell them that you’re quitting, a cover letter (for your new job), or even just a kind letter to a friend. The whole point is that Superhuman is almost like this invisible superpower you can tap into at any time.

For the marketing materials, we wanted to make something that felt different. Not just another faked UI screen with text that says “Emails, Faster!” We wanted to show the beauty of the writing process. And we knew we wanted it to start with the idea that no matter what you want to say, it always starts with you, a human. Human thoughts and ideas are the beginning of every written thing, so we wanted to showcase people, not products.

This is a bit of a heady concept, but before you read all of the stuff I’m about to write below, our goal was to just make something that felt pretty. I don’t know why we always need to add 15 layers (or in this case 5) of concept to everything that we do, but it’s just the Smith & Diction way at this point.

01. Human Layer — Every idea starts with a human.

At the center of everything is humans. People. Users. You. And ideas are what make us human. It’s why we named the brain, brain. Ideas are why humans built the whole world. Shamrock Shake? That was someone’s idea! Churros were also just an idea at one point believe it or not!

02. Idea Layer — This represents a kind of flow state, just expressing thoughts.

Ideas are messy and fleeting, they come and they go. So few of our ideas make it out of our mouths or our minds. Even fewer make it onto paper or get typed into the keyboard. So this layer is meant to showcase that moment when an idea falls out of your mind and tumbles down your arm into your hand and is scratched out of a pen onto paper, or scrawled on the back of a napkin. It’s meant to show that we’re not letting the computer take our ideas away.

03. Technical Layer—Then the digital tools add clarity and precision.

Speaking of computers, this is where we write now. Like it or not. No one except Taylor Swift’s ex is using a typewriter for their term paper any more. So this layer is built to represent the technical aspect of writing. The spellcheck, the paraphraser, the citation finder, anything that’s digital that helps you write. We wanted to develop something that could really morph into anything, so we worked with Gavin at Datalands who built not one but two incredible tools in Figma Make. Completely custom, just for Superhuman.

I won’t get too deep into these because I’m sure we could write an entire separate blog post about them and I know that you’ve all got places to be. So the elevator pitch is this:

Tool 1 — Superdots

We wanted to develop a tool that the Superhuman folks could use to turn any image into technical feeling things. Halftones, triangles patterns, ASCII, and even halftone patterns made out of Hero’s cursor shape. It’s really helpful when you’re just trying to have a branded feeling background texture.

Tool 2 — Superflow

This tool was created to make all kinds of patterns and linework. Just by dragging a few sliders you could build a completely custom pattern with a wide rage of shape options and variability in seconds. Then just click one button to export as an .svg.

Huge shout out to Gavin for vibe coding these things. Truly opened my eyes to the future of tool generation. We’re using new tools to create even newer tools. It’s messy, it’s awkward at times, and most times it crashes our Figma files because there are too many points. But it felt exciting and it felt like magic. Very interested to see how we work this into the future of the studio.

04. Tonal Layer — This is all about vibe. It makes the writing worth reading.

The one thing that AI fumbles on pretty often is tone. And tone matters so much, that’s why you’re reading this post right now…because I don’t write like a computer. (What if I’ve been using AI to write these all along? JK AI could never write like me, these are mostly pure stream of consciousness ramblings over the course of two weeks. No ROI, no measurable statistics, just me and my fingers trying our best to get an idea out.)

05. Output Layer — The finished piece in its final form.

And in the end it doesn’t even matter — Linkin Park. How wrong you are Linkin Park. In the actual end there’s text: a document, a manifesto, a script, a dissertation, an argument, a list, a love note. Everything results in words on a page. So the final layer is just that. The polished end of the creative writing process. We wanted to use text as texture in this final layer. So you can see each step is building to this moment.

Our team built dozens of these layered brand stories—each one with a different person and different layers throughout, telling the story of a piece of writing going through all the phases. But a brand isn’t entirely made up of marquee moments, it’s built on banner ads and website landing pages and social media. And this layer system also gives the Superhuman team a very deep toolkit to pull from for those smaller moments, too. Need a vibey background to put behind some abstract UI? Tonal layer to the rescue. Need to add a sense of precision and visual interest to your slide deck? Try a technical layer.

It’s an incredibly powerful (and incredibly complex) brand system. The asset buildout was no joke. And the work is still evolving. Every time we go to make a new brand execution, we find ourselves with more questions about how the layers can interact and how far they can flex while still being on brand. For us, that’s incredibly exciting, because it gives the brand space to evolve along with the product.

Coming soon to a screen near you!

The Superhuman product team are working tirelessly to build an experience that fits seamlessly into your life and work. I can’t wait to try it out myself. Maybe it will help make these case studies a bit more concise and digestible?? Who knows! The product will be fully rolling out to the public in 2026, we’re so hyped to hear what you all think.

None of this would have been possible without the support of the tireless creative team over at Superhuman. We got to work with design legends like Jessica Svendson and Angy Che. Then we got to hand things off and watch the magic unfold as folks like Leah Pincsak and Rebecca McMillin rolled this work out across a million different surfaces and executions.

Tons of credit goes to the full design team: Collin Whitehead, Leah Pincsak, Rebecca McMillin, Kyle Howard, Jessica Svendson, Angy Che, Erin Dame, Jonathan Larson, Sara Jacczak, Claire Rosas, James Fleming, Tammy Sun.

And of course this was a fulllllll team effort on our side, everyone pitched in and did what they do best.

Literally Everything: Chara Smith
Creative Direction: Mike & Chara Smith
Symbol: Mike Smith + Summer McClure + Tully Ryan
Wordmark: Dayan D’Aniello + Mike Smith
Type Systems: Dayan D’Aniello
Art Direction: Summer McClure + Gavin Potenza
Icons & Illustration: Summer McClure + Tully Ryan
Animation & Brand Support: Tully Ryan + Caleb Sun

Plus some major help from these incredible folks:

Animation: Justin Lawes
Sound Design: Upright T-Rex Music
Brand & Vibe Tools: Gavin Potenza
Custom Typography: Luzi Type
UI Icons: Helena Zhang
Bumper Animation: Brent Clouse

Press: If you want to use any of the images from this case study here’s a link for you. Or reach out via email to [email protected].

Did you like this project? Do you want to work with us? Let’s do it.

Shoot us an email at → [email protected]. We love talking to all kinds of folks, especially if you really love what you do.