Every collectible game lives or dies on one feeling: the treasure must feel rare. The current build fails because the interface shouts as loudly as the prizes — chunky bevels, heavy shadows, candy buttons everywhere. When everything is loud, nothing is. The reveal has nothing to rise above.
Unbox Wonders is built on the opposite instinct, and it is the single idea that governs every decision in this document:
This does not mean a flat or lifeless UI — the rejected screens proved that loud and dead is the worst of both. The resting interface is calm but alive: animated accents, buttery transitions, tactile feedback on every touch. Calm describes the noise floor, not the energy.
From the client's own direction: a plain main UI, deliberately "glorified" spend surfaces, and dopamine-built reveal moments. That is not a contradiction — it is a deliberate three-step ladder. Every surface in the game sits on exactly one rung.
Home, Collection, Display Board, Profile, Settings, Mini-Games hub. Calm, spacious, warm neutrals. Motion is quick and functional. This is 90% of screen time — it must never tire the eye.
The Wonder Kiosk and the Premium Pass. Deliberately special — gold light, richer materials, a slow ambient shimmer. We glorify where players choose to spend. A small, intentional exception.
Box-opening and reward moments. A separate full-screen "unboxing mode" — cinematic, staged, springy, dopamine-built. The peak the whole gallery exists to frame.
A genuinely 3D, physically-modelled box with per-theme silhouettes. The interface never imitates the box's energy — it defers to it. Marketing footage is always the reveal.
Soft warm shadows, paper-like surfaces, gentle spring on every tap. It should feel like handling a real collectible — the opposite of glossy candy UI.
Friendly and characterful like Duolingo, finished like a premium product. The warmth comes from motion and roundness; the premium comes from restraint and craft.
Unbox Wonders is a warm, crafted home for a wondrous collection — friendly enough that a teenager feels welcome, refined enough that an adult collector takes it seriously.
Warm · curious · generous · tactile · quietly magical · crafted · gender-neutral · unhurried · delighted by small things.
Loud · childish · cluttered · aggressive · "candy-crush" glossy · menu-heavy · cynical about spending · generic.
Unbox Wonders ships without a brand mascot or host character. The 150 collectible characters carry all the personality the game needs; introducing a single mascot would either compete with them for attention or read as "another character you can't collect." Personality lives instead in the system itself — the typography, motion, colour and voice defined in this document. Onboarding, the Wonder Kiosk and empty states rely on the brand's craft and on the collectibles themselves, not on a personified host. The decision is firm for launch; it can be revisited post-launch only if a clear, non-competing role for a host character emerges.
Four layers, strictly separated. A neutral gallery core does the heavy lifting; brand colour is a sharp accent; rarity colour is sacred and locked; theme colour is swappable and lives only inside unboxing mode. This separation is what lets the game re-skin per season without a redesign.
Warm porcelain, not cold white; warm near-black, not pure black. This is ~85% of every baseline screen. It recedes so characters and currency can sing.
Coral is the single primary-action colour — warm, optimistic, dopamine, and deliberately chosen away from blue/purple/gold so it never collides with rarity. Gold has one locked job: the active state, celebration, and the Register-2 "glow" of spend surfaces.
Legendary deliberately shares the celebration gold: the rarest pull is the celebration. Rarity tags as they appear in the UI:
One accent per launch theme. These appear only inside unboxing mode and theme-specific surfaces — never in the global navigation chrome. Adding a season or theme later means adding a token here, nothing more.
Two typefaces, one job each. The rejected screens used a thick-outlined cartoon "bubble" font for everything — the clearest single signal of an asset-pack game. Duolingo-grade craft means a characterful display face and a genuinely legible text face, never an outlined toy font.
A six-step scale on the 4 pt rhythm. All player-facing strings live in string tables (GDD §16.6) and must tolerate ~30% expansion for localisation, including CJK for the Asia launch — components are sized for the longest expected string, never the English one.
Generous space is half of how "premium" reads. The rejected screens packed elements edge-to-edge with heavy borders; the fix is air. One 4 pt base unit, used everywhere.
20 px safe gutter left and right on all screens. Content never touches the screen edge except full-bleed art (box-opening, cabinet 3D viewport).
Sections separated by s6–s7 (24–32 px). Related items inside a group by s3–s4. Whitespace, not borders, is the primary way we separate content.
Minimum 48×48 px for any tappable element. All layouts respect iOS/Android safe-area insets (notch, home indicator, the locked bottom navigation bar).
Rounded, consistent, friendly — never sharp. Four steps only.
One purpose-drawn icon family — never a free icon pack. Icons are soft-geometric: rounded corners, consistent ~2 px optical stroke, gentle curves echoing Fredoka. Two finishes.
The default — used in lists, settings, labels and inactive states. Single-weight stroke, ink-600. Quiet by design.
Used for the bottom navigation, currencies and primary actions. Gently dimensional with a soft inner highlight — tactile, not flat, but never the heavy 3D-bevel of the rejected screens.
Order per GDD §16.2 and the client's note: Home → Collection → Display Board → Mini-Games → Social. Icon-only with a gold active state; the active tab also shows its label (a hybrid that keeps the clean look while staying learnable — see UX principle 07). Settings is not in the nav — it lives under the profile avatar.
Each currency has one unmistakable icon, used everywhere a balance appears. Distinct silhouettes so they read instantly even at 20 px.
Mini-game Stars (energy, not currency) and the Trade Ticket each also carry a single fixed icon. The icons shown here demonstrate the style direction; final art is drawn by the production artist to this spec.
One shared kit, used on every screen (GDD §16.4). Every component below is a live example of the actual system — hover and tap them.
Exactly one primary action per screen. Hierarchy is how a calm UI still guides the eye — not by making everything loud.
Primary (coral) — the one main action · Secondary (outlined) — alternative actions · Tertiary (text) — low-stakes dismissals · Glow (gold, animated sheen) — Register-2 spend surfaces only · Disabled — never hidden, always explains why.
All three balances, always visible on main screens. Tapping a balance opens its purchase/exchange flow (GDD §8.2). The "+" is a quiet, ever-present on-ramp — not a popup.
Active tab: gold soft-fill, gold icon, visible label. Inactive tabs: icon-only, ink-400. The active label is the learnability safety-net for a five-tab, multi-market app.
Standard content panel — surface fill, hairline border, soft elevation. No heavy shadow, no bevel.
This will spend 45 Wish Crystals.
A single confirmation dialog pattern covers every spend or irreversible action (GDD §16.4). Toasts are transient and non-blocking. Timers and counters use Nunito tabular figures so digits never jitter as they tick.
Motion is how a calm UI proves it is alive. The client wants "wow" scrolling and emotionally engaging movement — that is delivered through consistent, physical, well-timed motion, not scattered effects. Motion follows the same three registers as everything else.
Quick (160–240ms), gentle decelerate. A light spring overshoot on taps for tactility. Screen transitions slide-and-fade; lists stagger softly on entry. Functional, never showy.
Slow ambient loops (2.5–4s) — a gold shimmer crossing the Subscribe button, a soft pulse on the Kiosk. Continuous, calm, hypnotic. Signals "special" without a hard sell.
Orchestrated and cinematic. Staged beats, anticipation pauses, springy overshoot, particle VFX, haptics. Reserved entirely for the box-opening and reward moments.
No tap is ever silent — a scale-down, a colour shift, a haptic tick. Input without feedback is the cheapest-feeling mistake a UI can make.
Elements enter and leave by moving and fading. Nothing pops in or vanishes instantly. Continuity keeps the world coherent.
Currency gains and XP roll up over ~600ms with a settle. Earning should feel earned.
Gentle parallax depth, soft staggered reveal of cards as they enter the viewport, a subtle settle at scroll end. Alive — never a wall of identical rows.
Eight principles. Every Phase-2 screen will be checked against this list. They are the tie-breaker whenever two designs both look good.
The player always knows where they are, what just happened, and what to do next. If a screen needs explaining, it is not finished.
Earn or buy → open a box → reveal → place it. From any screen, opening a box is at most two taps. The loop is the product.
The box-opening is the emotional summit and its own full-screen mode. Nothing in the baseline UI is allowed to out-shout it — that is the whole reason the gallery stays quiet.
Players remember a moment by its peak and its final beat. Every reveal ends on a satisfying, well-sorted resolution — never a flat cut back to a menu.
Spend surfaces are beautiful and inviting (Register 2), never deceptive. Real odds, real prices, no fake timers, no guilt. Pillar 4 — fair by design — is a UX rule, not just an economy one.
Animation and colour are spent like currency. Saved up across calm screens, then spent all at once on the reveal. Constant noise bankrupts the wow.
48px touch targets, AA contrast, rarity never by colour alone, system text-size and reduced-motion respected, every string localisation-ready for the AU/US/UK and Asia launch.
The Display Board is a publishable, social- media-worthy artifact. Collection, board and reveal moments are all designed to look exceptional as a screenshot and a short clip — sharing is a core growth loop, not an afterthought.