linexo is the bike insurance brand of WERTGARANTIE. The brand was set. I joined the team as a freelancer, and together we built the concept for the website: a token system, a design system and the application flows that turn a tariff into a contract. Today, linexo is number one in specialist bike retail.

Client

linexo

Services

Concept, Token system, Design system, UI design, Application flows

Period

February – September 2024

Role

UI Designer

Website

linexo.de

linexo is a German brand, so the site is in German. I rebuilt it from the live site, because the Figma files stayed with the client. Tokens, prices and texts come from linexo.de. Nothing you enter is sent.

The brand stood when I joined: the name, the logo with its ring, dark blue, yellow and turquoise. Our job was to make it work on the website and in the application flows.

Three colours carry the brand, all from the ring in the logo. Each one is a scale, from dark-blue/25 to dark-blue/950.

One typeface, Outfit, in four weights. Bold for headlines, semibold for buttons and labels, light for running text. The scale grows with the screen: the base is 16 px on phones, 18 px on tablets and 21 px on desktop, so an h1 goes from 40 to 56 px.

So we turned the colours into variables. Primitives hold every scale. Tokens give each colour a job: background, text, primary action, border. And every token has one value per theme, the way Figma shows modes. Three themes: default, sunlight and ocean.

Components only ever use tokens. That is why the same tariff card or button works in all three themes without a second version: default on white, sunlight on yellow, ocean on dark blue.

A theme points every token to other primitives. Switch it below and watch the whole section change.

We set themes on sections, not on pages. A page is a stack of sections, and each one carries its own data-theme. Switch it, and the section turns from white to dark blue or yellow, while the structure inside stays the same. No second component, no page variant. That fit linexo better than thinking in pages, because one page mixes light and dark sections.

The theme tokens fall into four groups. The name says what a colour is for, never which colour it is. That is what lets a theme swap the colour underneath.

base

The section itself. background fills it, highlight is the accent on top: dark blue on white and yellow, yellow on dark blue.

text

Running text in three levels, from primary to tertiary, plus labels. On dark blue they turn light, on white and yellow they stay dark.

state

Everything you can press. Primary, secondary and tertiary actions, each with default, hover, active and selected.

surface

Areas inside a section. base sets lines and borders, the rest belongs to alerts: success, warning, error and info, each with a fill, a border and an icon colour.

Every component reads its colours from the semantic tokens, never from a primitive. So each one works in every theme. Like in Storybook: pick a component and a story, change the props, switch the theme.

Templates put the components together. Five carry the site: the start page, the product page for each bike type, the service pages, the magazine and the application flow, which takes you from a tariff to a signed contract in five steps. Each one is a stack of sections, and each section brings its own theme.

• Broffee · An app for home baristas. Designed, built and shipped by me.June 2026 – today
• HRPuls · Redesigning an HR app, one feature at a time.November 2024 – today