Summary:
The HOB Design System was built to solve the complexity of managing multiple brand identities (Coke, Sprite, Fanta) within a single product ecosystem. By moving away from hardcoded values and implementing a tiered variable architecture, I created a "themeable" engine that allows for instantaneous brand switching across the entire component library.
The HOB Design System was built to solve the complexity of managing multiple brand identities (Coke, Sprite, Fanta) within a single product ecosystem. By moving away from hardcoded values and implementing a tiered variable architecture, I created a "themeable" engine that allows for instantaneous brand switching across the entire component library.
The Architecture: Built for Scale
Instead of building separate components for each brand, I engineered a single source of truth using a two-tier token system:
Function: The Global Foundation:
42 raw color tokens. These are hidden from the end-user and act as the absolute source of truth.
Function: The Semantic Layer:
34 semantic tokens per brand. This layer controls color, radius, spacing, and typography across 6 distinct modes.
Instead of building separate components for each brand, I engineered a single source of truth using a two-tier token system:
Function: The Global Foundation:
42 raw color tokens. These are hidden from the end-user and act as the absolute source of truth.
Function: The Semantic Layer:
34 semantic tokens per brand. This layer controls color, radius, spacing, and typography across 6 distinct modes.
Key Result: Adding a new brand to the ecosystem now only requires defining 34 tokens, rather than redesigning hundreds of component variants.
How It Works
01. Token-Bound Components
Every component in the library—from buttons to complex navigation bars—is 100% bound to tokens. No fills, strokes, or font families are hardcoded. This ensures that when a brand mode is switched, the component's "DNA" updates instantly without breaking the layout.
Every component in the library—from buttons to complex navigation bars—is 100% bound to tokens. No fills, strokes, or font families are hardcoded. This ensures that when a brand mode is switched, the component's "DNA" updates instantly without breaking the layout.
02. One Switch, Infinite Changes
By utilizing Figma’s Mode feature, designers can switch a top-level frame from "Coke Light" to "Fanta Dark." The system automatically re-maps the semantic tokens to the new brand’s primitive values, updating the visual identity in real-time.
By utilizing Figma’s Mode feature, designers can switch a top-level frame from "Coke Light" to "Fanta Dark." The system automatically re-maps the semantic tokens to the new brand’s primitive values, updating the visual identity in real-time.
The Inventory
I developed a library of 14+ core components designed for high-density utility:
Buttons: 27 variants covering Size × Style × State.
Input Systems: Comprehensive states for text, radio, and checkboxes.
Navigation & Overlays: Fully responsive headers and modals that adapt their theme based on the parent container.
Buttons: 27 variants covering Size × Style × State.
Input Systems: Comprehensive states for text, radio, and checkboxes.
Navigation & Overlays: Fully responsive headers and modals that adapt their theme based on the parent container.
Impact & Reflection:
Efficiency: Reduced brand-specific UI maintenance by roughly 70% by consolidating brands into a single component set.
Consistency: Eliminated "design debt" by ensuring all designers pull from the same variable collection, regardless of which brand they are currently designing for.
Developer Handoff: The variable naming convention follows a strict hierarchy, making it ready for export via JSON for seamless integration with CSS variables or Tailwind themes.
Efficiency: Reduced brand-specific UI maintenance by roughly 70% by consolidating brands into a single component set.
Consistency: Eliminated "design debt" by ensuring all designers pull from the same variable collection, regardless of which brand they are currently designing for.
Developer Handoff: The variable naming convention follows a strict hierarchy, making it ready for export via JSON for seamless integration with CSS variables or Tailwind themes.