ALL WORK

REBODE / MASTERBRAND

Universal Components — Rebode's Design System

ROLEArchitect (sole, at launch)
WHERERebode / MasterBrand
WHEN2024–2026
SCOPE4 properties

01 · THE PROBLEM

Every new Rebode property rebuilt the same header and footer. Four applications, four copies, four places to update every time anything changed. Nobody asked me to fix it — I documented the duplication, put a cost on it, and took it to leadership myself. That pitch became Universal Components.

02 · THE HOMEWORK

I didn't start with code. I researched implementation routes and interviewed our lead developers and leadership before committing to one — a design system nobody adopts is just a very organized opinion.

Then I architected the whole thing: repo, scaffolding, Azure Artifacts, private NPM packages, automated version publishing and deployment pipelines. The pipeline work was some of the heaviest I did at Rebode — built hand in hand with our lead infra developer, and I wrote pipeline code myself, not just requirements.

03 · ADOPTION IS THE PRODUCT

A package nobody can install doesn't count. I documented the setup, trained every developer to consume private packages locally, and owned onboarding new contributors. Along the way I worked the header/footer redesign with the design team — what's live today is that work. With four properties, the duplicated work simply ended: build once, publish everywhere.

DUPLICATION ELIMINATED
~75%DUPLICATION ELIMINATED

WHAT SHIPPED

  • A design system architected from zero, sole contributor at launch
  • Private NPM on Azure Artifacts, with automated publish and deploy pipelines
  • Every developer onboarded; every property consuming
  • The header and footer live on Rebode today
Universal Components — Rebode's Design System

STACK

  • React
  • TypeScript
  • Vite
  • Vitest
  • Changesets
  • Kontent.ai
  • Azure Artifacts
  • NPM publishing
NEXT PROJECTThe Rebode Blog — Headless CMS, Shipped Fast