UI components
The single source of truth for how Zoen's in-game UI looks. Every frame, header, button and popup edge is artwork cut from the accepted UI originals by tools/build-ui-sprites.py. The client must reproduce these exactly (same sprites, sizes and states).
Window = bronze frame (18 px corners, 50 px rails) over the body, with a leather header band (tile at 9 px, 85% strength) and a hairline under it. Title in small caps, secondary text right.
999
999
999
999
999Glass variant (HUD windows over the game view): rgba(12,14,14,.86) + 10 px blur, same frame and header.
Panel
Cards and inner panels: the clean bronze rim (7 px), dark fill, square corners, no coloured top or left borders.
Plain frame: the window frame without a header, for stages (Atlas, Feel Lab, maps).
<section class="gwin"><header class="gwin-head"><span>Title</span><span>meta</span></header> … </section>
<section class="gwin glass"> … </section> <div class="panel"> … </div> <div class="frame"> … </div>Popup shell from the accepted UI: 360 px wide, 52 px header art chosen by type and rarity (left cap, repeating centre, right cap), glass body (0 0 12 12 radius), bronze corners at the bottom. Values bold. Alt reveals prefix/suffix and affix tiers (shown on the right column).
Horizon CleaveWarblade · attack · chain
Strike in a 160° arc in front (3.2 m): 130% physical, medium impact.
War DrumSTR codex · buff · party buff
You and party members within 12 m deal +12% damage for 8 s.
Tolling VerdictEarthshaker · attack · finisher
◆ Finisher: only while the target is stunned. In the chain it fires on the next press when the condition holds; otherwise it is skipped.
One bell-ringing overhead blow on a stunned enemy for 900%; enemies within 3 m are stunned 1 s. Requires a stunned target.
Orchard Tusk CleaverNormal · max sockets 1
OTRequires STR 30 · Greataxe Mastery
White base: sold by the blacksmith, or salvaged from monster kits. Orbs add affixes.
+3 Kiln-fired Reedstring Bow of the GaleMagic · Reedstring Bow
- prefixAdds 3–5 fire damageT5 · 2–4 to 3–6
- suffix+4% increased attack speedT5 · 3–5
Requires AGI 39 · Bow Mastery
+6 Thunder ScriptRare · Bellshade Staff
- prefix+28% increased spell damageT4 · 20–34
- suffix+7% increased cast speedT4 · 6–9
- suffix+7 to INTT5 · 4–8
Requires INT 76 · Storm Staff Mastery
+9 Dusk HungerEpic · Jadefall Great Axe
- prefix+41% increased physical damageT3 · 35–54
- prefixAdds 8–13 fire damageT4 · 6–11 to 8–14
- suffix+8% increased attack speedT4 · 6–9
- suffix+6% critical strike chanceT3 · 5–7
- suffix+12 to STRT4 · 9–15
Requires STR 103 · Greataxe Mastery
Refinement aura: gold motes
Oasis EyeLegend · Basalt Eye Ring
- +2% life leech
- prefix+66 to maximum lifeT3 · 50–79
- prefixAdds 15–26 fire damageT3 · 14–24 to 18–30
- prefix+28 to maximum manaT4 · 20–34
- suffix+11% increased attack speedT3 · 10–14
- suffix+4% critical strike chanceT4 · 3–4
- suffix+27% fire resistanceT3 · 22–32
Orb of ReweavingOrb · very rare
Rerolls every unlocked affix (same count).
WinterglassBlue · Weapon primary gem
Weapon hits gain +8% cold damage and 15% chill chance.
Duneplate Beetlenormal · level 7
Sand Scrape · Duneplate Guard
Dropdown
Field = button art. Menu = popup glass with the bronze corner ornaments only (no full frame); rows are text only, hover = soft gold band and brighter text, selected = ◆. Keyboard ↑ ↓ Home End Enter Esc. Textbox and textarea: a thin bronze frame cut from the button's own rim and corner flourishes (sprite field-frame, 9-slice), one border around a sunken dark well; hover brightens it, focus switches to the gold frame with a soft glow (200 ms ease). Checkbox, radio and switch are drawn in code: 20 px bronze-edged wells, gold check/dot, a metal knob on a pill track that turns jade when on. Slider: an engraved track with a bronze rim and a gold fill, and the bronze emblem-ring knob with a jade gem (sprite slider-knob; glows jade on hover, grows slightly while dragged). Disabled = greyed with the forbidden cursor.
Textbox, checkbox, toggle, slider
<input class="gfield"> <textarea class="gfield"> <label class="gcheck"><input type="checkbox"></label>
<input type="checkbox" class="gtoggle"> <input type="range" class="grange"> <Dropdown …/> (never a native select)Tabs
Angled leather tabs, always one row (extra tabs scroll sideways with a fade at the edge, never wrap). There is no divider and no gap under the strip: the tabs sit directly on the content. The open tab gets the header leather and the same glowing gold underline as a pressed toggle button. Counts are small enamel badges with a bronze rim (16 px, same 11 px number; red = needs attention, blue = info).
Tags
Tags: angled ends, a bevelled bronze edge drawn in code (light top-left, dark bottom-right) and a soft top sheen over the colour fill. Fills stay as they are: neutral, STR, AGI, INT, positive, premium, hostile. Premium tags always carry the crown.
Tag & marker icons
Painted-gold glyphs with jade gems for tags, badges and in-game markers. These are code stand-ins; each one has an art request (ART-UIK-icon-…) and the painted version replaces it automatically when delivered.
Pager
Bars
Item wells (rarity glow, stacks) and sockets
Wells: 8 px ornate corners (12 px on the equipment window). Rarity adds an inner glow; stack count bottom-right. Sockets reuse the accepted socket ring; gems sit at 66%.
Modal = a regular window (rail header) with a glass body, popup corner ornaments, and a gold divider above the actions, over a vignette scrim. Destructive actions always use the danger button on the right. Toast = glass banner with fading gold hairlines, a tone medallion (info gold, success jade, warning amber, error red) and a countdown line; bottom-centre in game, 2.4 s.
Cinzel — titles, window headers
Spectral — long text and lore.
Alegreya Sans — UI labels, numbers, popups.
All sprites at 2× density, with their CSS sizes (manifest: packages/game-data/data/ui-kit.json).
40×68
66×68
40×68
40×68
66×68
40×68
40×68
66×68
40×68
40×68
66×68
40×68
40×68
66×68
40×68
83×104
110×104
83×104
83×104
98×104
83×104
83×104
110×104
83×104
83×104
106×104
83×104
83×104
108×104
83×104
83×104
114×104
83×104
83×104
114×104
83×104
83×104
104×104
83×104
83×104
112×104
83×104
83×104
110×104
83×104
83×104
102×104
83×104
90×63
90×63
115×115
32×32
128×128
83×83
166×166
128×128
256×256
256×256
113×113
73×88
94×88
73×88
768×768
1400×1400
256×128
256×128
256×128
1024×224
128×112
192×112
128×112
256×256
128×128
128×128
384×96
384×96
32×32
32×32
32×32
32×32
32×32
32×32
32×32
32×32
32×32
128×128
128×128
128×128
128×128
128×128
128×128
128×128
128×128
720×24
256×256
256×256
256×256
256×320
1024×1024
768×128
448×112
1024×224
512×512
768×128
96×96
96×96
256×256
256×256
128×128
128×128
128×128
128×128
128×160
56×56
1152×672
96×96
96×96
96×96
96×96
96×96
96×96
96×96
96×96
96×96
96×96
96×96
96×96
96×96
96×96
96×96
96×96
96×96
96×96
96×96
96×96
96×96
96×96
96×96
96×96