We shipped an updated logo today. It took us ten years and three versions to get here, and the story of how we got here is really a story about why the details that nobody notices are exactly the ones worth caring about.
Version one: a GitHub issue and a goofy hippo
The first Happo logo has the distinction of being immortalized in a public GitHub issue. Here's the thread. I made it in a rush, sometime in mid-2016, and it showed. It was pretty goofy looking, which was just fine for Happo at the time as a fledgling open source project.
That was almost exactly ten years ago. If you want to know how Happo got its name in the first place, we wrote about that separately. The short version is that the name came first and the hippo followed.
Version two: the icon that stuck
The second version came from our friend Malin Trotzig. She's the one who introduced the smiling cartoon hippo that's been in our logo ever since.
That icon has survived because it's right. The shapes are simple and it looks nice, fun, and happy—which is what Happo is supposed to feel like to use. We get compliments on it regularly. When we sat down to work on the new logo, there was no question the hippo was staying.
Version three: the wordmark and the circles you won't notice
The new version is really about the text part of the logo, a.k.a the wordmark. The icon is Malin's, unchanged.
We landed on the Outfit typeface, a clean geometric sans-serif, because of something specific: the letters in "appo" carry a recurring circular motif that echoes the round body of the hippo icon. The bowls of the a, the two ps, and the o all share that same rounded quality. Once you see it, the whole word feels like it was built from a single repeated form, a quiet echo of the hippo itself.
The thing is, when Henric looked carefully at the Outfit letterforms, he noticed the circles were not quite identical and wanted to see how it would feel if they were. So while tuning the kerning, I adjusted the vectors until the circles were the same. Here's the original Outfit wordmark on top, with our adjusted version below:
Probably most people would never consciously notice it, and that's fine, because this was never about fixing something broken. The original typeface didn't feel wrong. We just had a concept we believed in and wanted to execute fully. When details don't quite line up, something feels subtly off, and when they click into place, the result feels calm and easy. You usually can't say why, but that quiet rightness is exactly the point.
Getting to "identical circles and leave it alone" took a while. The exploration image above shows how many directions we tried before landing there. We were tuning four things simultaneously: the size of the hippo relative to the text, the weight of the text, whether to enclose the hippo in a circle, and various letterform modifications.
The circle enclosure direction started to feel like the Jiffy Lube logo, so that went away fast. The letterform experiments were harder to let go of. Removing the top stem from the a and smoothing out the stems on the ps gave the whole wordmark a 70s retro feel — interesting, but wrong for us, and it hurt legibility. Slashing the bottom stems of the ps diagonally felt a bit too rock and roll. What we kept coming back to was restraint: clean stems, identical bowls, nothing that pulled personality in a direction we didn't want. Professional, calm, high quality.
Why this connects to how we build Happo
I don't want to oversell a logo tweak into a product philosophy lecture, but there is a real connection here to how we build Happo.
A lot of what Happo does is make the invisible visible. When a developer reviews a CSS diff — a few lines changing some spacing or color — it's genuinely hard to turn that into a picture in your head. It's even harder when you're accounting for different browsers, different viewports, and every component in your app. As your team and project scale, this becomes increasingly more challenging. Happo's visual regression testing surfaces what the diff actually looks like. Our accessibility testing feature works the same way: by making accessibility issues visible to developers earlier, it becomes possible to ship higher-quality products without requiring everyone to be an accessibility expert.
The logo is a small proof of the same instinct. Most people won't consciously notice that the circles in "appo" were adjusted to be identical. But caring about that kind of detail, the kind nobody asked you to care about, is how you build something that just feels right, even when the reason is invisible.
Where to get the new logo
If you want the SVG for a blog post, a talk, a PR review, whatever, you can find it and our full brand assets at happo.io/brand.
Ten years from a rushed GitHub issue to here. The hippo made it the whole way.
