Branding a Multi-Tenant Admin From One Color: How the Palette Is Built

Every store on StoreFlux gets its own admin dashboard, and store owners want it to look like their brand, not ours. That means the admin has to be themeable from a few inputs, and it has to stay readable when someone picks a color that is too light, too dark, or the wrong shade of blue.

This is how the Admin Branding page works, and how the palette is built.

One input, eleven shades

The store owner picks a primary color. The admin generates an 11-step scale from it, labelled 50 to 950, the same shape Tailwind uses. The generator converts the hex color to HSL, keeps the hue and saturation, and sets lightness at fixed targets: 96% for step 50, falling to 20% for step 950.

Lightness alone can make the ends of a scale look neon or muddy. So the generator lowers saturation at the very light and very dark steps, by 15 points near the top and 10 near the bottom, with a floor so those colors never turn grey.

Applied as CSS variables

The palette is written as CSS custom properties on the root element. The primary color drives the indigo, blue, and sky utilities, and the accent drives violet and purple. Because the utilities read those variables, the whole admin picks up the brand without changing component code.

Readable by design

Brand colors are easy to get wrong. The branding page shows the contrast ratio between text and background colors, so a store owner can see when sidebar text is hard to read. The sidebar preview is a copy of the real sidebar layout, so what you see while editing matches what gets saved.

Corners, presets, and per-browser looks

Corner style maps to a radius scale (sharp, default, or rounded) applied to the same variables used across the UI. Six presets set colors, sidebar, typeface, and corners together, so a store owner can start from a complete look and adjust from there.

Staff can also pick one of four ready-made looks for their own browser. That changes only how that browser displays the admin, not the store's branding.

What this does not cover

Admin Branding changes the admin dashboard. Storefront theme colors are a separate setting on the store and this page does not change them. Keeping them separate means a store's branding work does not silently change what customers see.

If you have handled tenant theming in a different way, I would like to compare notes in the comments.