beIN Design System — Component Library
Building a unified design system for beIN's digital ecosystem — 300+ components, bilingual (AR/EN), multi-platform, enabling 6 product teams to ship consistent UI at speed.
Overview
As beIN’s digital product portfolio grew to include 8+ platforms, design inconsistency became a significant problem. Teams were duplicating work, visual language was fragmented, and developer handoff was slow. This project established a single source of truth for all digital design at beIN.
The Challenge
A design system that needed to serve web, iOS, Android, Smart TV, and STB platforms simultaneously — in both Arabic (RTL) and English (LTR) — while being maintainable by a team of 4 designers.
What Was Built
- 300+ Figma components with interactive states
- Bilingual token system (colour, typography, spacing, motion)
- Platform-specific component variants (mobile, TV, web)
- Documentation site with usage guidelines
- Figma plugin for token management
- Developer-ready specifications in Zeplin
Impact
Design-to-development handoff time reduced by 60%. New product screens could be assembled in hours rather than days. Cross-team design consistency score (measured by internal audit) improved from 42% to 91%.