Reels Design System
Designing for Tomorrow, Not Just Delivery
Company
Accedo
Role
Product Designer
Website
accedo.com
Industry
OTT
Date
Jan - Oct 2024
The Story
Accedo powers customized OTT platforms across devices and brands with its white-label framework, Elevate. When I joined, Elevate’s design system barely existed—fragmented files, duplicated components, and no single source of truth.
My mission: build not just a design system, but a design ecosystem—scalable, centralized, and fully integrated with developer workflows.
Impact
The Reels Design System became the backbone of Accedo’s white-label OTT framework, Elevate — enabling consistency, scalability, and speed across platforms and teams.
1029 Components
1816 Variables
8 Platforms
Automated GitHub sync between design and development, eliminating manual handoff
Reduced QA cycles and fewer design–dev misalignments
Faster delivery of new features and white-label customizations
Beyond the numbers, the system changed how teams worked. Designers could move faster without fear of breaking consistency, and developers could trust design assets as production-ready. Instead of losing time to duplicate work or unclear handoffs, the team could focus on shipping better experiences for end users.
The Challenge
• No centralized file structure
• No scalable documentation
• Multiple versions of the same components
• Disconnected design–dev communication
• New Figma Variables feature just released, but barely documented
We had to create a system that supported white-label flexibility while reducing dev time, QA cycles, and redundant effort—all while shipping a live product.
My Role
I started by leading the mobile system setup, but quickly expanded scope to unify all platforms.
• Defined file structures and naming conventions
• Led the adoption of variables across platforms
• Aligned designers and developers on shared workflows
The Breakthrough
The real innovation wasn’t a component—it was the workflow.
• Designers built with layered tokens (primitives → semantics → components)
• Developers pulled tokens directly into code with matching names
• Updates flowed automatically via GitHub—no manual exports, no late-night hex code checks
We didn’t just bridge design and dev. We closed the gap.
The Build
File Structure – Modular, cross-platform, with global shared assets
Components – Built using Atomic Design, documented, and reusable
Variables – Organized into primitives, semantics, and component tokens
Workflow – Design updates synced to code through GitHub repo
Why It Mattered
This wasn’t just a design system. It was a way of working.
We built a foundation that let Accedo deliver today—and grow tomorrow.
