Project Silhouette.
A headless design system that unified three brands and absorbed a fourth acquisition in 93% less time.
Three brands,
three silos,
one shared problem.
Before 2024, the ALDO Group (Aldo, Call It Spring, and Sperry at the time) operated in a fragmented ecosystem. Each brand had its own files, and every update meant doing the same work three times.
Tooling Debt
Sketch required entirely separate component libraries for each brand. Three files, three sources of truth, no consistency between them.
Maintenance Tax
Updating a single global pattern meant opening three different files, manually tweaking styles, and hoping for consistency.
The Developer Gap
Engineers were forced into manual styling for every brand, generating a massive backlog of UI bugs and CSS bloat.
"One body.
Many heads."
Between August 2024 and February 2025 I co-led the migration from Sketch to Figma, building Silhouette, a headless design system to power the entire ALDO Group portfolio.
Figma Variables
Semantic tokens like basic-primary replace hard-coded colors. The token is the brand: change the values, you change the brand. No rebuilds, no drift.
Figma Variants
A single source of truth for component logic. Every state, size, and icon configuration is shared and inherited across every brand.
The Headless Result
The "head" (brand identity) swaps instantly. The "body" (code and logic) is identical across all four brands.
Live Token Preview
Same system, four identities.
One token layer. Change the values, you change the brand. Nothing gets rebuilt.
Aldo
Bold · Black · Iconic
Colour Tokens
Type · Jost
Aa
The quick brown fox
Components
r: 0
Call It Spring
Sharp · Minimal · Electric
Colour Tokens
Type · Roboto Flex Modified
Aa
The quick brown fox
Components
r: pill
Sperry
Heritage · Maritime · Gold
Colour Tokens
Type · Self Modern / Cadiz
Aa
The quick brown fox
Components
r: 0
GH Bass
Rugged · Earthy · American
Colour Tokens
Type · Besley / Open Sans
Aa
The quick brown fox
Components
r: 0
Behind the System
Inside Figma Variables.
Primitives (Quarks) feed semantic tokens (Ions). Multi-brand values cascade from a single source of truth.
Variants in Motion
One component library, every state.
Variants encode every state, size, and configuration. Everything is shared across the four brands.
Modes & Themes
Swap modes instantly.
Light, dark, and every brand share the same token graph. One source of truth, many contexts.
GH Bass: the acquisition we didn't plan for.
In Summer 2025, ALDO Group acquired a fourth brand: GH Bass. Silhouette had to scale to a brand we hadn't designed for and didn't know was coming, and it did.
By simply mapping GH Bass's brand identity onto existing tokens, we delivered all design components in a fraction of the time a conventional launch would have required.
Less time than previous
brand launches
By the numbers.
The shift from per-project work to systemic work, measured across three metrics.
Past the design file.
Cleanup of Legacy Code
With a unified token guide, the dev team started purging years of hand-rolled CSS in favor of standardized, predictable variables.
Global Updates at Scale
Push a change (a corner radius, a shadow) across all four brands at once, instead of hunting through 69 individual Jira tickets.
Design Governance
Silhouette bridges design and code. We control implementation now, so what we design is what users actually see.
Efficiency is the Best ROI
Reducing a launch from 1,000+ hours to 140 hours saves the organization a meaningful amount of money on top of the design wins.
Scalability over Fidelity
Designing for headless architecture up front meant the system absorbed a fourth brand without a rebuild.
Governance through Tokens
Tokens gave Design and Engineering a shared vocabulary that both teams actually use.
"Tokens gave Design and Engineering a shared vocabulary that both teams actually use."
Co-Lead Designer · ALDO Group