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. I defined file structures and naming conventions, led the adoption of variables across platforms, and 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 (from primitives to semantics to components), developers pulled tokens directly into code with matching names, and 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.
