Multi-Brand Design System

The Short Version

Roadpass Digital is the parent holding company behind a portfolio of outdoor travel apps, sold to users as a single subscription where one membership unlocks every product.

The portfolio ran five products on four tech stacks: React, React Native, vanilla JavaScript, a Backbone.js legacy codebase, and a WordPress/Tailwind marketing surface. Seven million user accounts flowed across the subscription. Roadtrippers, the highest-traffic product, anchored the App Store with a 4.7 rating.

The portfolio addressed a specific gap incorrectly. Five brands building independently meant solving solved problems from scratch on every feature, and the experience felt fragmented in the place users felt it most: their subscription. The portfolio was selling one membership and delivering five inconsistent products.

I scoped the build of a single dialog component across all five platforms and measured the time it took without a shared system. The math produced a conservative $143,000 in annual savings extrapolated against the realistic feature backlog. That number unlocked the budget.

I designed Bonfire as the cross-brand design system that unified the portfolio, with token architecture normalizing five inconsistent color logics, 14 atomized components shipping in v1, and a two-layer governance model. Adoption reached 60-65% across the brands before a leadership-level layoff round shut the program down.

The Problem

The visible problem was build time. Every feature took longer than it should because every team was solving solved problems from scratch. The deeper problem was bigger. Roadpass’s subscription model promised users access to five products. The fragmentation between those products read in usage as a fragmented membership, and the kind of friction that doesn’t show up in a single-session metric shows up in renewal rates.

The cost surfaced in every team’s sprint cycle. Five teams, four stacks, each one building patterns in isolation. New features sat in design review while a button or modal got rebuilt from scratch on every brand. Accessibility was the same story: roughly 500,000 violations across the portfolio, partly because each team’s contrast and focus-state decisions ran independently, partly because nobody had standardized the foundations.

A documentation library wouldn’t have moved the number. Design fragmentation at Roadpass was an org problem dressed up as a craft one. I needed the budget, the political coalition, and the technical foundation in place before the system could survive anyone’s sprint priorities.

The Design Call

I scoped the work in one experiment first. I built a single dialog component across all five platforms, measured how long it took each team without a shared system, and extrapolated from that baseline against a realistic feature backlog. The math produced a conservative $143,000 in annual savings, clearly labeled as a model based on real build times.

I designed the token architecture to normalize five inconsistent brand color systems into a single coherent layer without erasing what made each product feel distinct. Each brand kept its accent palette and identity. The cross-brand work normalized neutrals, semantic state colors, and structural tokens. My first pass got the warning state wrong: I flattened too far across brands, and Campendium ended up with a warning amber that fought their accent palette. I rolled it back, added a brand-specific override layer, and kept going. Getting it wrong publicly was part of the work.

The system shipped with 14 atomized components, a renderer engine that Mike Stecker built to deploy Bonfire across the four stacks, and a two-layer governance model. At the contributor level, a PR review process let any team propose additions with two Senior-plus designers reviewing every merge. At the leadership level, a cross-brand council of PMs and engineering leads coordinated adoption and surfaced friction before it became a blocker. Karli Kujawa, our VP of Product Design, co-sponsored the work and made the organizational space for it. I named the system, branded it, designed the architecture, wrote the business case, and built the governance that was supposed to keep it alive after I left.

What It Shipped

Bonfire’s first shared component validated the entire investment. The single dialog spike that produced the $143K savings model held up directionally as more features shipped through the system. Adoption reached 60-65% across the portfolio. Features built with Bonfire components shipped 80% faster than equivalent features built against the old fragmented approach. The numbers compounded with every team that adopted a component, and Roadtrippers, the App Store anchor at 4.7 stars, picked up Bonfire for net-new work and kept legacy in place where the cost of retrofitting outweighed the benefit.

The bigger transformation was accessibility. Before Bonfire, the portfolio carried roughly 500,000 accessibility violations across five products. After portfolio-wide design-system normalization, that number dropped to under 100. The foundations themselves did the work: contrast-locked color ladders, focus states designed into every component, semantic tokens for state changes, ARIA patterns baked into the renderer engine. Bonfire raised the accessibility bar across all five applications by making the right thing the default thing. The teams that adopted Bonfire stopped shipping accessibility violations as a side effect of shipping features at all.