Skip to content

[Roadmap] New UI look per point tier #11

@Otaiki1

Description

@Otaiki1

Overview

A full visual overhaul of the entire game UI when a score tier is reached — beyond just the colour mode change. Every element of the interface escalates as the player scores higher.

Status: Post-MiniPay launch roadmap. Depends on issue #10 (colour modes per tier).

What Changes at Each Tier

  • Typography scale — display font gets progressively larger and bolder
  • Border weights — 4px → 6px → 8px at higher tiers
  • Shadow style — flat shadow at Tier 0/1 transitions to glowing neon drop-shadow at Tier 3/4
  • Background pattern — dot grid gets denser and brighter
  • Score bar — transforms from simple counter to stadium-scoreboard-style display at high tiers
  • Tray appearance — background shifts from yellow to tier-specific colour with matching borders

Intended Effect

  • Tier 0: clean and approachable
  • Tier 3 (ON FIRE): game feels like it's barely containing itself — every element maxed out
  • Tier 4 (LEGENDARY): looks like a completely different, premium experience

Dependency

Builds directly on the tier detection + [data-tier] CSS variable system from the colour modes issue. No new architecture needed — extend the same approach.

Contract change required: No

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions