Event Design System

Wild Rift shipped events constantly. There are champion launches, seasonal celebrations, cultural moments, and the major ecosystem beats shared with League. I designed over 50 global events and reviewed over 80 China events in under three years.

Templatization was the foundation of every event launch. We balanced production efficiency against structural rigidity, building skeletons designed for versatility. But the friction remained: every moment demanded emotional resonance and visual novelty. Without a system, every design choice became a negotiation, and the templates began to drift.

The fix was not a stricter template. It was one system with two dials.

Each design sprint began by assigning a size tier. This tier determined the event's structural logic, including screen counts, feature sets, and the amount of custom design work allocated to it.

Small and medium tiers remained pure templates. Scaling up earned customization.

Each event identity manifested as a token set. Color, typography, texture, and motion character functioned as the event's skin, while the underlying architecture remained constant. Lunar Beast utilized neon against shadows. Star Guardian relied on Cinzel and vivid pink. Spirit Blossom focused on soft pastels, while Dragon Mancers employed champion-specific watercolor gradients.

The framework stays the same, the theme provides the emotional resonance.

This dual-dial framework has powered two of my systems. For LoL Esports Manager in 2019, rarity tiers dictated the theme. In Wild Rift events, the content and scale of the moment set the dials.

The progression track functioned as the universal architecture across every scale. In smaller tiers, it operated as a streamlined mission list. And for tentpole moments, it transformed into an expansive starmap or a legendary odyssey. While the visual skin drifted with the theme, the underlying utility remained rigid: anchoring the player, signaling upcoming milestones, and defining the value of the next beat.

Execution varied from flat, linear graphic layouts to immersive environmental vignettes. It manifested as a thematic weapon rack for Lunar Beast, a celebratory banquet table, or evolved into intricate starmaps and Valentine-themed journey maps. The skeleton never shifted, and the skin provided the emotional resonance.

In 2020, Figma housed this framework and its corresponding design systems. By last year, my design system pipeline migrated to design.md. My current focus has shifted again toward refining delivery through direct JavaScript handovers. This iteration mirrors the methodology of this website, design tokens living in code. The following progression track serves as a live component where the theme governs the token set and the tier dictates structural logic. These dials function independently.

The color and typography specifications are production-ready, extracted from the previous event visual guides.

Template events stopped being design projects and became skin passes. The structural work was already done, so a small or medium event needed theme decisions only. And the 80+ China events could be reviewed against the system instead of re-argued screen by screen.

It also gave the product team a staffing number. A medium event: one designer, about three days, done, and on to the next one. Before that, every event carried its own feature list, and the designer and engineer count was argued per event.