How I Built a Design System for Riot Games' Arabic Esports Ecosystem

Operating at scale means more than just handling traffic; it means maintaining consistency across diverse platforms, cultures, and teams. When Riot Games needed a unified visual identity for their Arabic esports tournaments, there was no existing framework. This wasn't about building a component library in Figma; it was about crafting a visual language that could speak to millions, bridge cultural nuances, and perform flawlessly across broadcast, digital, and physical touchpoints. This is the story of how I built a design system that scaled across two years, multiple concurrent tournaments, and hundreds of assets.

The Starting Point: A Fragmented Visual Identity

Before this project, Riot Games' Arabic esports tournaments lacked a cohesive visual identity. Each event, each region, often had its own look and feel. This led to brand dilution and a fragmented experience for fans. The challenge was clear: create a single, adaptable system that could differentiate tournament tiers while maintaining a strong, recognizable Riot Games presence in the MENA region.

Bilingual Design Challenges: Beyond Mirroring Layouts

Designing for an Arabic-speaking audience isn't as simple as translating text and mirroring a layout. Arabic is a Right-to-Left (RTL) language, with unique character shapes and a distinct typographic rhythm. A direct mirror of an English layout often feels unnatural or even incorrect. This required a deep dive into:

• RTL Layout Principles: Understanding how elements should flow and align in an RTL context. This impacts everything from navigation to data tables.
• Typographic Harmony: Finding Arabic typefaces that not only looked good but also paired harmoniously with the existing Latin fonts used by Riot Games. This wasn't just about aesthetics; it was about readability and brand consistency across both scripts.

Typography Decisions: Pairing Scripts with Purpose

Choosing the right typefaces was foundational. I needed fonts that conveyed the energy of esports while being highly legible in both Arabic and Latin scripts.

• Arabic Typefaces: I selected specific Arabic typefaces for their modern aesthetic and legibility, ensuring they could handle the complexities of the script while maintaining a competitive, dynamic feel. The goal was to avoid overly traditional or decorative fonts that might feel out of place in an esports context.
• Latin Font Pairing: These were carefully paired with existing Latin fonts to ensure visual balance and hierarchy. The system defined how headlines, body text, and callouts would behave in both languages, creating a seamless reading experience.

Color System: Differentiating Tiers, Maintaining Cohesion

The color system needed to be flexible enough to differentiate between various tournament tiers (e.g., regional qualifiers vs. major championships) while still feeling like part of the same family. I developed a core palette with accent colors that could be swapped or combined to signify different levels of competition.

• Core Palette: Derived from Riot Games' existing brand guidelines, ensuring immediate recognition.
• Tiered Accents: A set of secondary colors allowed for visual distinction between tournament levels, used sparingly to highlight key information or specific event branding.

Broadcast Constraints: Designing for Tiny Screens and Big Moments

Esports content is consumed across a vast array of devices, from massive stadium screens to tiny phone windows on Twitch. The design system had to account for these extreme variations.

• Legibility at Scale: All graphical elements, especially text, had to remain legible and impactful whether viewed at 1080p on a desktop monitor or as a small overlay on a mobile stream.
• Information Density: Broadcast graphics often need to convey a lot of information quickly. The system provided clear guidelines for information hierarchy and visual prioritization to ensure critical data was always visible.

Template System: Empowering the Social Team

A key objective was to empower the social media team to produce assets independently, without constant reliance on designers. I achieved this by building a robust template system.

• Modular Components: The design system was broken down into modular, reusable components (e.g., player cards, scoreboards, event announcements).
• User-Friendly Templates: These components were then integrated into easy-to-use templates within design software, allowing the social team to quickly generate new assets by simply inputting text and images.
• Reduced Bottleneck: This significantly reduced the design bottleneck, allowing for rapid content creation and consistent branding across all social channels.

Scale: Consistency Across Years and Hundreds of Assets

The true test of a design system is its ability to scale over time and across numerous applications. This system maintained consistency for over two years, supporting multiple concurrent tournaments and the creation of hundreds of unique assets.

• Documentation: Comprehensive documentation ensured that all designers and content creators understood the system's rules and guidelines.
• Centralized Assets: A centralized library of approved assets (logos, icons, backgrounds) ensured everyone was working from the same source of truth.

What "Design System" Means Beyond Component Libraries

For this project, "design system" extended far beyond a Figma component library. It was a holistic visual language that encompassed:

• Brand Identity: The core visual elements that define the Riot Games Arabic esports brand.
• Typographic Guidelines: Rules for using both Arabic and Latin scripts.
• Color Palettes: Strategic use of color to differentiate and unify.
• Layout Principles: How elements are arranged and composed.
• Broadcast Graphics: Specific considerations for live stream and video content.
• Social Media Templates: Empowering content creators.

It was about creating a coherent, adaptable framework that allowed for creative expression within defined boundaries, ensuring that every touchpoint reinforced the brand.

Conclusion

Building a design system for Riot Games' Arabic esports ecosystem was a masterclass in operating at scale. It proved that a single design engineer can tackle complex bilingual challenges, navigate broadcast constraints, and empower large teams to maintain brand consistency. This project wasn't just about design; it was about strategic thinking, cultural sensitivity, and delivering measurable impact in a high-stakes environment. I designed it, I built the system, and it shipped consistently for years.