Smashburger Design System

Objective

Smashburger initiated a global rebranding to align with their updated registered trademark and brand identity. Upon evaluating the legacy files, I identified that the inherited architecture was fundamentally broken; it suffered from deep visual inconsistencies, lacked a structured design token framework, and lacked the component depth required to scale effectively.

Solution

I began by analyzing the core business objectives and brand direction to ensure the design system would support long-term brand equity. Because Smashburger operates primarily in the US market, digital accessibility (WCAG compliance) was established as our non-negotiable priority, followed closely by design consistency and operational quality. Since we lacked immediate engineering resources to refactor the codebase, I strategically isolated our scope to design-side mitigation. By overhauling the architecture completely within Figma first, I successfully arrested ongoing visual debt and established a clean, future-proof blueprint for eventual production deployment.

My Role

As the Lead UX/UI Design Manager for the global team, I oversee the hands-on design for North American (NA) projects, treating the NA regional team as a key internal client. I serve as a person in charge of bridging the gap between NA requirements, global product owner, and our external development partners to define and execute the design direction.

Design Strategy and Directions

When the business pivoted our overall brand strategy, I immediately stepped in to translate this new vision into a viable digital design language. I developed and pitched two distinct conceptual directions to the business and product leadership: a dark-themed aesthetic and a light-themed aesthetic. I strongly recommended proceeding with the light theme, driving the decision through two critical lenses: - Accessibility & Compliance: The light theme naturally aligned with WCAG/ADA contrast requirements out of the box, mitigating compliance risks for our digital products. - Operational Efficiency: Managing a dark interface requires a flawless asset pipeline where product photography must be perfectly masked and transparency-optimized. The light theme significantly lowered our long-term asset production overhead, ensuring the product team could scale content easily without bottlenecking development.

Project Gallery Image for 50% width of the screen #1

Project Gallery Image for 50% width of the screen #2

Design tokens Architectural Blueprint & Atomic Methodology

I began with a comprehensive audit of the legacy Smashburger design system to evaluate our delivery timeline risks. The audit revealed that a fractured atomic structure was severely bottlenecking our speed; without a rigid component hierarchy, feature delivery would inevitably lag. To ensure long-term scalability, I Initiated a systemic overhaul. I rearchitected our design tokens into a strict three-tier hierarchy (Primitive, Semantic, and Component tokens) and component variants. This foundational shift not only mitigated our timeline risks but created a resilient infrastructure that automated visual consistency across the entire product.

Color System

I engineered a comprehensive color system that conveys our brand identity and system components through a strict, three-tier token hierarchy. The architecture begins with primitive tokens to capture raw values, which then map directly to a second layer of semantic tokens. This semantic tier acts as the centralized logic controller for our foundation, governing how colors are applied globally and ensuring predictable style inheritance across the entire asset library. Within the semantic token layer, I established a strict organizational framework based on functional application and information hierarchy. I categorized tokens into four core structural roles (Background, Foreground, Border, and Text/Icon) and further divided them into three distinct prominence tiers (Primary, Secondary, and Tertiary) to safeguard UI utility. Furthermore, I mapped interaction states (such as pressed, dragged, and disabled) directly as modifiers within each structural token group. Consolidating state logic directly with its base component tokens simplified token discovery, making it intuitive for the design team to locate and apply the correct states accurately.

Component color tokens

The Component tier scopes specific style properties directly to individual UI elements across our library. These tokens explicitly reference the semantic layer, creating an abstraction layer that allows individual components, such as specific buttons or input fields, to be customized independently without breaking our global variables. I provided the design system with the granular flexibility needed for targeted style overrides while keeping our foundational architecture completely protected.

Learning Recap

Drsign Impact

Rearchitecting the Smashburger design system was the critical lever that de-risked our global rebranding launch. Moreover, it established systemic visual consistency across the entire user interface, enabling me to deliver the new rebranding designs in strict alignment with our project milestones and stakeholder commitments within just three months.

What I learned

This initiative reinforced that systematic thinking and proactive planning are essential for delivering consistent product outcomes. Taking the time to build a structured, predictable token framework completely insulated the team from chaotic workflows, proving that a disciplined design strategy is what ultimately transforms complex project requirements into reality.

The Challenge

Given our aggressive three-month delivery window and restricted engineering capacity, I had to ruthlessly prioritize foundational stability over absolute perfection. Operating under these constraints meant acknowledging that certain granular token optimizations had to be deferred to our v2 roadmap. With more time and active developer alignment, my immediate next step would be to conduct a comprehensive audit of the production code repository to map our new Figma variables to live development tokens, narrowing any remaining architectural gaps between design and engineering.