Case study · White-label design system · 2019–2020

Uplight: A marketplace any utility can make its own.

Uplight's Marketplace is a white-label store energy utilities use to sell efficiency products, smart thermostats, LED lighting, EV chargers, with instant rebates baked into the price. The catch: it can never look like Uplight. I designed the configurable system that lets any utility run it as its own branded shop, and authored the onboarding guide that turned every bespoke setup into a repeatable, accessible launch.

ROLE: PRODUCT DESIGNER COMPANY: UPLIGHT SCOPE: DESIGN TOKENS · CONFIG · ONBOARDING GUIDE
7
Configurable brand elements
WCAG AA
Held across every utility brand
2
Brandable typefaces, headline + body
1 guide
Bespoke setup became repeatable
The problem

Brandable without becoming inconsistent.

Every new utility client meant re-skinning the store, and doing it by hand was slow, error-prone, and easy to get subtly wrong: an off-brand color here, a failed contrast check there. The design problem wasn't a screen. It was a system: what exactly can a client change, and what has to stay fixed so the experience never breaks?

And it had to scale past me. Onboarding couldn't depend on a designer hand-holding every launch; it needed to be something a project manager and a client could run together, and get right the first time.

"White-label design isn't about one beautiful screen. It's about deciding what a hundred different brands are allowed to change, and what they aren't."

The productMarketplace
Uplight Marketplace running as a utility-branded store on laptop and phone, selling smart thermostats with instant rebates
One platform, running as each utility's own store.
PART 01

The guardrails: what flexes, what never does

I broke the store into seven configurable elements: name, logo, top navigation, global colors, footer, typography, and a multi-typeface option, and defined exactly how each behaves when a utility supplies its brand. Freedom everywhere else came from a tight set of rules:

Contrast is law

Every configurable color must pass WCAG AA contrast on its background. No exceptions, no launch without it.

Colors keep their name

Brand colors must stay true to their semantic role. Blue has to read as blue, or customers relearn the interface.

Logos have limits

Logos cap at 350×70, and dark navigation bars require a light logo variant so co-branding never disappears.

Type flexes, weights don't

Clients may swap up to two typefaces, headline and body, on a fixed weight scale that keeps hierarchy intact.

ConfigLogo layouts
Three logo layout options that let any utility co-brand the store
Three logo layouts cover every co-branding case.
ConfigTop navigation
Every configurable region of the top navigation, mapped for clients
Every configurable region of the nav, mapped for clients.
PART 02

Brand changes. Meaning doesn't.

The key move was separating brand from meaning. A utility can change its palette, but the semantic colors hold across every instance: green always signals savings and instant rebates; orange always signals a sale and drives the add-to-cart and checkout actions.

That's what lets the same UX feel native to PSEG, BGE, ComEd, or Focus on Energy without re-teaching customers what a color means. The store can wear any brand; the shopping never changes underneath it.

SystemGlobal colors
The global color system: brand colors vary per utility while semantic colors stay fixed
Brand colors vary. The semantics stay fixed.
SemanticsGreen = savings
Green instant-rebate pricing shown consistently across product cards, detail pages, and the cart
Instant rebates read green on cards, detail, and cart.
SemanticsOrange = action
Orange sale indicators and primary add-to-cart and checkout actions
Sales and primary actions stay orange, in every brand.
SystemTypography
Configurable typography: up to two brand typefaces mapped onto a fixed weight scale
Up to two brand typefaces, mapped to a fixed scale.
PART 03

The Configuration Guide: onboarding as a product

The system only pays off if launches don't need a designer in the room. So I authored the Marketplace Configuration Guide: a single document that turns a bespoke setup into a clear, guided process a project manager and a client can run together.

It tells a utility exactly what to send, walks through every configurable element with real examples from live utility stores, and bakes the accessibility and semantic color rules into the instructions, so a store can't be configured wrong. Instead of a back-and-forth discovery for every launch, one guide gets a branded, accessible store live.

Marketplace Configuration Guidev1.0 · 2019
  • Defines the exact brand assets to provide: colors as Hex/RGB/CMYK (no Pantones), a vector logo, font files, any web style guide
  • Walks every configurable element with layout options and real examples: PSEG, BGE, Focus on Energy
  • States the accessibility and semantic color rules up front, so compliance is the default, not a review step
  • Turned per-client discovery into a repeatable launch a PM and client can run without a designer
Outcomes

Onboarding went from bespoke to repeatable.

×4
Major utilities, one system

Any utility can now stand up its own Marketplace: fully branded, accessible by default, and consistent with the shopping patterns customers already understand. PSEG, BGE, ComEd, and Focus on Energy all run on the same system without sharing a pixel of brand.

The configuration guide is what made onboarding efficient in practice: it gave product managers and clients a shared playbook, replaced per-client discovery with a checklist, and guaranteed WCAG AA by construction rather than by review.

  • The real deliverable was a system of constraints, not a comp. The hard decisions were what to lock down so everything else could safely flex.
  • Documentation is design. The guide scaled Marketplace more than any single screen, because it let other people launch it correctly without me in the room.
  • Accessibility as a configuration rule beats accessibility as a QA step, every time.

Want the longer version?

Happy to get into how the system was structured and what it took to keep it consistent.