LUSTER is a multi-brand, multi-mode design system — three brands, light & dark, and seven theming axes that re-skin an entire product from a single source of truth, mirrored 1:1 between Figma variables and production CSS.
LUSTER is built on one foundational principle: a properly architected token layer eliminates the need for duplicate components across brands. Colour, typography, language direction, density, radius, and elevation all adapt automatically, without a single component being touched. The same variables that power the Figma library are mirrored directly in production CSS, ensuring design and engineering always move in lockstep.
Most organizations expand to a second brand the same way: copy the component library, hard-code new colours, and silently multiply technical debt. The result is two codebases, two Figma files, and guaranteed drift the moment a design decision changes. LUSTER was built to eliminate that pattern entirely, supporting 3 brands × 2 modes × 7 axes from a single component set, with documentation traceable to every individual token.
All three brands share a single component library. No copying, no re-skinning, no hidden maintenance cost.
Every token name mirrors its Figma variable path exactly. Documentation that can be audited against the source of truth in seconds.
Brand and mode switching resolves entirely at runtime via CSS variable swaps. No rebuilds. No redeployments.
LUSTER's token system flows through three purpose-built layers. Components are intentionally isolated from raw values — they only ever consume the top semantic layer. This means a brand refresh or mode change requires updating a single middle layer, and every component inherits the result automatically. No manual overrides. No cascading rework.
The foundation. Raw, brand-agnostic values across full colour palettes (9 steps × 5 colour families), spacing scales, size ramps, radii, and font primitives. Pure options — no decisions attached yet.
Where branding happens. Semantic aliases carry intent, background, foreground, surface, border, and status colours. This is the layer each
brand × mode re-maps to produce its unique visual identity.
The contract layer. Per-component tokens such as menuItem/hover/bg and card/newPrice/font/color each point exclusively to a semantic alias — never a raw value. Components stay brand-agnostic by design.
Each theming axis is a fully independent variable collection. Switch any one in isolation or combine them freely, the result is thousands of valid, production-ready appearances, all generated from a single component library without writing a line of new code.
Three distinct brand identities, Diamond, Amber, and Opal, each with its own visual character.
Full Light and Dark mode support, switchable at runtime.
Bilingual-ready out of the box, LTR and RTL layout switching included.
Two type personalities. Serif and Sans-serif
Adapt the interface for different contexts, spacious for focus, compact for productivity.
Three corner personalities from sharp and structured to soft and friendly.
Four elevation levels to communicate depth and hierarchy.
Figma ↔ CSS. Pixel-perfect parityEntire interface respond in real time.
Built bottom-up using atomic design principles, this system moves cleanly from atoms to molecules to organisms. Every component includes a live preview, a token table that mirrors Figma variable paths exactly, and copy-paste-ready code for fast implementation.
Established the full Options → Semantic → Component hierarchy in Figma Variables, then structured brand, mode, density, language, radius, and shadow as seven independent, composable variable sets.
Designed every atom, molecule, and organism with all properties bound to component tokens, never raw values. Every component is brand-agnostic from the ground up.
Built a full documentation site where every component page includes a live themed preview, a Design Tokens table traceable to the exact Figma variable path, and copy-paste code for immediate use.
Conducted a full token-by-token audit across names, radii, typography, and colour values, ensuring the documentation and Figma source of truth match with 100% fidelity.
Built a real, fully wired application screen powered entirely by the token system, with a runtime control panel to swap any of the seven theming axes instantly via CSS variable switching.
Special thanks to the person whose Design Systems course played a major role in shaping the methodology behind this project.
This project was shaped by the Design Systems and Design Tokens principles we learned throughout Osama Eldreiny's course. His practical approach to scalable systems and product thinking had a significant impact on the methodology behind this case study.
LUSTER was designed and built by a team of seven, bringing together expertise in token architecture, systematic component design, and front-end implementation, delivering a production-grade system from strategy to shipped output.
Hire usExplore the full component library with live previews and token tables, or launch the interactive application and experience all three brands, both modes, and seven theming axes for yourself, in real time.
Tell us about your project — we usually reply within one business day.
Thanks for reaching out — we’ve received your message and will get back to you within one business day.
LUSTER
