The World Unstilled

{“title”:”RACE ON THE RIVER OF TIME — Figma Package”,”body”:”# RACE ON THE RIVER OF TIME — Figma Package\n\n## Quick overview\nA complete, production‑ready Figma package specification for the Android mobile game RACE ON THE RIVER OF TIME. This page contains artboard sizes, component library, interaction rules, asset lists, export settings, microcopy, accessibility options, and a handoff checklist for engineers. Use this as the single source of truth for designers and developers building the Race Relay prototype and subsequent levels.\n\n—\n\n## Project structure (Figma file organization)\n- Pages\n – Cover & Brief\n – Design System (tokens, components, icons)\n – Artboards (portrait + landscape frames)\n – Prototype Flows (Onboarding, Race Relay, Shadow Tag, Anchor Heist)\n – Assets (exportable icons, sprites, Lottie placeholders)\n – Handoff (specs, tokens.json, animation notes)\n\n- Frames\n – Title Screen (1920×1080)\n – Tutorial Steps 1–5 (1920×1080 each)\n – Match HUD (portrait 1080×2400 and landscape 1920×1080)\n – Post‑match Score (1920×1080)\n – Settings & Accessibility (1280×720)\n\n—\n\n## Artboard and canvas sizes\n- Primary (portrait): 1080 × 2400 px — canonical phone layout for Android. Safe margin 48 px. Top bar 120 px; bottom control band 320 px.\n- Primary (landscape): 1920 × 1080 px — main gameplay for wide preview. Safe margins: left/right 48 px, top/bottom 36 px.\n- Secondary: 1280 × 720 px (low‑end preview), 2340 × 1080 px (tall landscape preview).\n\nAll artboards use a 12‑column grid with 24 px gutters and an 8 px vertical rhythm.\n\n—\n\n## Design tokens (export as designtokens.json)\n- Colors\n – primary: #2B9CFF\n – accent: #FFB84D\n – background: #EAF6FF\n – surface: #FFFFFF\n – muted: #6B7280\n – success: #34C759\n – danger: #FF6B6B\n\n- Spacing: base 8 px scale (8, 16, 24, 32, 40, 48, 64, 96)\n- Corner radius: small 8 px; medium 12 px; large 24 px\n- Typography\n – Heading: Inter Bold 28 / 36\n – UI Label: Inter SemiBold 16 / 20\n – Body: Inter Regular 14 / 18\n- Elevation / shadows\n – Soft: 0 6px 18px rgba(0,0,0,0.08)\n – Medium: 0 10px 24px rgba(0,0,0,0.12)\n\n—\n\n## Component library (Figma components)\nCreate reusable components with variants and auto layout.\n\n### HUD components\n- Top bar: timer (center), scoreboard (left), team status (right). Variant: compact / expanded.\n- Mini‑map: circular widget with lane overlays and portal icons. Variant: collapsed / expanded.\n- Action wheel: circular 2×2 quadrant component. Each quadrant is a child component with states: ready, active, cooldown (with animated ring overlay). Size: 420 × 420 px (portrait), 360 × 360 px (landscape).\n- Steering band: bottom control band with tilt indicator and optional joystick overlay. Variant: tilt / joystick.\n- Anchor button: contextual button that appears when near anchors. States: ready, holding, locked.\n- Power‑up slot: single slot with icon and numeric cooldown badge.\n\n### Buttons & microcomponents\n- Primary button (160 × 56 px), Secondary (120 × 48 px), Icon button (48 × 48 px). All with pressed, hover, disabled states.\n- Cooldown ring: 6 px stroke circular progress overlay (Lottie or SVG animation recommended).\n\n### Particles & effects\n- Breadcrumb particle sprite (small glowing dot), portal ripple animation (Lottie), shadow replay ghost path (semi‑transparent stroke), Momster idle animation (Lottie or sprite sequence).\n\n—\n\n## Art & assets list (priority order)\nProvide SVGs and high‑res PNGs where needed. Include Lottie JSON for animated elements.\n\n1. Action wheel icons (PASS, CLOAK, JUMP, SHADOW) — SVG + 2x PNG\n2. Mini‑map frame and lane overlays — SVG\n3. Portal animation — Lottie JSON + fallback sprite sheet (PNG atlas)\n4. Breadcrumb particle sprites — PNG sprite sheet with alpha\n5. Momster character sprites — PNG sequence + Lottie\n6. Boat skins and cosmetic decals — PNG 2x\n7. HUD panels and button states — SVG\n8. Shadow replay path — SVG stroke assets\n9. Ledger & map UI — SVG and layered PSD for texture\n\nNaming convention: componentvariantstate@2x.png (use underscores for spaces). Place assets in /assets/figma/ with subfolders: icons, sprites, lottie, hud, characters.\n\n—\n\n## Export settings\n- Icons: export as SVG and PNG @2x. Use export slices for each icon.\n- Sprites: PNG, 72 dpi, trimmed, with JSON atlas mapping.\n- Animations: Lottie JSON for portals and Momster; fallback sprite sheets at 60 fps.\n- Fonts: Inter (include WOFF/TTF for handoff if licensing allows). If not, provide font stack and sizes.\n\n—\n\n## Prototype flows and interactions\nBuild interactive prototypes for these flows using Figma prototyping and Smart Animate where possible. Use overlays for tutorial highlights and required tap gating.\n\n### Onboarding (required steps)\n1. Tilt to steer (detect tilt or simulate with arrow keys in desktop preview). Overlay highlight on steering band.\n2. Tap Cloak (highlight Cloak quadrant). Require one tap.\n3. Swipe up to micro‑jump (simulate with a button in prototype). Require action.\n4. Tap Place Shadow. Require one placement.\n5. Long press Anchor (0.6s) to set anchor. Prototype should simulate long press.\n\nEach step blocks other inputs until completed. Show a progress bar with 5 steps.\n\n### Race Relay (3‑minute match prototype)\n- HUD shows timer, mini‑map, action wheel, steering band, anchor button.\n- Portals appear as animated Lottie overlays; contested portals pulse orange.\n- Breadcrumb Cloak toggles trail visibility; shadow placement spawns a ghost path.\n- Anchor long press locks a moment and triggers a ledger note animation.\n- Post‑match screen shows top plays and a 6–12s shadow replay montage.\n\n—\n\n## Microcopy and tone\nShort, active, kid‑friendly phrases. Keep prompts to one line where possible.\n\n- TILT TO STEER\n- TAP TO USE\n- HOLD TO ANCHOR\n- CLOAK 10s\n- TIME TOKEN +1\n- ANCHOR LOCKED\n- CONTESTED — CONTROL FOR SPEED\n\nUse playful, encouraging language for tutorials and rewards.\n\n—\n\n## Accessibility and safety\n- Control alternatives: on‑screen joystick, single‑tap steering, or voice commands for core actions.\n- Visual aids: high contrast mode, colorblind palette, large HUD mode (scale 1.25×).\n- Audio aids: descriptive audio cues and optional spoken prompts for key events.\n- Safety: no text chat by default for under‑13 accounts; emotes only. Short match lengths (3 minutes) and forgiveness mechanics (dropped anchors respawn, covered trails reappear).\n\n—\n\n## Interaction timing and animation durations\n- Portal open/close: 400 ms in, 300 ms out.\n- Cooldown ring animation: smooth clockwise, update every 100 ms.\n- Cloak duration: 10 s; cooldown: 30 s.\n- Micro‑jump cooldown: 8 s.\n- Shadow duration: 6 s; shadow cooldown: 20 s.\n- Anchor long press threshold: 600 ms.\n\n—\n\n## Handoff checklist for engineers\n- Provide assets/figma/ folder with SVGs, PNGs, sprite atlases, and Lottie JSON files.\n- Include designtokens.json with color hexes, spacing scale, typography tokens, and corner radii.\n- Provide prototypespec.md listing animation durations, cooldown timings, and authoritative server event names: anchorset, portallock, tokenpickup, shadowplace, matchend.\n- Supply sample particle sprite sheet and Lottie portal animation for immediate integration.\n\n—\n\n## File naming and versioning\n- Use semantic versioning for Figma file exports: RIVERv1.0.fig, RIVERv1.1.fig.\n- Asset naming: componentvariantstate@2x.png (e.g., actioncloakactive@2x.png).\n- Maintain a changelog frame inside the Figma file for design iterations.\n\n—\n\n## Prototype testing notes\n- Test on Android Chrome and native WebView. Verify DeviceOrientation permission flow and fallback joystick behavior.\n- Validate tap targets (min 48 × 48 dp) and thumb reachability for 5.5–6.8 inch phones.\n- Run accessibility checks for color contrast and font sizes.\n\n—\n\n## Deliverables included in this Figma package\n- Artboards for portrait and landscape gameplay\n- Component library with variants (action wheel, HUD, buttons)\n- Prototype flows for onboarding and a 60s practice loop\n- Exportable asset list and naming conventions\n- Design tokens JSON and handoff checklist\n\n—\n\n## Implementation priorities (MVP)\n1. Portrait Race Relay prototype (1080 × 2400) with action wheel, steering, cloak, jump, shadow, anchor interactions.\n2. Component library and tokens for consistent UI.\n3. Lottie portal animation and breadcrumb particle sprites.\n4. Post‑match scoreboard and shadow replay montage.\n\n—\n\n## Notes on lore and Easter eggs for designers\n- Include subtle visual Easter eggs in the mini‑map and rare breadcrumb variants: Cradle Culling mural, Momster icons, Generational Hijack glyphs. These are cosmetic unlocks and should not affect balance.\n- Pixel breadcrumb color sets unlock secret loop maps when a full set is collected.\n\n—\n\n## Final remarks\nThis Figma package spec is designed to accelerate design and engineering collaboration. It balances playful, kid‑friendly interactions with robust handoff artifacts so the team can prototype quickly and iterate safely.\n”}