“Dolly” Design System | Josh Grieve UX/UI Design

About the project

Dolly was Meta's internal design system initiative — a two-layer architecture connecting foundational visual primitives to a modular pattern library, enabling product teams across multiple surfaces to build consistently without slowing down.

Deliverables

Design System

UX Design

UI Design

Role

UX/UI Designer · Design System Lead

The Challenge

Meta's product ecosystem had scaled faster than its design tooling. Teams building across Quest, Facebook, and emerging surfaces were starting from scratch with each project — duplicating patterns, diverging from shared visual language, and creating inconsistencies that accumulated into a fragmented user experience. The gap between design artifacts and production code was widening. What was missing wasn't more designers — it was a shared foundation everyone could build from.

System Architecture

The system was built on a deliberate two-layer model. A tightly governed Style Library housed the foundational primitives — color tokens, type scale, spacing, motion timing, and elevation: the elements that should never vary across surfaces. Above that sat a more flexible Pattern Library: composable UI building blocks with defined variants, usage constraints, and documented behavior. This separation gave product teams freedom to solve problems without reinventing foundations. Design and engineering worked from the same token architecture, closing the gap between Figma and production.

Components & Patterns

Every component in the system was designed with the implementation team's constraints in mind — not just visual fidelity. Navigation systems, hero compositions, content modules, and exploration patterns were each built with defined interaction states, accessibility specifications, and variant documentation. The goal was a library teams could adopt without ambiguity. When a team needed a navigation component, they shouldn't have to interpret what 'correct' looked like. The system made the right choice the easy choice.

Impact & Learnings

Dolly improved product consistency and reduced redundant implementation effort across teams building on Meta's ecosystem. The two-layer system proved valuable in practice — teams adopted foundational tokens quickly while the pattern library evolved based on real usage. The most important lesson: design systems succeed when they're designed for the teams using them, not for the systems team maintaining them. Governance matters, but adoption is the metric that tells you whether the system is actually working.

Next case

LATCH — Microcosm Editor

Validating and building a browser-based Microcosm editor using AI product discovery, Claude Code, Cursor, and Figma.

Product Design

Full-Stack Development

AI Discovery