Un seul produit, plusieurs visages.
Les clients de Tracknema veulent un portail de tracking qui ressemble à leur marque, pas à celle de Tracknema. Le white-labeling, c'est tout le produit.
Le challenge : livrer une UI de tracking temps réel qui se repeint complètement par tenant, sans fork, sans push de code, sans perdre l'accessibilité.
Une teinte → toute la palette.
Un tenant upload son logo. Le moteur extrait la teinte dominante, dérive l'arbre complet de design tokens (background, surface, border, text, accent, hover) algorithmiquement, et le push en variables CSS.
Le math : théorie HSL + clamps de luminosité WCAG-aware → chaque token dérivé reste accessible, peu importe la teinte d'entrée. Aucun tenant ne se retrouve avec du texte illisible sur sa propre couleur de marque.
Tech ennuyeuse, choix tranchants.
- Next.js
- React
- TypeScript
- Tailwind
- shadcn/ui
- HSL color math
- CSS variables
- Override par tenant
- WebSocket events
- Updates tracking live
- Routing par sous-domaine
- API config tenant
Ce qui a été livré.
Les moteurs de theme sont une forcing function pour la discipline design.
Construire un vrai moteur white-label te force à penser en tokens, pas en pixels. Chaque CSS literal est un futur bug.
↳ Tracknema · 2025Quand le design system doit survivre à un input de marque arbitraire, le système devient discipliné en deux semaines.