Work

How one design system serves four brands

I built Centology's design system in Figma. Three white labels run on the same components, with their own colors set by a variable mode.

  • Design system · sole designer
  • Centology (IFS) + 3 white labels
  • Since Dec 2024, ongoing
  • Figma · web portal and client app

TL;DR

One set of components for four brands, switched by a variable mode

  1. Centology's portal also runs under three other brands: LCA, EBC and DMA. Each brand gets its own set of features.
  2. My part: color and type variables, a color mode per brand, components and variants in Figma, and guidelines for developers and AI agents.
  3. In Figma, a screen changes brand with one mode. In code, each brand has its own values for the same color scale, with no semantic layer.

Context and problem

Centology is a portal for UK financial advisers and their clients. Centology also sells it to three firms, LCA, EBC and DMA, who run it under their own brands. Each brand gets its own set of features.

In the old portal, sections had no shared components, and each white label was repainted by hand, so the brands drifted apart. I was the only designer on the redesign, and the product stayed live the whole time.

I started the system on Figma styles and recently moved it to variables. The goal: one set of components for every brand, where a brand brings its own colors instead of a copy of the components.

My role

What I did

  • Built the color and type variables, with a color mode for each brand.
  • Built 200+ components and variants in Figma, with every state, on those variables.
  • Made the logo one component that switches with the brand mode.
  • Checked each built module against the components and their states.
  • Wrote type, color, icon and status rules for developers and AI agents, and matched the status keys with the developers.

Process

The system started on Figma styles. I recently moved colors and type to variables and added a color mode for each brand.

Figma Variables panel, Tokens collection: a table of Primary, Secondary and Neutral color variables with a column of values for each brand mode (on a phone, the crop shows Centology and LCA).
The Tokens collection in Figma: the same variable names, with a mode for each of the four brands.

How it works

Colors, components, rules

One set of color names, four sets of values

Primary/600 → #3E55FF→ #008AC4→ #348ABF→ #2F527A

Investment Plans page in Centology colors: filters and totals above a grid of plan tiles, each with a performance chart and an Active switch. Investment Plans page in LCA colors: filters and totals above a grid of plan tiles, each with a performance chart and an Active switch. Investment Plans page in EBC colors: filters and totals above a grid of plan tiles, each with a performance chart and an Active switch. Investment Plans page in DMA colors: filters and totals above a grid of plan tiles, each with a performance chart and an Active switch.

In the old portal, each white label was recolored by hand, so the brands drifted apart.

Components point to one set of names, like Primary/600. Switching the mode changes the value.

Why this way Components refer to a name, not a color. In Figma a mode swaps the values; in code each brand gets its own values for the same names.

Logic Edge cases
Edge cases
  • Brands differ in colors and logo; LCA also has its own font. The logo is one component, in Full and Short sizes, that switches with the same mode.
  • Status colors stay the same in every brand, so a status reads the same everywhere.
  • The names are a scale, like Primary/600, not roles like color/action/primary. The team chose not to add that semantic layer, because moving to it is hard.

One component set for four brands

Primary/600 → #3E55FF→ #008AC4→ #348ABF→ #2F527A

Input field
Input field
Type
State
Label
Hint text
Left icon
Right icon
Tag

In the old portal, sections didn't share components, so each one looked and behaved its own way.

LCA, EBC and DMA use the same components as Centology, but fewer of them, because each brand has its own set of features.

Why this way There's one set of components to design and fix; a white label brings only its colors and logo.

Logic States · Roles · Edge cases
States
Inputs have Default, Typed, Active, Disabled, View and Error. Buttons come in four types, four states, two sizes and two styles.
Roles
The sidebar has a set for each role, Admin, Adviser, Client and Employee, each opened or collapsed.
Edge cases
Some features are Centology-only, like the new Case Hub.

Rules a developer or an AI agent can follow

Typography

14 text styles · Typography variables

  1. Use Centology text styles — their values come from Typography variables (Font/…); do not recreate typography manually.
  2. Select styles by semantic role, not by visual similarity or size alone.
  1. Resolve textStyleId and the bound style name; do not infer styles from layer names.
  2. Do not apply Centology styles to other white labels.

Centology/Body / Default

Color

Tokens collection · 4 brand modes

  1. Use only Centology-scoped styles and variables — never raw HEX values.
  2. Resolve colors by token name (e.g. "Primary/600"), not by HEX.
  1. Use Entity Status Colors for state indicators — do not invent custom status colors.
  2. Do not cross-reference DMA, LCA, or EBC tokens in Centology contexts.

Primary/600, not #3E55FF

Both guidelines If no semantic match exists, report it instead of guessing.

Type, color, icon and lookup rules sit next to the components in Figma. They're written for developers and AI agents working through MCP: never use raw HEX values, and if nothing matches, report it instead of guessing.

Why this way Specific rules can be checked: a color is a variable or a raw value, a status has a key or it doesn't.

Logic Edge cases
Edge cases
11 status colors are tied to the developers' backend keys, and 91 lookup icons are numbered.

From design to code

Empeek's developers build the portal; my part is design and review, not code. They build from my screens and components with every state. Each product runs one brand, so code needs no modes: a brand is its own set of values for the same color scale.

  • Tokens

    In Figma a mode switches the brand; in code each product gets one brand's values for the same scale, with no semantic layer.

  • Components

    Developers build from the same components and states I keep in Figma.

  • Implementation review

    After each module, I check the build against the components and their states.

Entity status colors table: 11 color tokens such as Primary/500 and Additional/Red/500, each with a swatch, HEX value, backend key and state category (on a phone, only token and backend key).
Part of the color guidelines: 11 entity status colors, each tied to the developers' backend key, so design and data use the same name.

Outcome

  • 4 brands

    one set of components, a color mode for each

  • 200+

    components and variants in Figma

  • 11

    status colors, each tied to a backend key

What changed

  • Brands

    A screen in Figma switches between four brands with one mode.

  • White labels

    A white label brings its own colors and logo; the components are Centology's.

  • Guidelines

    Type, color, icon and status rules sit next to the components.

Takeaway

  • I'd agree on a semantic layer with developers at the start, while adding it is still cheap.

Next case

How I redesigned a portal for UK financial advisers

Centology portal Investment Plans screen with the client app Dashboard on a phone

Centology: web portal and mobile app

I redesigned a UK portal where financial advisers manage clients and cases, and designed the client app now on iOS and Android.

  • Fintech
  • B2B portal
  • CRM

My contribution

Sole designer: portal and feature redesign · App MVP · Implementation review

Open case

Contact

Need one design system for several brands?

I'm open to product and UX/UI roles on B2B teams. Message me and we'll set up a call.