top of page
Overview
Silhouette Design System
UX/UI Case Study
One Engine, Four Identities: Scaling a Headless Multi-Brand System.
TYPE
Design Systems
TIMELINE
August 2024 - Present
TOOLS
Figma Variables
COLLABORATORS
Kathleen Lawless
Project Silhouette: Scaling the ALDO Group Portfolio
How a Headless Design System Cut Brand Implementation Time by 93%
Managing the visual identities of Aldo, Call It Spring, and Sperry was once a game of manual endurance. Prior to 2024, our design ecosystem was fractured across siloed Sketch libraries, forcing designers and developers into a cycle of redundant styling and "Frankenstein" codebases. Between August 2024 and February 2025, I co-led the architectural migration to Silhouette—a headless design system built in Figma that decoupled functional logic from brand aesthetics using variables and tokens.
The true test of this system came in the Summer of 2025 with the acquisition of a fourth brand, GH Bass. While our previous manual workflow for Sperry required over 1,000 hours of design styling, Silhouette allowed us to deliver the GH Bass library in just 140 hours. By bridging the gap between design and production code, we didn't just unify our brands; we gave the design team governance over the codebase and turned brand scaling into a turnkey operation.
The Chaos of "Three Brands, Three Silos"
The Challenge
Before 2024, the ALDO Group (Aldo, Call It Spring, and Sperry) operated in a fragmented ecosystem.
PAIN POINT # 1
The Tooling Debt
We were using Sketch, which required entirely separate component libraries for each brand.
PAIN POINT # 2
The Maintenance Nightmare
Updating a single global pattern meant opening three different files, manually tweaking styles, and hoping for consistency.
PAIN POINT # 3
The Developer Gap
Engineers were forced into manual styling for every brand, leading to a massive backlog of UI-specific bugs and CSS bloat.
The Solution: Migrating to Silhouette
Define & Discover
From August 2024 to February 2025, I co-led the migration from Sketch to Figma, where we built Silhouette: a headless design system designed to power our entire brand portfolio.
The Strategy
We moved away from the tedious maintenance of brand-specific silos, replacing them with a robust architecture of design tokens and shared components. By leveraging Figma Variants to standardize component logic across all brands, we achieved a true separation of concerns. This allowed us to treat visual identity as a swappable 'Head' that sits atop a universal 'Body' of code, ensuring that our design logic remains identical even as our brand aesthetics diverge.
Primitive & Semantic Tokens - Defined using the Atomic Design structure
Globally Shared Components - Built utilizing the defined variables across all brands
The Ultimate Stress Test: GH Bass
In the Summer of 2025, ALDO Group acquired a 4th brand: GH Bass. This was the moment Silhouette proved its worth. While the manual Sketch workflow for Sperry demanded 1,050 hours of design and over 1,300 hours of development across 69 tickets, Silhouette’s headless architecture allowed us to deliver GH Bass in just 140 design hours and 37.5 development hours. By achieving a 93% reduction in design time and virtually eliminating UI-related bugs, we proved that brand scaling had evolved from a grueling manual hurdle into a streamlined, turnkey operation.
The Comparison: Manual vs. Headless
This following data illustrates the shift from a "per-project" workflow to a "systemic" workflow.
Engineering Impact & Governance
Reflection
The benefits of Silhouette extended far beyond the design file.
1. Legacy Code Cleanup
With a unified token guide, the development team began purging years of "hand-rolled" CSS, replacing it with our standardized variables.
2. Global Updates
We can now push a change (e.g., updating a corner radius across 4 brands) globally via the system, rather than hunting through 69 individual Jira tickets.
3. Design Governance
Silhouette bridges the gap between design and code. We now have more control over how the UI is implemented, ensuring that what we design is exactly what the user sees.
Key Takeaways
Efficiency is the Best ROI
Reducing a launch from 1,000+ hours to 140 hours isn't just about "better design"—it’s a massive financial saving for the organization.
Scalability over Fidelity
By focusing on the headless architecture first, we built a system that was ready for an acquisition we didn't even know was coming.
Governance through Tokens
Tokens are the language that finally allowed Design and Engineering to speak the same dialect.
bottom of page