Component Library

Zain for display and headings, Nunito Sans for body. Both default to bold weight.

The foundational wrapper for all content areas. Title bar with body content below.

Default

Panel Title

Panel body content goes here. Cards, stats, lists, grids.

Flush Content

Flush Content

Stat row flush to edges

42

Single stat display with icon, level indicator, XP progress bar, name, and value.

Level 3

Max Health

45

Level 1

Base Damage

7

Level 5

Critical Chance

12%

Ability list item with icon, name, type badge, description, and energy cost.

Bubble Passive

Periodically gain a bubble shield that protects you from one hit

20

Surge Ultimate

Increases your attack speed by 25% for 5 seconds

20

Character selection card with portrait, element badge, name, and level.

Default

Plant

Toren

Level 1

Selected

Water

Ranape

Level 1

Fire Element

Fire

Siniper

Level 1

Inventory grid item with icon and stack count badge.

Action buttons with standard and primary (CTA) variants.

Small tag showing a Kelomin's elemental type.

XP and stat level bars. Color adapts to selected Kelomin's element.

Hover-triggered info popups via data-tooltip attribute.

Circular icon containers used in stat rows and ability entries.

Stat (28px)

Ability (44px)

CSS animation classes for staggered page load reveals.

Player health display with fill gradient and text overlay.

Experience bar with level badge and gold gradient fill.

Currency and resource counters with icon and value.

Run timer displaying elapsed time.

Upgrade choice cards shown when leveling up. Border color indicates rarity.

Water Shield

Forms a water barrier that protects from 1 hit

WaterDefense

Water Orbitals

Summon orbiting water droplets that damage nearby enemies

WaterAoE

Fire Aura

Burn nearby enemies with a ring of fire

FireAoE

Buldo

Charge through enemies dealing massive damage

PhysicalLegendary

Detailed tooltip for trinkets/items with stats.

End-of-run summary rows with icon, label, value.

Slide-in notifications with icon, title, and message.

Tab bar for switching between panels or categories.

Ability icon with conic-gradient cooldown sweep overlay.

75% CD

3s

25% CD

1s

Ready

Horizontal spell bar with radial energy fill. Based on AbilityBarController + AbilityEnergyIconController.

Q

W

E

R

Shows equipped spells and charms with level badges. Based on SpellDisplayController + CharmDisplayController.

Spells

3

2

1

Charms

2

1

Toggleable stat list shown during gameplay and level-up. Based on StatsPanelController.

Grid of collected trinkets with stack counts and rarity borders. Based on TrinketDisplay.

2

3

Popup shown when acquiring a new trinket. Pauses gameplay. Based on TrinketRevealController.

Phoenix Feather

Legendary

Burns with an ancient flame. Nearby enemies take fire damage over time. Stacks with other fire effects.

Continue

Contextual key prompts shown near interactable objects. Based on InputHintView.