One product, many faces.
Tracknema's customers want a tracking portal that looks like their brand, not Tracknema's. White-labeling is the whole product.
The challenge: ship a real-time tracking UI that fully repaints itself per tenant, without forking, without code-pushes, without losing accessibility.
One hue → the whole palette.
A tenant uploads their logo. The engine extracts the dominant hue, derives the full design-token tree (background, surface, border, text, accent, hover) algorithmically, and ships it as CSS variables.
The math: HSL color theory + WCAG-aware lightness clamps means every derived token stays accessible, regardless of input hue. No tenant ever ends up with unreadable text on their own brand color.
Boring tech, sharp choices.
- Next.js
- React
- TypeScript
- Tailwind
- shadcn/ui
- HSL color math
- CSS variables
- Per-tenant override
- WebSocket events
- Live tracking updates
- Subdomain routing
- Tenant config API
What shipped.
Theme engines are a forcing function for design discipline.
Building a real white-label engine forces you to think in tokens, not pixels. Every CSS literal is a future bug.
↳ Tracknema · 2025When the design system has to survive arbitrary brand input, the system gets disciplined fast.