Gameplay Panel
Town controls, banners, Bazaar containers, standings, settings groups, and tactical windows.
01 · Foundations
One palette and one readable type hierarchy
Cinzel supplies medieval character and authority. Lora carries descriptions, instructions, settings, and other reading-heavy content.
Parchment
#F1E6C8 · reading
Antique Gold
#C8A35A · hierarchy
Void Black
#0E0E10 · deepest ground
Stone Gray
#25252A · tactile controls
Fissure Violet
#8A3DFF · magic and selection
Deep Indigo
#1B1E3A · game panels
Display and command text · Cinzel
Your Isle
Sky Bazaar
Recruit Paladin
Body and explanatory text · Lora
Paladins are elite heavy fighters trained to hold the line. Their clear role and readable statistics should remain understandable even over detailed town artwork.
Supporting text remains at 13px or larger. Important instructions use 15–16px.
Rule: Cinzel is never used for long paragraphs or brittle 9–10px interface copy.
02 · Surfaces
Materials communicate purpose
Dark stone and indigo handle active play. Parchment is reserved for comfortable reading. Void is the quietest, deepest layer.
Reading Panel
How to Play, lore, patch notes, longer explanations, and reference material. Dark ink is always paired with parchment.
Void Surface
Tooltips, card footers, deep wells, and restrained negative space behind high-priority content.
03 · Actions
Buttons have explicit jobs
Gold progresses, stone supports, violet selects or invokes magic, red destroys, and quiet controls step aside. These roles should not be mixed.
Canonical action hierarchy
The violet crystal construction is isolated as the magic/selection family. It can later accept authored Photoshop textures without changing spacing, text, or behavior.
Usage boundaries
- Gold
- Advance, confirm, continue, or enter battle.
- Stone
- Ordinary support actions such as upgrade, reroll, and menu.
- Violet crystal
- Magic, meaningful selection, and the approved Bazaar recruit signature.
- Danger
- Disband, abandon, delete, or destructive reset.
- Quiet
- Cancel, back, dismiss, or defer.
- Icon
- Close, settings, lock, and compact utilities.
Implementation specification
One geometry beneath every material
These measurements are the working baseline for desktop QA, not loose examples.
| Property | Standard action | Icon action | Rule |
|---|---|---|---|
| Height | 44px | 44 × 44px | Geometry never changes between states. |
| Minimum width | 132px | 44px | Wide progression actions may use 190px. |
| Horizontal padding | 20px | 0 | 9px gap when an icon and label appear together. |
| Command type | Cinzel 700 · 14px | 17px symbol | Uppercase, 0.08em tracking, one line. |
| Structure | 1px border · 4px corner | Same | Material changes; the underlying frame does not. |
| Motion | 140ms standard | 140ms standard | Hover lifts 1px; pressed moves down 1px. |
| Focus | 2px violet external ring | Same | Always visible for keyboard input. |
| Disabled | 42% opacity | Same | No hover lift; cursor communicates unavailable. |
Complete state matrix
Every family must survive every state
Loading preserves width so surrounding controls never jump.
| Family | Default | Hover | Pressed | Keyboard focus | Disabled | Loading |
|---|---|---|---|---|---|---|
| Primary | ||||||
| Secondary | ||||||
| Magic / recruit | ||||||
| Danger | ||||||
| Quiet | ||||||
| Icon |
Background stress test
Legible before it enters the game
Each specimen uses the same controls without one-off contrast fixes.
05 · Form controls
Settings and inputs share one dependable construction
Labels remain above fields, help text remains separate from values, and interactive targets stay at least 42px tall.
Text and selection fields
Up to 16 characters.
Toggles and sliders
Music
Play the town and battle score.
Health bars
Show health over every formation.
Master volume
Current value: 72%
06 · Metadata
Tags identify; icons accelerate scanning
All tags use one base geometry. Color indicates category or rarity. Only the four key combat statistics require symbols.
Unified tag family
Legendary
Magic
Light
Healthy
Heavy
Human
This replaces the visually overlapping tag, pill, metadata-pill, trait, and sort-chip styling.
Key combat statistics
22
Attack
18
Defense
45
Health
7
Speed
The speed symbol remains a placeholder until the raised running-boot icon is authored.
07 · Cards and rows
Content density follows the decision being made
Bazaar units need strong art, large names, key statistics, traits, price, and one obvious action. Buildings and banners remain compact rows.
Two approved densities
Browse quickly, then inspect deeply
The Bazaar remains compact enough for five offers; the dossier carries the complete explanation.
Bazaar browse card · 248px target width
Tier IV · Legendary
Paladin
Heavy
Human
Fighter
⚔22Attack
⛨18Defense
♥45Health
♞7Speed
1,600g
Contains comparison essentials: identity, race, combat traits, four stats, price, and action.
Selected unit dossier · expanded inspection
Tier IV · Legendary
Tier IV · Legendary
Paladin
Heavy
Human
Fighter
Elite human warriors trained to hold the line through punishment and protect nearby allies.
- Ability
- Radiant Guard
- Role
- Front-line protector
- Synergy
- Defenders and healers
- Pool
- 3 units available
⚔22Attack
⛨18Defense
♥45Health
♞7Speed
Full description, traits, ability, role, synergies, availability, and expanded art live here.
Tier IV · Legendary
Paladin
Heavy
Human
Fighter
Elite human warriors trained to hold the line through punishment and protect nearby allies.
⚔22Attack
⛨18Defense
♥45Health
♞7Speed
1,600g
Tier II · Uncommon
Elf Archers
Light
Elf
Ranger
Precise ranged troops that punish lightly armoured targets from behind a protected line.
⚔14Attack
⛨6Defense
♥24Health
♞8Speed
400g
Tier III · Rare
Wraiths
Mystic
Undead
Hybrid
Spectral attackers that drift through the melee and bring fissure magic into close combat.
⚔18Attack
⛨10Defense
♥32Health
♞9Speed
950g
Building row
Town Hall
Improves Bazaar rarity
Banner row
08 · Windows and feedback
Every overlay shares structure and hierarchy
A consistent header, close control, body measure, action footer, backdrop, and stacking model replaces individually constructed windows.
Canonical anatomy
Shared structure, measurable rhythm
Gameplay, parchment, and confirmation windows change material—not construction.
Window Title
Readable content measure
Body copy and controls use the same inset. Longer reading never stretches across the entire screen.
- Header
- 54px minimum height
- Title inset
- 20px minimum
- Close target
- 44 × 44px
- Body padding
- 24px
- Reading measure
- 680px maximum
- Footer
- 68px minimum height
- Action gap
- 12px
- Viewport edge
- 32px desktop · 16px compact
The 680px reading measure applies to prose. Tactical grids may use wider bodies while retaining the same header and footer.
Settings
Dark indigo for active play and tactical controls.
How to Play
Parchment for sustained reading, lore, and reference material.
Recruit Paladin?
Focused language and no unrelated controls.
Tooltip / dossier
Toast / system feedback
Bazaar locked
These offers will remain for the next round.
Empty state
Empty Banner
Recruit a troop from the Bazaar to establish this banner.
09 · Whole-interface audit
What currently prevents consistency
These findings are based on the current source, the Phase 1 inventories, and the latest playable Phase 3 baseline.
One utility button does too much
The current utility class represents purchases, navigation, tabs, warnings, closing, market increments, and ordinary secondary actions.
Inline styling blocks migration
168 static elements carry inline styles. Several require later overrides or !important, making visual changes fragile.
Small type breaks hierarchy
Important labels and metadata reach 8.5–10px with wide letter spacing. Cinzel becomes especially brittle at these sizes.
Four competing tag systems
Tags, metadata pills, detail tags, and sort chips communicate similar information with unrelated sizes, corners, and interaction cues.
Shape language is arbitrary
At least 17 radius forms are present. Ornamental frames should create character while four structural corner values provide consistency.
Windows lack a shared anatomy
Settings, tutorials, confirmations, recap, Compendium, and end-state windows use different header spacing, close controls, body measures, and action placement.
Material direction is strong
Dark cards, parchment reading surfaces, restrained gold, and violet magic produce a distinct identity when their roles remain disciplined.
Existing behavior can remain
IDs and event handlers do not need to be renamed. Canonical classes can wrap the current behavior while presentation is migrated family by family.
10 · Migration map
Proposed order for applying the library
Each pass should preserve every existing action, then receive a focused visual and interaction check before the next family is migrated.
| Pass | Current concepts | Canonical family | Reason |
|---|---|---|---|
| 1 · Actions | .big, .ubtn, buy, close, reroll, mode and difficulty controls | Primary, secondary, magic, quiet, danger, icon | Highest repetition and the most visible inconsistency. |
| 2 · Navigation | Chat tabs, Settings tabs, leaderboard tabs, sort chips, view toggles | Tab rail, segmented selector, noninteractive badge | Separates navigation from commands and labels. |
| 3 · Windows | Overlay cards, Settings, tutorial, Compendium, recap, confirmation gates | Gameplay window, parchment reading window, modal, tooltip, toast | Creates reliable spacing, close placement, and text measure. |
| 4 · Cards | Bazaar card, building row, banner row, Compendium item | Unit offer card, compact information row, selected list item | Improves the game’s most decision-heavy content. |
| 5 · Controls | Text fields, selects, sliders, toggles and developer inputs | Field, help text, switch, range control | Finishes consistency and keyboard accessibility. |
| 6 · Cleanup | Inline declarations, duplicate selectors, literal values | Shared classes and approved tokens | Prevents the inconsistencies from returning. |
Approval gate for every family
- Specify: measurements, states, usage, and responsive behavior exist in this library.
- Integrate once: apply the family to one representative real screen without changing behavior.
- Stress test: verify 1920×1080, 1280×720, 1024×768, compact width, keyboard focus, and disabled/loading states.
- Approve: do not migrate the next family until the current real-screen result is accepted.
First integration: Actions on the Bazaar—Recruit, reroll, lock, upgrades, To Battle, close, and destructive controls.