Metrics got its own brand: an eye mark, Poppins, and Arimo
A sub-product under a parent brand does not have to wear the parent's fonts, or the parent's logo. We gave Metrics its own, and a public page to prove it.
One PR, one identity: Metrics' own icon, its own palette, and a typeface that is not gattyworks.com's.
This week Metrics, our first-party analytics product, got a public brand-kit page at metrics.gattyworks.com/design. Our first pass got the assignment backward: it mirrored gattyworks.com's own kit, GW monogram and all. We caught it and rebuilt the page around what Metrics actually is.
The first draft copied the wrong brand
gattyworks.com has had a public brand kit for a while: logo assets in every colorway, color swatches, type specimens, the spacing scale. Easy to reach for that page as a template and copy its content wholesale onto the new subdomain page, GW monogram, teal-on-white palette, Google Sans and all. That is exactly what happened first. It shipped, it looked complete, and it was documenting the wrong product.
Metrics is not a reskin of gattyworks.com. It is a sub-product with its own icon: an eye, teal, because the product's whole job is watching what happens on a visitor's site. It already lived as the site's favicon, an eye inside a rounded black square. A brand-kit page that shows GattyWorks' G-and-W monogram instead of that eye is not a brand kit for Metrics, it is a brand kit for GattyWorks parked at the wrong URL.
What the page shows now
The corrected page has three sections, not four. Logo: the eye icon plus the word "Metrics" set in Poppins, shown as live markup rather than a flat export, so it can never drift out of sync with a real font update. Colors: Metrics' actual dark-by-default palette pulled straight from its own design-system doc, with a working toggle so the light theme is something you can see, not just read a hex code for. Typography: the real type pair the product ships with. No QR generator, and no spacing scale either, because gattyworks.com has a documented 4pt system and Metrics does not; inventing one for a brand-kit page would have been fabricating a fact to fill a template slot.
One more thing turned up the same day, on the same review: the icon file that page, the nav, and the landing header were all pointing at was `favicon.svg`, an eye inside a rounded black square. Right for a 16px browser tab, where a filled shape reads better than a thin line at that size. Wrong everywhere else, where it just added a box nobody asked for. We split it: `mark-eye.svg` is the same paths with the square dropped and the viewBox cropped tight to the eye's real bounding box, computed with `getBBox()` rather than eyeballed. The favicon keeps its tile. Everything else on the product now shows the eye alone, and a touch larger for the same image size, since a tighter crop fills more of the box.
Why the product does not wear the parent's fonts
gattyworks.com sets its display type in Google Sans and its labels in JetBrains Mono. Metrics used to inherit a third combination, Hanken Grotesk and Inter Tight, left over from an earlier pass. Neither choice was wrong exactly, but neither was a decision either. This week we made one: Metrics' brand wordmark, the word "Metrics" next to its icon, is set in Poppins. Everything else on the product, headlines, body copy, buttons, table cells, is Arimo.
The reasoning: a marketing site and a dashboard product are different jobs. gattyworks.com is selling a decision in one scroll. Metrics is something a person reads numbers off of every day. The parent site's display face is built for a handful of oversized headlines; a dashboard needs a body face built for density, tables, and long sessions, not for looking impressive in a hero. Giving the product its own identity says that difference out loud instead of pretending the two surfaces have the same job.
"Brand image" here means one specific thing: the icon plus the word "Metrics" set together. That pair is the only thing in Poppins. A sub-product needs to look distinct enough to recognize on its own, not so distinct that it forgets whose account it lives in; the wordmark carries the identity, the body text carries the reading.
What actually changed
Two CSS custom properties, `--display` and `--body`, defined once each in the landing page's stylesheet and again inline in the console's HTML. That is the whole mechanism: every rule on both surfaces already read type through those two variables, so the swap was two lines per file, not a find-and-replace across hundreds of rules.
--display: "Poppins", system-ui, sans-serif;
--body: "Arimo", system-ui, sans-serif;One leftover caught in review: `.brand-dot`, the small "gattyworks.com" tag under the wordmark, had its own one-off Space Grotesk declaration instead of reading the body variable. It is sub text, not the brand image, so it now reads `var(--body)` like everything else. A hardcoded font-family is exactly the kind of thing that survives three redesigns because nobody greps for it.
The /design page's own type section shows the real pair too, Poppins and Arimo, not gattyworks.com's Google Sans. That is the one place the correction mattered most: a brand-kit page that shows a different typeface than the product actually uses is not documentation, it is fiction with good production values.
We verified the swap the boring way: load each page, run `getComputedStyle` on the wordmark and on a body paragraph, read back the actual `font-family` the browser resolved, not the CSS we hoped landed.
landing brand wordmark: Poppins, system-ui, sans-serif
landing body text: Arimo, system-ui, sans-serif
console brand wordmark: Poppins, Arimo, system-ui, sans-serif
console body text: Arimo, system-ui, -apple-system, "Segoe UI", sans-serif
design page nav wordmark: Poppins, system-ui, sans-serif
design page theme toggle: data-theme attribute flips, palette repaints live
landing + design icon src: /mark-eye.svg (no background rect)
favicon link href: /favicon.svg (background rect unchanged)