Reality Labs · Meta

Reality Labs Design System

The component & token foundation behind Meta’s VR platform, shipping across every Meta VR headset.

1,500+
Tokens architected
120+
Components
1,000+
Variants
Every
Meta VR headset shipped
Company
Meta
Product
Reality Labs Design System
Time
2024–2026
Role
Staff Production Designer

Reality Labs Design System (RLDS) is the component and token and documentation foundation for Meta’s VR platform. I joined during a critical build phase, inherited an at-risk work stream, and went on to own the library architecture, tokenization, and the enablement processes that let the broader design and engineering org build on the system, work that earned a promotion to IC 7 and an “Exceeds Expectations” rating for now 5 years running.

The challenge

VR is a different design problem than mobile. The platform spans mixed-reality surfaces with few established conventions, multiple product features, and tight, hardware-bound release deadlines.

When I joined, a key library workstream had been left mid-flight when a senior designer moved teams, a complex surface area and a milestone that was slipping. The system needed three things at once: a library that could scale across MR surfaces, a token architecture that could carry theming and density without forking components, and a way for dozens of designers and engineers to build on it without overwhelming the small team that maintained it.

Scope at kickoff
SurfacesVR in-headset panelsSystem UI2D companion
VR FrameworksJetpack ComposeAndroid ViewReact Native
Mobile FrameworksiOSAndroid
ThemesLightDarkSpatial
DensitiesDefaultCompactLarge
1,477 scale + 1,346 theme variableskept coherent by one small team

Rescuing an at-risk library

I inherited the multi-half MR workstream and rebuilt it as a production-grade Figma library spanning multiple product features and unique mixed-reality surfaces.

Rather than continue the original approach, I advocated for duplicating and evolving an existing source-of-truth library, a call that pivoted the team’s strategy, unblocked delivery to engineering, and let me ship a full month ahead of milestone. Reviewers noted the project would have failed or significantly slipped without it.

Re-architecting the token system

I tokenized and refactored the component set from the ground up, building a layered token architecture, 900+ scale tokens and 600+ theme tokens, that let the system flex across themes and surface densities without forking components.

I later streamlined that token system to reduce the platform’s footprint and improve maintainability, work that directly unblocked a major platform release shipping to every VR headset.

A second foundational library, 0→1

In parallel I partnered with an IC Director and senior designers to stand up a new library for a redesigned mobile surface, 46 semantic color tokens, ~60 components, 500 variants, iOS/Android templates, and full documentation, built to spec and on every milestone.

Second foundational library, mobile app screens across surfaces

Making the system easy to build on

I created a Figma micro-site that embedded live type styles, color variables, and direct links to components, so partners could pull the latest system and contribute back without heavy maintenance overhead.

I established a scalable icon-asset process that federated icon creation out to product designers, and stood up an intake form and on-call rotation that cut ad-hoc interruptions to the team. On the engineering side, I defined release milestones, specced changes, and drove resolution of 30+ blockers ahead of deadline, keeping design and code in lockstep through launch.

Scrolling view of the RLDS Figma micro-site: live typography, components, and design tokens

Impact

1 mo early

Delivered an at-risk, business-critical library a full month ahead of milestone.

1,500+

Tokens and 1,000+ component variants re-architected for theme and scale.

Every headset

Streamlined the token system to reduce footprint, unblocking a headset-wide release.

30+

Engineering blockers resolved to ship clean, implementation-ready specs.

2×

“Exceeds Expectations,” two years running, and a promotion to Staff.

Federated

Icon creation handed off to product designers via a scalable asset process.

Meta Horizon OS Navigator UI in a VR home environment

Reflection

The leverage in a design system isn’t in the components, it’s in the token architecture and the contribution model that let the system outlive any single maintainer. The work I’m proudest of here isn’t a screen; it’s that a small team could ship a platform-wide system on hardware deadlines because the foundation was built to scale and the process was built to share.

More Projects

✉
Messenger Design System
Meta · Web · Mobile
◉
Instagram Messaging
Meta · Web · Mobile
→
Driver AppStore & PlayStore
Uber · Web · Mobile
ATTACH MP4 HERE