2022–Ongoing Design System
Built Roofr's foundational design system, then led the rebuild using Figma variables and slots. 400+ components, 20,000+ weekly inserts across product and marketing teams, and instant dark mode through token-level mode switching.
Case highlights
20,000+
Weekly inserts
org-wide consumption across product + marketing
400+
Components
shipped across product surfaces
341,000+
Yearly Button inserts
across 220 variants, the most-used component
- Sprint capacity wasted by component recreation. Each project rebuilt similar pieces with minor variations.
- UI inconsistency across features. Maintenance overhead for both design and engineering.
- Engineering had no source of truth for what “Roofr UI” meant; component-library decisions kept getting relitigated.
Launch
Adoption proof
- 01 Component insertion rates across all product and marketing files.
- 02 Detach rate as a quality signal.
- 03 Engineering handoff efficiency once the FE library mirrored the DS.
Strategy
Org-wide impact
- 01 Sprint-velocity lift across teams using established components.
- 02 DS as the source of truth for engineering's component library.
- 03 Foundation strong enough to support a token architecture.
- An audit drove the build order. Buttons, form inputs, typography, color applications were rebuilt constantly with small variations. Foundational primitives carried almost all the load; Button alone accounted for hundreds of thousands of insertions.
- A DS only works if the people consuming it want to use it. v1 was built by me for the team; v2 was built by the entire team.
The components below are the foundational primitives the audit flagged as most common. v2’s mode switching lives at the token layer; every component reads from semantic variables that resolve per mode, so light and dark are byproducts of the same component definition.
LOOP Input
Form-control input with label, helper text, and validation states. Built early in v1 because input rebuilds were one of the top sources of design-team rework.
LOOP Button
Button component, the most-inserted artifact in the system. 220 variants cover size, intent, icon affordances, and loading states.
LOOP Hint banner
Inline hint banner used for non-blocking guidance and contextual upgrade prompts. Calibrated to feel informational, not interruptive.
REEL Section-level mode switching
Two surfaces in the same canvas, each rendering its own mode. The variable model lets product teams design dark and light states without duplicating components or maintaining parallel files.
REEL Single-toggle full-screen swap
Full screen flips light to dark with one switch. The proof of the v2 architecture: zero additional design work per component, mode resolves at the token level.
Prioritize by insertion volume
Build order set by frequency-of-use in the existing Roofr surface. Usage validated it: Button (341,898/yr), Tags (83,539), Checkboxes (82,240) lead by an order of magnitude. Resisted visually distinctive components that would have made the system more “marketable” internally.
Variables + modes; dark mode is a byproduct
Tokens handle mode switching; every component inherits automatically. Instant dark mode across 400+ components, zero additional design work.
Team-wide v2 rebuild
Every designer contributed. Distributed the work and built shared ownership; v2 maintenance is a team problem because the team built it from the inside.
-
20,000+
Weekly insertions
Org-wide peak across product and marketing; 16,100/week sustained during the v2 migration window.
-
400+
Components
v1 at 417, v2 at 409.
-
341,898
Yearly Button insertions
Across 220 variants. Foundational primitives carry the volume; rare components seldom break 5,000/yr.
-
0.13%
Button detach rate
428 detaches against 341,898 insertions. The quality signal: designers stay in the system because components fit real workflows.
-
4x / −80%
v2 architecture shift
117 → 476 variables (4x); 116 → 26 styles (−80%). Variables absorbed static styles, which is what enables instant mode switching.
-
Instant
Dark mode
Token-level mode switching: every component inherits automatically.
-
Source of truth
FE component library parity
Design system became the engineering reference.
The charts below back the headline metrics on the public card.
Deep dive
Curious about the specifics?
Adoption cohorts, revenue pivot data, prototype walkthrough videos, and the internal PRD are available on request during a portfolio review.