Comprehensive 10-Page UI/UX Design for OTYKEN

OTYKEN — 9-Page Complete UI/UX Scope
1. Gameplay HUD

The main in-game HUD must include:

Character portrait and permanent Character Level badge
Player HP, Mana and Run XP bars
Separate Run Level indicator
Q/W/E/R skills, Dash and 2 passive slots
Skill cooldown, mana cost and individual skill-level indicators
Tree of Life HP bar with damage-warning state
Gold and Rune counters
Day/Night timeline, current day and remaining time
Wave counter, enemies remaining and incoming-wave alerts
Minimap showing 3 lanes, player, Tree, bosses, towers and objectives
Buff/debuff strip with stacks and durations
Quest/objective tracker
Soldier and summoned-spirit status rows
Boss and Elite HP indicators
Death overlay with respawn countdown
Notifications, tooltips and top navigation

The HUD must also include critical-health feedback such as red screen-edge waves, a controlled red vignette and a low-health pulse.

2. Boon Selection — Level-Up Screen
Scalable layout supporting 3–5 boon cards
Five deity emblems and visual identities
Common, Rare, Epic and Legendary frame variants
Boon icon, title, description, values and synergy tags
Reroll and Ban buttons with remaining-use counters
Locked, incompatible and prerequisite states
Hover, selected and confirmed states
Card-selection flash
Deity-specific selection feedback
Level-up burst and Run Level transition animation
Support for future additional gods and boon cards

The boon card must be created as one reusable Figma component with rarity and state variants.

3. Build & Defense Panel
Ballista Tower card
Mage Tower card
Cannon Tower card
Magical Wall/Barrier card
Tower, wall and barrier icons
Cost, role, level and primary statistics
Affordable, unaffordable, locked and unavailable states
Build confirmation
Upgrade button with level pips
Current-level and next-level comparison
Sell button and refund value
Maximum-level and infinite-upgrade states
Barrier-link indicator when two towers create a magical wall
Structure HP, upgrade and destruction states

The panel must support future tower and wall types without requiring a redesign.

4. Tab Management & Rune Panel

Required tabs:

Army
Towers
Player Stats
Runes
Quests
Sacred Ground
Settings

The page must include:

Soldier cards and alive/dead indicators
Soldier capacity and upgrade levels
Summoned spirit information
Tower cards and tower statistics
Player stat list with matching icons
Rune equip and remove system
Rune slots and Rune Capacity
Multi-level rune upgrade rows
Current and next upgrade values
Upgrade costs
Locked, equipped, selected and upgrade-available states
New-content notification markers

There will be no traditional inventory system. Rune Management replaces inventory and equipment management.

5. Boss, Elite & Target Information UI
Boss HP bar with name, title and emblem
Phase markers/pips
Enrage state
Shield, Guard, Armor or Stagger bars
Support for up to 3 stacked boss bars
Boss mechanic counters and countdowns
Boss intro banner
Phase-transition presentation
Elite HP bar with element and status icons
Special unique frame for Erlik Khan as the main antagonist

One reusable Target Information Panel must support these variants:

Creature
Elite Creature
Boss
Soldier/Spirit
Tower/Structure
NPC

The panel may display portrait/icon, name, level, HP, secondary bars, element, status effects, strengths, weaknesses and available interactions.

6. Main Menu, Character Selection & Map Selection
Main Menu
Continue
New Game / Start Run
Character Selection
Map Selection
Settings
Credits
Exit
Character Selection
Initial five-character card layout
Support for future additional characters
Character portrait, name, role and permanent level
Character variant selector
Q/W/E/R and passive skill previews
Day/Night identity
Locked/unlocked state
Unlock cost
Detailed character information panel
Map Selection
3 initial maps
5 difficulty levels for each map
Elite Mode
Map artwork and biome identity
Best survival day
Completion state
Rewards, modifiers and lock requirements
Support for future maps and difficulties
7. Pause, Settings & Run Flow Screens
Pause Menu
Gameplay settings
Audio settings
Video and display settings
Controls and key-binding screen
Language settings
Accessibility options
UI scale and text scale
Reduced flashing, screen shake and low-health effects
Run Summary / Game Over
Day Summary toast
Wave Complete notification
Day-20 Victory screen
Character Unlock screen
Rune Unlock or Upgrade result
Return to Hub confirmation
Quit Run confirmation
Loading screen templates
Warning, purchase and destructive confirmation dialogs
8. Sacred Ground Hub
Rune Shop
Rune equip/remove interface
Rune upgrade screen
Rune Capacity and slot management
Five permanent upgrade categories
Character and variant selection
Permanent Character Level progress
Character unlock states
Permanent tower upgrades
Permanent soldier upgrades
Permanent boon upgrades
Current Rune balance and upgrade costs
Return-to-Battle portal and confirmation
Newly available upgrade notifications

The Sacred Ground should feel calmer and more sacred than the battlefield while maintaining the same visual identity.

9. World-Space UI, Combat Feedback & Dialogue System
World-Space UI
Player world-space HP and Mana bars
Enemy, minion and elite HP bars
Soldier, spirit and ally HP bars
Tower, wall, barrier and Tree HP bars
Guard, Block, Shield and Stagger bars
Floating normal and critical damage numbers
Elemental and damage-over-time numbers
Heal, Shield, Mana, Gold and XP feedback
Overhead status icons and elemental stack counters
Friendly, hostile and neutral selection rings
Movement marker
Attack, interaction, build, locked and invalid cursors
Circle, cone, line and rectangle ground telegraphs
Dialogue & Portrait System
Dialogue frame and speaker nameplate
Dialogue text area
Continue, skip and dialogue-choice states
Portraits based on the actual in-game characters
Waist-up or knee-up character compositions
Multiple facial expressions and poses
Weapon/staff and no-weapon variants
Hero, NPC, boss and Erlik Khan dialogue styles
Separate portrait, frame, background, glow and VFX layers
Structure suitable for future portrait animation
Shared Icon & Component Kit — Included

Icons are included in the scope and do not count as an additional page.

The shared icon set must cover:

Skills and passive abilities
Runes and boon effects
Five deity emblems
Four rarity levels
Buffs and debuffs
Fire, Ice/Water, Poison and Lightning
Gold and Rune currencies
Towers, walls and barriers
Soldiers and spirits
Character, boss, elite and NPC types
Day, Night, Wave and Boss warnings
Player statistics
Quests and objectives
Settings and accessibility
Lock, unlock, upgrade, equip, remove, sell, reroll, ban and confirm actions
Mouse cursors and interaction symbols

All nine pages must be delivered as a modular Figma system using components, variants, Auto Layout, clean English layer names, separate frame/fill/mask/glow layers, 9-slice-ready panels and export-ready assets. Final production assets must not be delivered only as flattened images.