How we rebuilt our logo in code from its own measurements, and why the dot after every headline is sized from the letters around it.
Our mark is a white lowercase s on black with a lime full stop. For a long time it only existed as an image file. That is fine for a profile picture, and a problem everywhere else: it blurs when scaled, it cannot change colour, and it cannot move.
Measure first
Before redrawing anything we measured the original. The dot is about a fifth of the height of the s, it sits roughly an eighth of that height away from it, and its bottom rests on the baseline.
Those three numbers do more work than any drawing. They mean the full stop can be rebuilt next to any word, at any size, and still look like ours.
One curve, one dot
The s is a single stroked curve through six measured points, with horizontal ends. We scored each version against the original pixel by pixel and stopped when the only differences left were the anti-aliased edges.
- The mark is now an SVG drawn from a few numbers in code.
- The favicon, the app icon and the nav all come from the same source.
- The full stop after each headline uses the same ratios, so it always lands in the right place.
A brand detail you can compute is a brand detail you can trust on every screen.
Because the dot is code, it can also move. On our site it drops into place after the headline settles; in our social posts it falls onto the s and bounces twice. Same dot, same proportions, every time.