System reference · Wild Rift events
The system, as code
The same framework that lived in Figma, rewritten as tokens and components. An event is a token file. Every state is drawn, not exported.
The constraint that shapes everything else. Code can draw any shape, frame, state and motion from a token value. It cannot invent illustration. So art is only needed where the content is genuinely pictorial, and one art set covers every state.
| Element | Source | Per event |
|---|---|---|
| Node shape, corner, ring, glow | Code | token value |
| States: claimed, current, available, locked | Code | free |
| Check, lock, count badge | Code | free |
| Connector line and fill progress | Code | free |
| Motif: star, eye, diamond frame | Code | token value |
| Colour, type, tracking, motion timing | Code | token value |
| Champion or familiar portraits | Art | 3 files |
| Reward item icon | Art | 1 file |
| Background key art | Art | 1 file, optional |
Four files per event, not twenty exports. A locked node is not a drawing, it is the same node with a state. That is the whole difference between a screenshot library and a design system.
One file per event, W3C DTCG format, the same standard Figma variables export to. Nothing below this layer knows an event's name.
Live values, all three events
A node is a shared base with an icon on top. The base is two parts: a frame whose shape, ring and glow come from CSS, and a motif drawn as inline SVG so its outlines carry a real stroke. Both are code, painted from tokens. The icon is the only thing that changes between states, and claimed and claimable are shared by every event.
Node shape, one per event token set · content slot empty
Five states, one base · three shared, two event extras (SG: story + mini game · SF: combat 01 + 02 · SOL: lantern 01 + 02)
The progression track composes nodes and connectors and reads its fill from node state. The champion row is the one place art is required, and it is the same component in every event.
Progression track · code icons, zero art
Progression track · same component, art in the payload slot
Champion row · three portraits, index badge drawn from the event motif
Tier decides the structure. Theme decides the skin. Neither dial touches the other, and every screen below is built by the same function call.
One theme, all four tiers
The Star Guardian dialogue node, built three times. Same size, same screen, no filters. This is the honest picture of what each method reaches and where it stops.
What each one reaches
| Property | CSS | SVG | Figma export |
|---|---|---|---|
| Silhouette, ring, glow | Yes | Yes | Yes |
| Exact silhouette, curved edges | Yes, via SVG clipPath | Yes | Yes |
| Gradient fill | Yes | Yes | Yes |
| Ring that follows that silhouette | Yes, layered | Yes | Yes |
| Glow around that silhouette | Yes, drop-shadow | Yes | Yes |
| Gradient along the rim itself | No, flat rim only | Yes | Yes |
| Inner light bloom | Approximate | Yes | Yes |
| Painted highlight and texture | No | No | Yes |
| Recolour by token | Instant | Instant | Re-export |
| Every state generated | Yes | Yes | One file each |
| Weight | 0 KB | ~2 KB | 24 KB, one size |
Both code versions use the exact vector path lifted from the Figma file, normalised to a unit box so it scales. The silhouette is not approximated, it is the same curve. Version 1 combines that clipPath with a CSS gradient, a layered rim and a drop-shadow glow, which is the combination worth using: no SVG markup per node, everything still driven by tokens. The gap to 3 is paint, not geometry: a hand-placed specular highlight and a texture in the fill. Everything structural is reachable in code. So the useful split is not "code versus Figma", it is geometry in code, paint in art. A node whose identity is its shape costs nothing. A node whose identity is its painting stays a file.
The delivery for a new event is a token file and four images. No new components, no new states, no new exports. This is what the Figma library could not do: the theme is data, so it can be reviewed, diffed, and handed to engineering as the source of truth rather than as a redline.