2018-2022
Legends of
Runeterra
Riot Games
Intro
01
I joined the Legends of Runeterra team 2 years before it’s release while it was still known as Project Bacon, then spent 2 additional years supporting it as a live service.
Focus
I worked on an enormous variety of projects, ranging from helping define the brand direction, building iconography systems, and of course designing then implementing features in Unity.
Approach
When building the visual system for Legends of Runeterra, we had to strike a balance: staying true to the League universe but creating a platform for the identities of every Region to shine.
We also wanted to showcase the incredible illustrations without overwhelming them with UI. Our solution was a blend of flat and rendered elements, prioritized based on interaction and clarity.
02
The Visual System
As we explored different visual directions, we started spotting common threads—ways to bring everything together into a cohesive system.
At the core, we refined the color palette and typography into something that hit the aesthetic we were after, while staying legible across devices, languages, and regions.
01
Buttons
Materials
We always imagined the out-of-game interface as something the player carries with them—a kind of traveler's journal that reflects the stories they've lived through the game.
That idea shaped a visual style grounded in the world of Runeterra, with materials and elements surfacing based on the priority and purpose of each piece of UI.
02
03
3 different materials raising in hierarchy, with the gold button only used for getting into game.
Runeterran
Canvas
The primary material used for backgrounds, advisory tooltips, and background imagery throughout the game.
Fiery Embers
Used to highlight updated content
and high-value calls to action.
04
Gold
& Glass
Meant to contain & showcase objects of heightened importance in the client.
Typography & Color
Our typography had to strike a few chords at once: it needed to feel at home in the League universe, support the dense information of a card game, and help open the door to Runeterra’s rich lore.
Color Palette
01
Slate
Ivory
Brass
#1E191E
Sand
#D6D1C5
Gold
#724626
#87755F
#D5934A
02
Primary Header
Beaufort for LOL | Regular
24px| Kerning 115px | Line Height 28pt
Secondary Header
Univers LT Std | 59 Ultra Condensed
50px| Kerning 85px | Line Height 60pt
Body Copy
Beaufort for LOL | Regular
50px| Kerning 125px | Line Height 60pt
Informational
Univers LT Std | 55 Roman
16px| Kerning 110px | Line Height 21pt
Region Colorways
03
By keeping the overall palette muted, we created space to use bold, purposeful color combinations that captured the identity of each region in Runeterra.
Bilgewater
Demacia
#111311 // #AE4127
#2E2E22 // #E7D9B8
#081326 // #89DCF8
#3A142F // #D0829B
#331114 // #AA3A37
#262B1A // #E19E77
Shadow Isles
Targon
#152420 // #0FAC92
#1E1B3A // #9265FC
Ionia
Freljord
Piltover & Zaun
Noxus
Completing the Loop
04
Once we locked in the core visual language for both the client and the regions, we could start tackling spaces where the two needed to blend. This was especially helpful for complex UI challenges—like the region selector—that required multiple visual states to feel cohesive.
Navigation
03
How a player moves through an experience is everything, so we focused on keeping things fluid—no matter what device they’re playing on.
We extended our button state system across platforms, using consistent color and VFX cues to signal things like new unlocks and accessible content.
04
Card Types
Legends of Runeterra is always evolving, and as the game grows, so can the types of cards it supports.
Below is the core set of card types, each with a quick breakdown of its role in the game.
Champions are high-impact cards with unique “level up” conditions—once met, they transform into even stronger versions of themselves.
Units
02
03
Spells
Spells can do a multitude of things to change the game and different speeds of the spell type allow the ability to counter.
Burst
Fast
Slow
Focus
Champions
01
Units are followers that often synergize with specific Champions, helping them level up and pushing toward victory.
Spell Types
Landmarks are immovable objects on your backline that create different win conditions for the player.
04
Landmarks
Card Anatomy
05
Card games can be overwhelming, especially for newcomers—so clarity was key.
We studied common UI patterns across the genre, then focused on building a scalable system that could support all the unique layers of information Legends of Runeterra brings to the table.
02
Class Type
03
Region Identifier
04
Level 2 Champion Frame
05
Keywords
06
Level Up Condition
07
Card Attack
08
Rarity Tier
09
Card Health
10
Level 3 Champion Frame
Mana Cost
01
The amount of mana it takes to play this card.
Types of cards have classes attached to them, that give them synergies when played with each other.
Shows the Region of Runeterra it is from.
As you level up your Champion card, the frame around them also grows in size/detail to denote their increasing power.
Keywords are powerful special abilities cards have.
For Champion cards specifically, there are certain level up conditions they must meet to transform into their ideal state.
The amount of damage this card will deal to their target.
Higher rarity cards generally have more special abilities or strength to them.
The health of a card is how much damage it can take before being removed from play.
For newer Set releases, there are some Champions that have a 3rd level to their progression. Usually this is based on a set of certain game conditions being met.
Legendary
7%
Epic
15%
Rare
32%
Common
52%
Rarity Tiers
Rarity often reflects a card’s power or unique abilities—but those usually come at a higher cost, whether it’s mana or specific conditions to activate.
Lower-rarity cards tend to be more “plug and play,” fitting easily into a variety of decks.
Associated Cards
When you want to dive deeper into a card, the card fan view lets you explore related cards, keyword tooltips, and—if it’s a Champion—even their mastery progress.
New Expansion,
New Decks
06
New expansions bring new cards, new mechanics… and that means it’s time to head to the Deck Builder.
It’s your space to browse the full card collection, build decks that match your playstyle, or import builds from other players.
Construct Your Way to Victory
So, where to begin? You can start from scratch and build your own deck, or import one crafted by another player.
Either way, the deck inspection tools help you break it all down and fine-tune your strategy.
Deck Title & Artwork
Deck Breakdown
Utilize this panel to adjust the artwork and rulings of the deck you would like to create.
Collection Filters
Navigate your collection quickly with quick set features like showing unowned cards and region filtering, or open up the expanded options.
Card Collection
Scrollable view of the cards from the game.
Deck List Area
List view of the cards you select.
A filter you can toggle to get an overview of the deck you are currently constructing
Navigate Your Collection Quickly
With an ever-growing library of cards, filters are essential for finding the perfect additions to your deck.
Sorting by mana cost, type, rarity, and more makes it easy to zero in on the right tools to outplay your opponents.
Deck BUILT, Now What?
Once you’ve constructed your perfect new deck it’s time to start “testing it’s metal” against your fellow players!
However before that, no deck is complete without a little flair...
Premium Card Styles
07
SHINIES! Prismatics make your favorite cards stand out by adding a little “pop”. Each prismatic card type has it’s own custom frame and “foiled” treatment to heighten the artwork of the card.
Skins
Customize your deck even further with themed skins for your favorite Champions. Skins can bring a whole new dynamic to a card by altering the artwork, and in some cases, the effects and level up animations!
Personalizing Your
In-Game Experience
08
Now that you’ve built your dream deck, it’s time for the best part—looking stylish.
The loadout panel lets you gear up before the match, giving you tons of ways to show off your personal flair.
01
Playmat
02
Emotes
03
Guardians
04
Card Backs
Loadouts
Each part of your loadout—whether earned or purchased—offers unique ways to personalize your side of the board, so it always reflects whatever vibe you’re feelin’ in the moment.
Into Battle!
Now for the moment of truth—it’s time to battle! Hit that PLAY button and dive into a magical realm of triumph… or brutal defeat
Thank You For Looking!