Brand refresh
for Attio
Design systems only work when people can actually use them. Our token and typography setup had become overly specific and hard to remember, and even simple website updates meant extra back and forth between design and engineering.
That’s why Alex K. and I partnered on a side project to rebuild the foundation: a simplified typography and color token system. The goal was to introduce a shared scale, clear naming, and a core and semantic structure that stays consistent across the site.
The result is a system that keeps the website cohesive across pages, works smoothly in light and dark themes, and is easy to apply and maintain.
Website type pairing
Typography
We moved to names that describe what something is, using a shared scale. That made the system easier to learn, easier to reuse across the website, and quicker to apply in both Figma and code.
It also made typography rules explicit: every text- token uses Inter, and every text-heading- token uses Gilroy, so engineers can move fast without guessing.
Headings stay simple and scale-only, while body text supports lightweight emphasis through variants.
Website type scale
Color
We followed the same approach for color, rebuilding it into two layers: core and semantic. Core tokens are a simple palette on a shared scale (for example Blue-100 to Blue-900) and they only hold raw values.
Core palette
Semantic tokens are what we actually use in designs and code, describing intent across the website (backgrounds, surfaces, borders, text, and states) while always mapping back to core.
This keeps color usage consistent across pages, makes light and dark mode a mapping change instead of a redesign, and gives engineers a clear, stable set of names they can implement quickly.
Semantic palette - light
Semantic palette - dark
Outcome
In the end, this project turned a hard-to-use setup into a simple system both design and engineering can rely on. A shared scale, clear naming, and core plus semantic tokens made typography and color consistent across the website, easier to maintain over time, and faster to ship.
With light and dark themes handled through token mapping and Figma variables in place, updating or extending the system no longer requires rework or translation.
Hej hej