Legends of
Runeterra

Defined and scaled Runeterra’s visual system from concept to live service supporting 10+ expansions.

Visual Systems at Scale: Defining the Look of Riot’s First Card Game

0

Years on the team

0

Expansions Supported

0

Visual System to
Rule Them All

TL;DR

Riot wanted a collectible card game that expanded the League universe without alienating core fans. I helped define Runeterra’s visual identity from the ground up, built scalable UI systems, and helped build a design system based workflow—powering 10+ expansions and years of live service.

Situation

When I joined the Legends of Runeterra team (then called Project Bacon), Riot was making a bold move: expanding the League of Legends IP beyond its MOBA roots to reach new audiences. Legends of Runeterra wasn’t just a card game, it was a gateway into the League universe for players who had never touched Summoner’s Rift.

That meant rethinking how the world of Runeterra was presented, what story beats were prioritized, and how players connected with champions and Regions through interaction, not action. Designing for this goal meant facing several unique challenges.

Challenges

To ensure the game met both business and player goals, we grounded our work in targeted research insights. These findings shaped how we approached system design, content surfaces, and player engagement across the product. We prioritized learnings that helped us balance clarity, lore, and long-term retention.

Insights

Background & Role

As Lead Visual Designer on Legends of Runeterra, I helped define the game’s visual identity from the ground up. I shaped the core aesthetic, established scalable design systems, and led strategy across card anatomy, Region identity, progression, and live events. I collaborated closely with cross-disciplinary teams to identify gaps, streamline pipelines, and build a Figma-based design foundation that supported over 10 expansions and a multi-year live service.

Titles: Manager, Visual Design & Sr. Visual Designer

Building Runeterra

Expanding on an existing IP with high player expectations using the interface to tell stories from around the world

Task

Our task was to turn deep world-building into systems-level design thinking and visual clarity—so Runeterra could become a new kind of on-ramp to Riot’s most beloved universe. Defining a consistent aesthetic across client features, supporting a deep progression system, and building a live-service surface that could sustain new content and community interest over years.

As one of the first designers on the project, I was responsible for helping define Runeterra’s visual language from the ground up—spanning material systems, color palettes, Region identity, card anatomy, live-service UI—and building a scalable visual system that could:

Reflect the rich lore and visual DNA of League of Legends

Allow every Region to have its own strong identity

Maintain visual clarity in a UI dense with information

Enable fast iteration and cross-platform scalability

Engage players across live updates, events, and personalization features

Establishing a Scalable Material System

Highlight: Unified materials, colors, and typography across all UI

Role: IC, Strategy, Multi-platform Design, Visual Direction

Art Direction

Visual Direction

Design System & Tokens

UI Hierarchy

Cross-Platform

I helped create a unified aesthetic for Runeterra by refining color palettes, typography, iconography, and UI materials. We built a material-based system to communicate hierarchy and narrative:

Runeterran Canvas: Used for backgrounds to ground everything in a real world element

Gold & Glass: Reserved for high-impact, premium interactions (e.g., Play button, or the cards themselves)

Fiery Embers: Use as our base celebration effect to signal new content or progression updates

These tiers mapped to hierarchy across HUD, collection, and store screens—giving consistency to both passive and interactive UI states. The overall palette and materials were designed to remain neutral, giving intentional space for Region-specific imagery and colors to shine clearly.

Defining THE Card Anatomy

Highlight: Built scalable templates for 1,000+ cards across Regions

Role: IC, Framework Creation, Collaboration with Stakeholders

Visual Direction

Visual Systems

Complex Hierarchy

Scalable Assets

Gameplay UI

Unity Implementation

In collaboration with the concept team and gameplay designers, we shaped the card frame system, balancing functionality with thematic expression:

Created reusable, scalable templates for cards across rarities, factions, abilities as well as spell types

Ensured clarity at a glance (mana, stats, rarity, effects) with high-contrast layouts and readable text

Built Figma components to speed design iteration and align gameplay and visual updates

Champion cards included dynamic frame states for level-up conditions and transformation

The system balanced aesthetics with usability and was extensible to support growing card mechanics and the need to incorporate visual elements from each Region.

Designing the Region Identity Systems

Highlight: Scaled visual language across deck builders, progression, and events - including color palettes and iconography

Role: Lead, IC, Creative Direction, Cross-team Collaboration

Visual Direction

IP Expansion

Brand Systems

Scalable Assets

Lore Integration

I led the visual development of Region-specific palettes, iconography, and thematic treatments. Each Region (e.g., Demacia, Targon, Noxus) acted as our framing for deck building (similar to Magic's card color, or Hearthstones classes) and needed to provide clarity of that Regions unique card rules but also their thematic. To solve for this each Region was given:

A custom color palette focused on capturing the identity of each Region and maintaining alignment with established Region lore and public facing imagery

Unique icon sets that simplified the existing League IP icons to make them more effective across all platforms at different resolutions but still recognizable to players

Modular  shape language that built upon the original League IP themes and was applied across deckbuilders, cards, and progression UI

The system balanced aesthetics with usability and was extensible to support growing card mechanics and the need to incorporate visual elements from each Region.

Creating Thematic Progression Systems

Highlight: Designed core meta-progression experience, balancing usability with engagement loops across PC and mobile

Role: IC, Lead, Art Direction, UX, Collaboration with Design

Visual Direction

Progression Systems

Player Retention

Asset Creation

Brand Systems Expansion

Unity Implementation

I was responsible for the design direction of the Region Roads, Region select, and Intro + Champion nodes, as well as the visual design of the initial Region chest and capsule assets. This was the game’s primary progression system that:

Allowed players to earn gameplay content through play

Rewarded commitment with character unlocks, cards, and cosmetics

Balanced aesthetic personality with usability on PC and mobile

This work reinforced long-term engagement by giving players a sense of progress and identity investment.

Leading Live-Service & Event Branding

Highlight: Led client event theming for major expansions, delivering scalable events and client takeovers tied to release beats

Role: Lead, Art Direction, External Resource Management

Visual Direction

Figma Systems

Live Ops

Monetization

Player Retention

Pipeline Refinement

System Scaling

Unity Implementation

I owned the design for the progression systems and live-service needs alongside our personalization and meta-game systems teams:

Event Pass: Gamified timed progression through themed reward paths that utilized the existing Region Road structures and was rebranded using the design system

Client Takeovers: Themed menus and environments for events like K/DA, Targon, and Ruination built excitement and hype for the newly released content

Region Road: Continued visual and UX design for new Region launches to extend the content available to players

These updates were mapped to release cadences, marketing beats, and narrative arcs—driving re-engagement and contributing to measurable Daily/Monthly Active Users (DAU/MAU) spikes as well as  Average Revenue Per User (ARPU) around event drops.

Shipped Expansions & Events

Foundations

Rising Tides

Call of the Mountain

Building Client Scalability with a Design System

Highlight: Transitioned to Figma based design system, increasing collaboration and cutting design iteration time by 3x.

Role: Lead, Framework Creation, Collaboration with Engineering

Visual Direction

Design Systems + Tokens

Figma Systems

Scalable Assets

Optimization

Unity Implementation

I led the effort to transition our team from an outdated Photoshop/Illustrator-based pipeline to a component-based design system in Figma. This transformation created a centralized, scalable system that improved our collaboration, accelerated our workflow and improved our implementation pipeline into Unity:

Introduced Figma component libraries for UI patterns, card templates, and system materials, enabling faster iteration and consistent output

Established design tokens for color, typography, and spacing that mapped directly to Unity assets, minimizing visual drift in implementation

Enabled true cross-discipline collaboration with real-time iteration between visual design, UX, and engineering

Reduced redundant work and empowered designers to confidently build UI with shared assets

This shift unlocked higher design velocity, improved communication between disciplines, and became the foundation for the visual system used throughout live service and expansion support.

Results & Takeaways

A robust visual system and design pipeline that scaled across platforms, teams, and years of live service—while deepening engagement and brand identity.

0

Expansions supported that scaled across PC & mobile

0

Average spike in DAU as well as other spikes in monetization after each themed event launch.

0

Increase in team velocity after the implementation of the design system

Systemic Design

Game UX requires systemic thinking—supporting lore, monetization, and player motivation

Quality Bar

Bridging visual craft and systems design helps ship features that are both expressive and efficient

Systems at Scale

A strong visual system can both express fantasy and drive clarity at scale

Launched Product

Check out the final launched product

Other Projects