0 to 1
Shared design systems. Teams had none before Bespoke
9
Brands on one core, each with light and dark mode
98+
Components, replacing brand-specific libraries
3
New roles the work led to: content design, accessibility, front-end
The customer problem
Anywhere Real Estate, formerly Realogy, was the parent company of brokerage brands such as Coldwell Banker, Century 21, Corcoran, ERA, and Sotheby’s International Realty. Its products were designed and built in silos on an off-the-shelf design system.
Fragmented tools and processes made consistency and reuse difficult across brands.
Teams needed a flexible system to support both B2B and B2C product needs.
Designers and developers sought clearer guidance and alignment on system thinking.
Before the design system
Design work lived in brand-specific files on an off-the-shelf kit, and most teams had never worked from a shared system. Before I could ask anyone to adopt Bespoke, I had to show why a design system mattered at all.
Challenges
Teams were shipping the whole time, so adopting Bespoke couldn’t cost them a deadline.
I ran roadshows, office hours, and training, and gave teams provisional guidance so they could keep moving while we formalized the system behind them.
Core design principles
Consistency
Consistent standards, appearance, and behavior deliver a cohesive experience across Anywhere products.
Flexibility
Bespoke adapts to different user experience needs, screen sizes, and platforms.
Scalability
A responsive foundation adapts smoothly to both large and small changes.
Accessibility
Bespoke follows accessibility best practices, so products are usable by all, regardless of ability.
Brand recognition
A unified look and feel strengthens brand identity across every interaction.
Intuitive
Components and settings are easy to understand and adopt, with no ambiguity.
Foundation
The first step was defining foundational patterns, so the system stayed consistent and scalable across brands and products.
Design tokens and variables: colors, typography, spacing, sizing, borders, radius, elevation, shadows.
Structural foundations: grid systems, layout rules, and responsive breakpoints.
Core component design process
With the foundational patterns in place, the first step in building out our library was a list of core atomic components.
Establishing core components
It took me about four months to create the base components: buttons, inputs, indicators, controls, feedback, navigation, and visual status.
We released version 1 so the design team could start applying it to their projects while we built out the engineering repo. Over time, the team sent feedback and component requests, and we shipped adjustments in weekly, monthly, and quarterly updates based on versioning and impact.
Brand agnostic and modes
Using variable themes and modes, we built a brand-agnostic design system that keeps a consistent core framework. This also introduced support for light and dark modes, an organizational first. We applied the same approach to our data visualization color sets to keep them accessible.
Components, variants, and scale
We developed a set of components that follow industry standards and best practices, designed to scale across diverse product use cases. By optimizing the use of variants, we kept the system flexible and consistent.
When no pattern existed, we tested our way to one
Where no clear pattern existed, we tested instead of debating. For file upload, we ran A/B tests and usability studies. We documented every study in our source of truth, so the team could reference and reuse it.
Creating the source of truth
Our documentation wasn’t just a library of components. It was how we aligned design, engineering, and product teams on how to build. It captured the rationale behind patterns, codified expected behavior, and gave the org a shared understanding.
Rollout and adoption
Building the system is only half the job. The other half is helping teams understand it, use it, and trust it.
Education: onboarding, guides, roadshows, and leadership presentations.
Office hours and workshops: critique sessions to align the team and evolve the system through shared ownership.
Quarterly surveys: feedback from design teams before major releases, used to prioritize the roadmap.
Results and implementation
Impact
Unified design practice: we replaced fragmented, off-the-shelf solutions with one system of design foundations, aligning previously siloed teams.
Operational efficiency: codified component behaviors and usage guidelines reduced friction and subjective debates.
Org-level design maturity: the initiative led to hiring our first content designer, accessibility specialist, and a dedicated front-end team.
Community and contribution: we laid the groundwork for our first open-source sandbox.
Designers who never had a design system now had one
The outcome I stand behind is the design team itself. Siloed teams now worked from shared foundations, and documented rules replaced subjective debates.
The work also led to our first content designer, accessibility specialist, and dedicated front-end team.
“Bespoke is a million miles better than where we were before you came on board. It’s been a tremendous tool to help us produce quality, consistent design work.”
Former teammate, Anywhere design team
Key lessons
Beyond the UI: a design system is a living product, not a static artifact.
Ongoing buy-in: alignment is continuous, and progress sometimes means moving forward without universal agreement.
Principles over preferences: grounding choices in data and system principles keeps the system scalable.
Flexible learning models: designers absorb new systems in different ways, so onboarding has to adapt.
Communicate relentlessly: clear, consistent documentation keeps adoption from stalling.