One design system for marketing and product

Two sites, two styles

At Northline the marketing site and the product had drifted apart. Different buttons, different greys, different type sizes. Customers noticed the jump when they signed up.

Share the foundations, not everything

We shared the layer that should never differ: colour, type, spacing and a handful of components such as buttons, inputs and cards. Page layouts and marketing sections stayed with the marketing team, who need to move fast and try things.

Tokens first

Every colour and size became a named token, used by both code bases. Changing the brand blue meant changing one value, not hunting through two style sheets.

What we learned

• Start with fewer components than you think you need.
• Write down why each token exists, not only its value.
• Let teams build outside the system, and pull things in when they repeat.