Wireframe — Home screen
Wireframe — Home screen
Data source: GET /walker/profile
Mock-mode constraints (ADR-0006):
streak.provisionalis alwaysfalse— no provisional banner shown.flags.isInQuarantineis alwaysfalse— no quarantine toast.subscription.tieris always"none"— Guild tab is disabled with tooltip.factionRanksmay be empty on first load; show tier-0 state for all 5 factions.
Primary layout
┌─────────────────────────────────────────────┐│ ≡ WalkRPG [⚙ settings] │ header bar (56dp)├─────────────────────────────────────────────┤│ ││ ╔═════════════════════════════════════╗ ││ ║ ████████████████████████████████ ║ │ region card│ ║ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ║ ││ ║ PLENNY [region name] ║ ││ ║ The Bureaucratic Heart of Strzep ║ ││ ║ [region description — 2 lines] ║ ││ ╚═════════════════════════════════════╝ ││ ││ ╔═════════════════════════════════════╗ ││ ║ │ Poziom ║ │ progression card (D-016)│ ║ │ 42 42 / 180 allocated ║ │ see §Progression card detail│ ║ │ Punkty w skarbcu: 3 ║ ││ ║ │ [linijka] Następny punkt: ║ ││ ║ │ Quest 001 step 4/5 ║ ││ ╚═════════════════════════════════════╝ ││ ││ ┌─────────────────────────────────────┐ ││ │ [icon.streak-flame] │ │ streak ribbon│ │ Day 14 [T1 badge] │ ││ │ +20% energy bonus · 1 day to T2 │ ││ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ ◉ Quest 001 — Pierwszy Trakt │ │ active quest pill│ │ Beat 2 of 5 · [progress dots] │ ││ └─────────────────────────────────────┘ ││ ││ [FACTION STRIP — full width] ││ ┌──────┬──────┬──────┬──────┬──────┐ ││ │ CECH │ AKAD │ BRAC │ WOLK │ DZIK │ ││ │ T0 │ T0 │ T0 │ T0 │ T0 │ ││ └──────┴──────┴──────┴──────┴──────┘ ││ │├─────────────────────────────────────────────┤│ ┌────┬────┬────┬────┐ │ bottom tab bar (64dp)│ │ 🏠 │ 🌳 │ 📜 │ 🔒 │ ││ │Home│Tree│ Q │ Gld│ ││ └────┴────┴────┴────┘ │└─────────────────────────────────────────────┘Layout measurements
- Header bar: 56dp height. Back arrow hidden (root screen). Settings icon right-aligned.
- Region card: full width minus 16dp horizontal margin. Variable height: min 120dp, max 180dp. Contains color swatch strip (top 8dp, fills card width,
--color-region-plenny), title (--type-h1), and 2-line description (--type-body). - Progression card (D-016): full width minus 16dp horizontal margin. Fixed height 88dp. See §Progression card detail below.
- Streak ribbon: 64dp height. Left:
icon.streak-flame(32dp). Center: day count (--type-h2) + bonus label (--type-caption). Right: tier badge (32dp × 24dp pill). - Quest pill: 56dp height. Left: ◉ active indicator. Center: quest title (
--type-body) + beat progress. Tappable — opens quest detail screen (not in phase 9 scope). - Faction strip: 56dp height, 5 equal-width cells. Each cell: faction icon placeholder (24dp) + tier badge.
- Bottom tab bar: 64dp height, 4 equal-width tabs.
Region card detail
╔═══════════════════════════════════════════╗║ ████████████████████████████████████████ ║ color strip (8dp, --color-region-plenny)║ ║║ PLENNY / PLENNY (en / pl) ║ --type-display, --color-on-surface║ ║║ The administrative heart of Strzep. ║ --type-body, --color-on-surface-muted║ Bureaucratic gold, 13 storeys of ║ (2 lines max, ellipsis if needed)║ rooftop streets, ink that glows. ║║ ║║ [▶ Explore region map] (phase 11+) ║ disabled in phase 9╚═══════════════════════════════════════════╝Copy table — region card
| Slot | pl | en |
|---|---|---|
| Region name | Plenny | Plenny |
| Region description (2 lines) | Administracyjne serce Strzępu. Trzynaście pięter dachowych ulic, biurokratyczny wyciek na papierze. | The administrative heart of Strzep. Thirteen storeys of rooftop streets; bureaucratic leak on paper. |
| Explore CTA (disabled) | Eksploruj region mapę (wyszarzone) | Explore region map (greyed out) |
Progression card detail (D-016)
Decision authority: D-016 (2026-05-20). No XP bar. No second progress indicator. Single emergent Poziom N where N = tree_points_spent. See wiki/src/content/docs/tree/progression.md for full math.
Data fields consumed from GET /walker/profile:
treePointsSpent→N(Poziom number)treePointsBanked→M(banked banner, shown only when M > 0)nextPointHint→ active quest id + step progress (derived client-side from quest state)
State: Normal — banked points present
╔═════════════════════════════════════════════╗║ ║║ │ Poziom ║ --color-on-surface-muted, --type-caption║ │ 42 42 / 180 allocated ║ "42" --type-display + Literata 700║ │ --type-caption, muted ║ "42 / 180 allocated" --type-caption║ │ [linijka] ║║ ┌──────────────────────┐ ║║ │ Punkty w skarbcu: 3 │ ║ banked banner (parchment bg)║ └──────────────────────┘ ║║ Następny punkt: Quest 001 step 4 / 5 ║ --type-caption, --color-on-surface-muted╚═════════════════════════════════════════════╝State: Normal — no banked points (M = 0)
╔═════════════════════════════════════════════╗║ ║║ │ Poziom ║║ │ 42 42 / 180 allocated ║║ │ [linijka] ║║ ║║ Następny punkt: Quest 001 step 4 / 5 ║╚═════════════════════════════════════════════╝Banked banner is absent. No empty-state substitute — the card simply has more vertical whitespace. Do not show Punkty w skarbcu: 0.
State: Day-0 (0 points spent, 0 banked)
╔═════════════════════════════════════════════╗║ ║║ │ Poziom ║║ │ 0 0 / 180 allocated ║║ │ [linijka — empty] ║║ ║║ Następny punkt: Quest 001 step 1 / 5 ║╚═════════════════════════════════════════════╝Pisarska linijka — styling spec
The linijka is a vertical ruled line on the left edge of the level number, with three tick marks at nodes 50, 100, and 150. The fill segment runs from the bottom of the line to the current N position.
│ ···150 ← tick at 150, --color-border-subtle │ ▓ ···100 ← tick at 100, --color-border-subtle ▓ ▓ ··· 50 ← tick at 50, --color-border-subtle ▓ ▓ ← fill: --color-region-plenny at 70% opacity ▓ (warm gold, echoes Plenny parchment register) ■ ← bottom anchor, 4dp square dotDimensions: 3dp wide line, 64dp tall, sitting flush-left inside the card’s 16dp left padding zone. Fill segment color: --color-region-plenny at 70% opacity on --color-surface. Tick marks: 1dp horizontal dash (8dp wide), --color-border-subtle, at the proportional position corresponding to nodes 50, 100, 150 out of 180.
Rationale (D-014 diegetic register): The linijka is a page-ruler metaphor from the Cech’s Spis workflow — N / 180 reads as strona N rejestru. The vertical orientation keeps the number dominant (level = left-side focal point) while the line provides spatial context without introducing a second progress bar. This is intentionally sparse: the fill does not pulse, animate, or glow. It is a written record, not a game HUD.
NOT an XP bar. The linijka is a static ruler with a filled segment. It does not have an animated fill-to-next-point animation, a percentage readout, or a threshold marker for “next reward.” D-016 explicitly forbids an XP bar pattern.
Card layout dimensions
- Card:
--color-surface, 12dp corner radius, 16dp inner padding, full width minus 16dp horizontal margin. - Left side: linijka (3dp × 64dp) + level number (
--type-display, 32px, Literata 700,--color-on-surface) stacked vertically, left-aligned. - Right side (aligned right edge of card):
Poziomlabel (--type-caption,--color-on-surface-muted) floats top-right above42 / 180 allocated(--type-caption,--color-on-surface-muted). - Banked banner:
--color-surface-variantbackground, 8dp corner radius, 8dp horizontal + 4dp vertical padding,--color-region-plennytext,--type-bodyweight 600. Rendered as inline block below the right column. - Next-point hint:
--type-caption,--color-on-surface-muted, bottom of card.
Banked banner copy (per D-016 + D-011)
Punkty w skarbcu is a deliberate PL-label in the chrome. Per D-011, system-chrome generally uses EN handles for quest names, but D-016’s banner copy convention specifies the PL term Punkty w skarbcu as the canonical label for this surface. EN-locale fallback: Points banked:.
| Slot | pl | en |
|---|---|---|
| Poziom label | Poziom | Level |
| Allocation subtitle | {N} / 180 zaalokowanych | {N} / 180 allocated |
| Banked banner (M > 0) | Punkty w skarbcu: {M} | Points banked: {M} |
| Next-point hint (quest in progress) | Następny punkt: Quest {id} krok {n}/{m} | Next point: Quest {id} step {n}/{m} |
| Next-point hint (no active quest) | Następny punkt: otwórz Zadania | Next point: open Quests |
Locale note: Poziom is the canonical PL label; Level is the EN equivalent. Since this element surfaces in the app’s primary UI chrome (not inside quest prose), mobile-developer should respect the player’s locale setting: PL locale → Poziom, EN locale → Level. The banner label Punkty w skarbcu follows the same rule.
Streak ribbon detail
State: Active streak, Tier 1 (day 7+)
┌────────────────────────────────────────────────┐│ [icon.streak-flame] ││ Dzień 14 / Day 14 ┌────────────────┐ ││ │ Premia T1 +20%│ │ T1 badge: --color-warning bg│ Jeszcze 16 dni do T2 └────────────────┘ ││ 16 days to Tier 2 │└────────────────────────────────────────────────┘State: Streak at risk (1 day remaining before decay)
┌────────────────────────────────────────────────┐│ [icon.streak-flame — amber pulse animation] ││ Dzień 14 / Day 14 ┌───────────────────┐ ││ │ ⚠ Idź dziś! │ │ --color-warning bg, pulse│ Seria wygasa jutro └───────────────────┘ ││ Streak expires tomorrow │└────────────────────────────────────────────────┘State: Day 0 (no streak yet)
┌────────────────────────────────────────────────┐│ [icon.streak-flame — grey, no pulse] ││ Zrób pierwszy krok / Take your first step ││ Seria: 0 dni / Streak: 0 days │└────────────────────────────────────────────────┘Copy table — streak ribbon
| Slot | pl | en |
|---|---|---|
| Day count label | Dzień {n} | Day {n} |
| Tier badge T1 | Premia T1 +20% | T1 bonus +20% |
| Tier badge T2 | Premia T2 +50% | T2 bonus +50% |
| Days to next tier | Jeszcze {n} dni do T{next} | {n} days to Tier {next} |
| Streak at risk | Seria wygasa jutro | Streak expires tomorrow |
| Walk today CTA (at-risk) | Idź dziś! | Walk today! |
| Day 0 prompt | Zrób pierwszy krok | Take your first step |
| Day 0 sub-label | Seria: 0 dni | Streak: 0 days |
Backend field-name alignment (D-007)
The tier multipliers displayed here (+20% at T1, +50% at T2) map to the backend streak endpoint GET /walker/streak. Per phase-13-plan.md feature checklist, this endpoint returns the current streak day count and recognition tier. Expected field names (wire to tech-architect for ADR confirmation):
recognitionTier: integer 0 | 1 | 2 — maps to T0/T1/T2 badge display.multiplier: float 1.00 | 1.20 | 1.50 — used in energy-delta formula display on post-walk-sync.
FLAG for tech-architect: Confirm recognitionTier + multiplier as the canonical field names on the streak response DTO. If ADR-0007 (currently Android network layer) documents a different naming, the wireframe copy table referencing T1/T2/+20%/+50% must remain consistent with those DTO names — drift between wireframe and DTO is a mobile-developer a11y-compliance risk at 13-4.
Active quest pill detail
State: Quest 001, Beat 2 in progress
┌──────────────────────────────────────────────────┐│ ◉ Quest 001 — Pierwszy Trakt ││ Quest 001 — The First Road ││ ● ● ○ ○ ○ Beat 2 of 5 ││ Reach the bridge at Domek Mostkowy │└──────────────────────────────────────────────────┘State: Quest 001, Beat 1 (day 0)
┌──────────────────────────────────────────────────┐│ ◉ Quest 001 — Pierwszy Trakt ││ Quest 001 — The First Road ││ ● ○ ○ ○ ○ Beat 1 of 5 ││ Meet Bertranda at the Head Scribe's office │└──────────────────────────────────────────────────┘State: No active quest
┌──────────────────────────────────────────────────┐│ ○ [TODO narrative-designer: 1 line — no active ││ quest prompt, Cech tone, max 50 chars PL] ││ [No active quest — visit the Quests tab] │└──────────────────────────────────────────────────┘Beat progress dots: filled ● = completed, hollow ○ = pending. Current beat uses ◎ (ring) if desired.
Copy table — quest pill
| Slot | pl | en |
|---|---|---|
| Quest name | Quest 001 — Pierwszy Trakt | Quest 001 — The First Road |
| Beat label | Etap {n} z {total} | Beat {n} of {total} |
| Beat 1 objective | Spotkaj Bertrandę w biurze Naczelnej Pisarki | Meet Bertranda at the Head Scribe's office |
| Beat 2 objective | Opuść Plenny przez Bramę Południową | Leave Plenny through the South Gate |
| Beat 3 objective | Dotrzyj do mostu przy Domku Mostkowym | Reach the bridge at Domek Mostkowy |
| Beat 4 objective | Dostarcz kopertę Pani Sczepiel | Deliver the envelope to Pani Sczepiel |
| Beat 5 objective | Wróć do Plennego i oddaj odpowiedź Bertrandzie | Return to Plenny and deliver the reply to Bertranda |
| No active quest | [TODO narrative-designer] | [TODO narrative-designer] |
Faction strip detail
State: All Tier 0 (day 0 / mock mode)
┌──────┬──────┬──────┬──────┬──────┐│ 👁 │ 📚 │ 🕯 │ 💰 │ 🐾 │ ← placeholder until custom icons arrive│ Cech │ Akad │Bract │ Wolk │ Dzik ││ T0 │ T0 │ T0 │ T0 │ T0 │└──────┴──────┴──────┴──────┴──────┘Each cell:
- Icon: custom lore icon (placeholder until phase 11 asset sprint). Use system icon as fallback.
- Short label (max 4 chars for tab):
Cech,Akad,Brac,Wolk,Dzik(PL) /Unf.,Acad,Lght,Mer.,Wild(EN) — these are only in the strip; full names appear in the detail view. - Tier badge:
T0throughT5, colored by faction accent token. - Tapping a cell opens faction detail (not in phase 9 scope — show empty state).
Tier badge color mapping
| Tier | Badge bg color | Meaning |
|---|---|---|
| T0 | --color-disabled | Stranger / Obcy |
| T1 | faction accent at 60% opacity | Apprentice / Praktykant |
| T2 | faction accent at 80% | Surveyor / Lustrator |
| T3 | faction accent at 100% | Deputy / Zastępca |
| T4 | faction accent + gold border | Master / Mistrz |
| T5 | --color-region-plenny (gold) | Legend / Legenda |
Copy table — faction strip
| Slot | pl | en |
|---|---|---|
| T0 tier label | T0 · Obcy | T0 · Stranger |
| T1 tier label | T1 · Praktykant | T1 · Apprentice |
| T2 tier label | T2 · Lustrator | T2 · Surveyor |
| T3 tier label | T3 · Zastępca | T3 · Deputy |
| Strip label (above) | (none — strip is self-labelled via faction icons) | (none) |
Bottom tab navigation
┌────────────────┬────────────────┬────────────────┬────────────────┐│ │ │ │ ││ [HOME icon] │ [TREE icon] │ [Q icon] │ [GUILD icon] ││ │ │ │ 🔒 ││ Główna │ Drzewo │ Zadania │ Gildia ││ Home │ Tree │ Quests │ Guild │└────────────────┴────────────────┴────────────────┴────────────────┘- Active tab: icon in
--color-region-plenny, label in--color-on-surface. - Inactive tab: icon and label in
--color-on-surface-muted. - Guild tab disabled in mock mode: icon is the system lock icon,
--color-disabledcolor. Tapping shows tooltip:[GUILD_DISABLED_TOOLTIP].
Copy table — bottom tabs
| Slot | pl | en |
|---|---|---|
| Home tab | Główna | Home |
| Tree tab | Drzewo | Tree |
| Quests tab | Zadania | Quests |
| Guild tab (disabled) | Gildia | Guild |
| Guild disabled tooltip | Dostępne po zamknięciu bety | Available after closed beta |
Empty / Day-0 state
Day 0 is defined as: no steps ingested yet, Quest 001 at Beat 1, all faction reps at T0, streak at 0 days, 0 tree points spent. This is the first home screen a new tester sees.
┌─────────────────────────────────────────────┐│ ≡ WalkRPG [⚙] │├─────────────────────────────────────────────┤│ ││ ╔═════════════════════════════════════╗ ││ ║ ████ PLENNY ████████████████████ ║ │ region card — always shown│ ║ Administracyjne serce Strzępu... ║ ││ ╚═════════════════════════════════════╝ ││ ││ ╔═════════════════════════════════════╗ ││ ║ │ Poziom ║ │ progression card — day 0│ ║ │ 0 0 / 180 ║ ││ ║ │ [linijka empty] ║ ││ ║ Następny punkt: Quest 001 krok 1/5║ ││ ╚═════════════════════════════════════╝ ││ ││ ┌──────────────────────────────────────┐ ││ │ [icon.streak-flame — grey] │ │ streak ribbon — empty state│ │ Zrób pierwszy krok │ ││ │ Seria: 0 dni │ ││ └──────────────────────────────────────┘ ││ ││ ┌──────────────────────────────────────┐ ││ │ ◉ Quest 001 — Pierwszy Trakt │ │ quest pill — beat 1│ │ ● ○ ○ ○ ○ Etap 1 z 5 │ ││ │ Spotkaj Bertrandę... │ ││ └──────────────────────────────────────┘ ││ ││ ┌──────┬──────┬──────┬──────┬──────┐ ││ │ Cech │ Akad │Bract │ Wolk │ Dzik │ │ faction strip — all T0│ │ T0 │ T0 │ T0 │ T0 │ T0 │ ││ └──────┴──────┴──────┴──────┴──────┘ ││ │├─────────────────────────────────────────────┤│ ┌────┬────┬────┬────┐ ││ │🏠 │🌳 │📜 │🔒 │ ││ │Home│Tree│ Q │ Gld│ ││ └────┴────┴────┴────┘ │└─────────────────────────────────────────────┘Day-0 note: the screen is fully functional on day 0. Nothing is hidden or replaced with empty-state illustrations. The quest is real (Beat 1 is active), the region card is real, the faction strip is real (just all T0). The progression card shows Poziom 0 with the linijka empty. The only difference from a day-14 screen is the streak ribbon showing the walk-prompt state and the progression card at zero.
Accessibility — Home screen
Walking-specific baseline answers:
| Check | Result |
|---|---|
| One-handed while walking | PASS — progression card and streak ribbon are in the upper scroll zone; bottom tabs reachable with thumb. Settings icon top-right is secondary-action only. |
| Glance ≤ 2 seconds | PASS — Poziom N large numeral is the dominant primary read after region card. The linijka provides spatial context at a glance without requiring focus. Streak count is secondary. Both above fold, high contrast. |
| Tap target ≥ 48dp | PASS — streak ribbon 64dp, quest pill 56dp, faction strip cells 56dp, tab bar 64dp. Progression card is display-only (not interactive); no tap target required. |
| Color contrast ≥ 4.5:1 body | PASS — all primary text uses --color-on-surface (#f0ece3) which clears 14:1. Poziom N uses --color-on-surface at --type-display. Banked banner uses --color-region-plenny (#c9a04a) text on --color-surface-variant (#252320): ~8.4:1 — PASS. Linijka fill uses --color-region-plenny at 70% opacity (decorative, not text — no contrast requirement). |
| Font scale 200% | PARTIAL — progression card at 200% scale: Poziom N (--type-display, 32px → 64px effective) remains readable. 42 / 180 allocated caption wraps to two lines; card height grows to accommodate (use min-height, not fixed height). Banked banner reflowing below is acceptable. Region description truncates to 1 line at 200%. Tab labels drop to icons-only at 200% per design-system.mdx rule. |
| Audio/haptic alternatives | PASS — streak update fires haptic on mount if streak changed. Quest progress fires on beat completion. Banked banner appearance (point just granted post-sync) does not itself fire haptic — haptic fires on the post-walk-sync screen when the grant event occurs. Home refresh is silent. |
Progression card — screen reader semantics
The progression card is a display block, not an interactive element. Recommended accessibility tree:
<section aria-label="Progression"> <span aria-label="Level {N}">Poziom {N}</span> <span aria-label="{N} of 180 nodes allocated">{N} / 180 allocated</span> <!-- linijka: role="presentation" — decorative, skip in SR --> <span aria-label="Points banked: {M}" [hidden when M=0]>Punkty w skarbcu: {M}</span> <span aria-label="Next point: Quest {id} step {n} of {m}">Następny punkt: ...</span></section>Screen reader traversal order (focus order position 2 — directly after header, before streak ribbon): the progression state is high-priority glance content in D-016’s model and must surface early in traversal.
FLAG: Screen reader traversal order for faction strip. Five cells with icon + tier badge each. Focus order: left-to-right. Announce: “[Faction name] — [Tier name] — Tier [n]”. Example: “Unfinished Guild — Stranger — Tier 0”.