White-label product design: challenges and solutions.
When your product lives inside another company's platform, it has to look like theirs and still work. What we've learned from building multiple white-label products: as few tokens as possible, actions that stay clear in any brand, and testing in every partner's colours.
- Published
- 14 October 2026
- Reading time
- 5 min
- Topic
- Product
Chapters
A white-label product lives inside another company's platform. It wears their brand, sits in their app or onboarding, and their customers may never know it's yours. I've designed this kind of product twice now: first at Codat, whose products are sold to banks and financial institutions to help the small businesses that bank with them, and now with InstaSwitch, whose account switching runs inside banks' and fintechs' onboarding. Very similar users, very similar problems.
The reason to white-label is trust. Most small business owners have never heard of InstaSwitch, or Plaid, or Codat, and a screen in an unfamiliar brand asking for their banking details is a reason to stop. The same screen in their own bank's colours feels like part of the bank. So the product has to take on each partner's brand convincingly, and still work in every one of them.
That's harder than it sounds. Here are the problems we keep running into, and what we do about them.
Start neutral: font, icons and colour
The first instinct is to design the product in your own look and let partners reskin it later. That produces a flow full of decisions that only make sense in your colours: an accent that clashes with a partner's primary, an illustration style nobody else owns, a hierarchy that depends on one particular shade. The structure has to hold up whatever brand gets poured into it, so the base has to be neutral.
Use a very common font. Something partners won't notice and that looks at home next to their own type. Letting partners pick their own font is possible, but it's a lot more complicated: different widths change line lengths, buttons and truncation on every screen, so treat it as a separate project.
Use a very neutral icon set. Simple, consistent outline icons with no personality of their own. A distinctive icon style is a brand decision, and it's the partner's brand on show, not yours.
Use colour sparingly. Anything not set by the partner's brand should be a very common colour that sits happily next to lots of brands: plain neutrals for surfaces and text, standard reds and greens for errors and success.
Use as few tokens as possible
The aim is as few brand tokens as possible, while keeping the actions clear. On InstaSwitch we boiled a partner's brand down to five values:
Brand colour, for the main action.
The text colour on it, so a pale brand colour still gets readable button text.
An accessible variant for links, for when the brand colour is too light or too dark to read as text.
A focus ring, so keyboard users can always see where they are.
Button radius, because a squared-off bank and a rounded fintech feel different before you've read a word. Ours defaults to 8px.
Hyper-customisation is doable. You can let partners choose lots of colours, but every extra token is more admin, either for the client filling it in or for you setting it up, and more combinations to test. Five values are easy for a partner to give you and easy to test properly. Twenty become a second design system that nobody maintains.
Brands aren't just colour
It's tempting to think a partner's brand is their colour. Corner radius does almost as much. Fully rounded buttons, square ones and everything in between change how the whole product looks and feels, before anyone has noticed the colour.
That's why radius made the token list. It's quite amazing how these tiny changes, a colour, a radius, the text colour on a button, end up making the same flow look like that brand.
When three colours all say "click me", none of them do.
One coloured button per screen
The rule we lean on most: only one button on a screen gets the brand colour. Everything else is secondary. When three colours all say "click me", none of them do.
In a single-brand product you can get away with a little colour noise, because you've tuned your palette to cope with it. In a white-label product you haven't, and you can't. A partner's brand colour might be loud, muted or black. If it appears once per screen, on the action that matters, it works whatever it turns out to be.
Design for the black button
A lot of brands use black as their button colour, and black makes actions less obvious. It looks like text, like a heading, like everything else on the page. So we design every screen assuming the brand colour might be black: the main action is the only filled button, it sits in the same place on every screen, and secondary actions are clearly lighter.
The same goes for accessibility. The product has to stay accessible whatever colour a partner uses, which is what the accessible variant token is for. Text links are usually fine in the brand colour and bold. If the brand colour is black, or too pale to pass contrast, you can't rely on colour to say "this is a link", so you underline them instead.
There are lots of small considerations like this that you'd never run into designing for one brand. You only find them by trying the product in brands that aren't yours.
Lock the colours that carry meaning
Red and green don't change with the partner. Errors look like errors and success looks like success in every theme, including the ones where the brand colour is itself red or green. It's a small rule that prevents a very specific problem: a failed payment that looks like a branded button.
You don't need many of them. A light and a dark version of each is enough, so they read on light themes and dark themes alike.
Test in every partner's colours
Always test the product in your partners' actual colours. Not one example brand, all of them, because each one breaks something different.
The most useful thing we did on InstaSwitch was build a prototype where you can watch the brand theme switch in real time: the real components, several partner themes, one switcher. A rule that breaks in a particular partner's colours shows up straight away instead of after launch. It made life easier for the developers, who could see exactly what each token changes, and it made sharing easier too, because every partner and prospect can see the product in their own branding.
It isn't difficult to set up. If the tokens are already defined, the switcher just swaps their values. And the same build turns into a sales tool: a bank can click through its own version of the flow before anything ships.
If you're building a white-label product
A few questions worth asking before you design another screen:
Which of your current design decisions only work in your own colours?
How many values would a partner need to give you to make the product theirs? If it's more than a handful, the system will drift.
Does every screen have one obvious action, even if the brand colour is black?
Which colours carry meaning, and have you locked them, in light and dark?
Can you show a prospect their own brand in a working prototype, or only on a slide?
The aim isn't a product with no personality. It's a product whose personality lives in its structure and its words, so it survives being dressed in someone else's clothes.
The work behindthis post.
Starting with InstaSwitch, the project this post draws on, written up in full.
Keep reading.
All posts →Early stage, scaling or established?
Let's talk.
Most of our work is with fast-moving startups, but we work with teams of every size. Tell us what you're building and we'll tell you honestly how we'd help.