case study

LYNX

A brand you trust with your money

Design System

Bobcat

Challenges

Rebrand
EAA

Scope

Figma library
Docs
Development
Training
Process

Lynx made its name as the first European online broker to offer access to all global markets.

But as competitors followed, access alone was no longer enough to stand out.

Ease of use and trust became key to its competitive edge. A design system is at the heart of that operation. Consistent UX and design meant a more trusted brand.

Lynx understood this better than anyone; not only did we get the go-ahead to reinstate their design system, Bobcat, but they also initiated a full rebrand simultaneously.

Would rebuilding their design system hold up mid-rebrand?
Better yet, could it benefit the brand?

When two clocks started ticking, ours faced another complication: the European Accessibility Act made accessibility a legal requirement. On the web, many accessibility issues are solved by semantic HTML.

A <div> can be styled to look exactly like a button but carries no meaning: no tab-key navigation, and screen readers won’t recognize it as a button. A real <button> or <select>carries that meaning and the browser's built-in accessibility.

Rather than reconcile visual differences the rebrand would soon replace, we first focused on what components do, not how they look.

nothing focused

A new path emerged via semantics

Consolidate the markup and functionality of components

what it does

Apply semantic design tokens

what it means

Bring in the new UI values, once the brand was ready

how it looks

With components wired to tokens, rolling out the new brand became much easier. The newly released Token Script also revealed an unexpected advantage for the rebrand.

Onboarding product teams

Our training and workshops gave product teams the knowledge they needed to get started. Designers and developers then worked together to finalize component blueprints, ensuring properties and behavior aligned across products.

A shared design system also required a common front-end direction. We saw this as an opportunity to modernize and build components in three candidate frameworks, testing them against real-world use cases and new requirements.

Together with the in-house team, we overhauled the delivery pipeline to support this shared way of working. Accessibility checks, visual regression testing, Storybook, versioning, and private npm packages allowed teams to reliably build, test, and distribute components and design tokens.

With the groundwork in place and component blueprints agreed upon, designers turned to aligning visual design. With the new brand still taking shape, the focus shifted from how things looked to what they communicated.

Same border, different meaning

By now, early concepts for the rebrand had emerged, but colors and corner radii were still undecided. We could establish which components belonged together from a UX perspective and which visual properties should make those relationships recognizable.

A ghost button that looks exactly like an input field might be consistent but sends the wrong signal. Same border, different meaning.

So we grouped components into visual families, sharing properties such as corner radius

Radius families: components grouped by the corner they share

04812

Boxes

Cards, modals, alerts

Fields

Inputs, selects, textareas

Selectors

Checkboxes, toggles, radio buttons

Actions

Buttons, icon buttons, split buttons

The final look was the rebrand team's call. Now they could make those decisions per family, not per component. We found a way to riff on new visual directions almost as quickly as we imagined them.

Rebrand on repeat

Enter the newly released Token Script. We could generate new global token values and watch an entire bento-style collection of components change before our eyes in Storybook

Change a value, see the effect across the system. Adjust, compare, repeat.

That flexibility came in handy when we turned to the marketing pages. Unlike the data-heavy dashboard, they needed room to breathe. We introduced two density modes: Compact and Comfy. With Token Script's support for logical expressions and multipliers, we could calculate both scales from the same foundation, adapting the same components to very different needs.