Next-Gen campaign
for Attio
Next Gen CRM was a multi-part campaign built to hold up across formats. It included a manifesto landing page, a portrait series illustrating 50+ contributors, a week on the NASDAQ MarketSite billboard in Times Square, and a full set of supporting launch assets for web and social.
Jonny Ruzzo's portraits
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.
Quote example
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.
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.
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