Wireframes — Faction reputation + Quest log
Wireframes — Faction reputation + Quest log
1. Frame
Both screens are tab-level screens accessible from the main navigation bar. They share the same navigation context: a five-item bottom tab bar with tabs for Home, Tree, Factions, Quests, and Map. Neither screen is a modal; they are persistent tab destinations that the player navigates to and from freely during a session.
When these screens appear: The Factions tab becomes navigable on game start — the player has a faction relationship (Apprentice / Outsider / Customer / Pilgrim / Outsider) with all five factions from minute zero. The Quest log appears populated after quest-001 is issued (beat 1: Bertranda’s envelope). Prior to that, the Quest log shows its empty state.
Relationship to combat screen (11e-1): Both screens can be navigated to from the victory outcome card (“Continue Journey” CTA returns the player to the previous tab context, which may be either quests or map). Faction reputation deltas from quest outcomes appear in the Factions tab after the sync that follows a quest beat resolution.
Design authority: All layout, color token, and UX pattern decisions on this page are W-level autonomous per CLAUDE.md. Token assignments and pattern introductions are logged in the companion decision file at ops/decisions/2026-05-19-faction-and-quest-log-wireframe.md.
2. Screen 1 — Faction reputation overview and drill-down
2.1 Overview state
The overview is the default state when the Factions tab is opened. All five factions are visible in a vertically stacked list without scrolling on a standard (375pt wide) portrait screen. Each faction row is a self-contained card.
Per-row anatomy:
| Element | Data source | Visual spec |
|---|---|---|
| Faction sigil/icon placeholder | icon.cech-seal / icon.faction-academy / icon.faction-quiet-lights / icon.faction-merchantry / icon.faction-wild-path (from design-system §4.2) | 40dp circle, faction accent color border (2dp), icon centered. Icon is a named placeholder until art sprint. |
| Faction name | name.en from faction data | --type-body-lg, --color-on-surface |
| Current tier name | reputationTiers[currentIndex].name.en | --type-body, faction accent color (see §6 of this doc for token mapping) |
| Tier index out of total | ”Tier N / 5” | --type-caption, --color-on-surface-muted |
| Progress bar to next tier | (currentRep - currentTierThreshold) / (nextTierThreshold - currentTierThreshold) | 6dp height bar, filled with faction accent color; bar bg --color-surface-variant; at max tier (5/5) bar is full and reads “Max tier” instead of a fraction |
| Rep value | Numeric e.g. “247 rep” | --type-caption, --color-on-surface-muted, right-aligned on the row |
| Tap target | Whole card | ≥ 48dp height guaranteed; full card is interactive |
State pill: No always-on state pill at the overview level. The tier name and color fill carry the state. The “Rival” relationship is marked with a small red chip on the faction card only when the player’s rep with a rival faction is at Tier 3 or higher (making the rivalry mechanically visible). This chip is not shown at Tier 1 or Tier 2 — it only surfaces when the tension is relevant to the player’s current standing.
┌─────────────────────────────────────────────┐│ ││ FACTIONS [sort] ││ ───────────────────────────────────────── ││ ││ ┌─────────────────────────────────────┐ ││ │ [CECH] Guild of Unfinished Expeds │ ││ │ Cartographer • Tier 3/5 │ ││ │ ████████████░░░░ 247 / 300 rep │ ││ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ [ACAD] Practical Academy │ ││ │ Listener • Tier 1/5 │ ││ │ ░░░░░░░░░░░░░░░░ 18 / 100 rep │ ││ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ [BRAC] Brotherhood of Quiet Lights │ ││ │ Lamplighter • Tier 2/5 │ ││ │ ████████░░░░░░░░ 130 / 300 rep │ ││ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ [MART] The Free Mart of Targosie │ ││ │ Customer • Tier 1/5 │ ││ │ ░░░░░░░░░░░░░░░░ 0 / 100 rep │ ││ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ [WILD] The Untamed Road │ ││ │ Outsider • Tier 1/5 │ ││ │ ░░░░░░░░░░░░░░░░ 0 / 100 rep │ ││ └─────────────────────────────────────┘ ││ ││ ───────────────────────────────────────── ││ [Home] [Tree] [FACTIONS] [Quests] [Map] │└─────────────────────────────────────────────┘Bracket labels ([CECH], [ACAD], etc.) are placeholders for the custom lore icons defined in design-system §4.2. The sort control (top-right) allows sorting by rep value (default: descending), by tier, or by home region. Sort preference is persisted per session but not synced to the server.
2.2 Drill-down state — Unfinished Guild (worked example)
Tapping any faction card navigates to its drill-down. This is a new screen pushed onto the navigation stack (back chevron appears top-left). It is NOT a bottom sheet — the full-screen navigation model is used because the content volume (5 tiers, leaders, keystone list) exceeds bottom sheet capacity at 200% font scale.
The drill-down uses the same three-zone layout inherited from combat-screen (11e-1): a status zone at top, a content zone in the middle (scrollable), and an action zone at the bottom. The action zone on this screen is empty in phase 11 (no faction-specific actions wired yet) — it is reserved for future interactions such as “View faction quests” or “Check standing in region”.
Top zone (status zone):
- Faction name at
--type-h1,--color-on-surface - Current tier name as a large state pill (analogous to “YOUR TURN” pill in combat-screen §2.5): background is the faction accent color, label is the tier name in
--type-body-lg,--color-bg(reversed for legibility against the colored background) - Tier index “3 / 5” in
--type-captionbelow the pill - Rep bar: full-width, 8dp height, same fill logic as overview cards
Content zone (scrollable):
- Description section:
description.enin--type-body,--color-on-surface - All tiers listed vertically — current tier highlighted (left 4dp border in faction accent color,
--color-surface-elevatedbackground). Each tier row shows: tier name, threshold, and reward prose. - Leaders section: NPC chips (name + role, faction accent border, 48dp height)
- Affinity keystones section: shows “No keystones yet” placeholder in phase 11 (affinity keystone content is authored in mechanics-designer phases 11c+)
- Rivals section: rival faction chips (red border,
--color-error, name + explanation)
┌─────────────────────────────────────────────┐│ ││ < Guild of Unfinished Expeditions ││ ││ ┌─────────────────────────────────────┐ ││ │ [CECH SIGIL — 56dp] │ ││ │ │ ││ │ ┌─────────────────────┐ │ ││ │ │ Cartographer │ │ │ <- tier pill, gold bg (#c9a04a)│ │ └─────────────────────┘ │ ││ │ Tier 3 / 5 │ ││ │ │ ││ │ ████████████░░░ 247 / 300 rep │ ││ │ 53 rep to next tier │ ││ └─────────────────────────────────────┘ ││ │ <- scrollable below│ ┌─────────────────────────────────────┐ ││ │ About │ ││ │ The Walker's home guild — │ ││ │ cartographers who pay for │ ││ │ measured kilometres, registered │ ││ │ anomalies, and delivered leak. │ ││ │ Motto: "Every step we write to │ ││ │ the end." │ ││ └─────────────────────────────────────┘ ││ ││ REPUTATION TIERS ││ ───────────────────────────────────────── ││ ┌─────────────────────────────────────┐ ││ │ Tier 1 Apprentice 0 rep │ ││ │ Wooden ring, pocket map, small │ ││ │ commissions. │ ││ └─────────────────────────────────────┘ ││ ┌─────────────────────────────────────┐ ││ │ Tier 2 Scout 100 rep │ ││ │ Named recognition at Cech offices. │ ││ │ Two-week-stability maps. │ ││ └─────────────────────────────────────┘ ││ ┌──◄ CURRENT ─────────────────────────┐ ││ │ Tier 3 Cartographer 300 rep │ │ <- highlighted: gold left border│ │ Mapping contracts in other offices. │ ││ │ Brown-ink stamp on returned maps. │ ││ └─────────────────────────────────────┘ ││ ┌─────────────────────────────────────┐ ││ │ Tier 4 Chief Cartographer 600 rep │ │ <- greyed, future│ │ Bertranda's letters shift from │ ││ │ four dots to three. │ ││ └─────────────────────────────────────┘ ││ ┌─────────────────────────────────────┐ ││ │ Tier 5 Guild Scribe 1000 rep │ │ <- greyed, future│ │ Bertranda finishes a sentence. │ ││ │ Apprentices listen at the door. │ ││ └─────────────────────────────────────┘ ││ ││ LEADERS ││ ───────────────────────────────────────── ││ ┌─────────────────────────────────────┐ ││ │ [icon] Bertranda Dot-Wells │ ││ │ Head Scribe of the Guild │ ││ └─────────────────────────────────────┘ ││ ││ AFFINITY KEYSTONES ││ ───────────────────────────────────────── ││ ┌─────────────────────────────────────┐ ││ │ No keystones linked yet. │ ││ │ (Keystone content: Phase 11c+) │ ││ └─────────────────────────────────────┘ ││ ││ RIVALS ││ ───────────────────────────────────────── ││ ┌─────────────────────────────────────┐ │ <- no rivals for Unfinished Guild│ │ No rival factions. │ ││ └─────────────────────────────────────┘ ││ │└─────────────────────────────────────────────┘Rival chip example (shown here as a reference, applies to Academy / Brotherhood / Merchantry / Wild Path which do have rivals):
RIVALS ───────────────────────────────────────── ┌─ RIVAL ─────────────────────────────────┐ │ [icon] The Free Mart of Targosie │ <- red (--color-error) left border │ Oppose sealing — trade the leak │ └─────────────────────────────────────────┘The rival chip shows: rival faction name + a one-line reason pulled from faction description content. The red border is the visual signal; “RIVAL” label in --type-caption --color-error at top-left of the chip. The player is not penalized for having high rep with a rival’s rival (the system is non-punitive per D-010 extension to faction philosophy). The chip is purely informational.
2.3 State machine — Faction screen
stateDiagram-v2 [*] --> faction_overview : player opens Factions tab
faction_overview --> faction_drilldown : tap faction card faction_drilldown --> faction_overview : tap back / swipe right
faction_overview --> faction_overview_sorted : tap sort control faction_overview_sorted --> faction_overview : sort persisted; same screen
faction_drilldown --> tier_up_overlay : rep delta pushes past next tier threshold tier_up_overlay --> faction_drilldown : overlay auto-dismisses after 2.5s or tap
note right of faction_overview All 5 factions always visible. Sort: by rep (default), tier, region. Rival chips appear at tier >= 3 only. end note
note right of faction_drilldown Three-zone layout (inherited from combat-screen 11e-1). Content zone scrollable. Current tier highlighted. Keystone + rival sections always present; placeholder text when empty. end note
note right of tier_up_overlay Non-punitive per D-010 extension: tier gains are always celebrated, losses are framed as "standing adjusts" not "you lost rank". Overlay: tier name + reward prose + haptic. Rep LOSSES do not trigger overlay — they update the bar silently on next sync. end note3. Screen 2 — Quest log
3.1 Quest log overview state (mid-state: 1 active, 1 completed)
The Quest log is a three-section screen: Active quests (always expanded), Completed quests (collapsed by default, expand on tap), and Hidden quests (always present, locked). The three sections are vertically stacked and the whole screen is scrollable.
Quest name language decision: Quest names use the English name on all game-system surfaces (name.en). Justification: quest names are system identifiers used in notifications, sync reports, and screen reader announcements. Polish quest names are longer and contain diacritics that can be garbled by non-Polish system TTS. The English name is the reliable surface. The Polish name is used inside the quest prose itself (description, step descriptions) — where the player is reading, not scanning. This is a W-level decision.
Active quest row anatomy:
| Element | Data source | Visual spec |
|---|---|---|
| Quest name | name.en | --type-body-lg, --color-on-surface |
| Region badge | regionId mapped to region name + --color-region-* token | Small chip, colored background, --type-caption, --color-bg text (reversed) |
| Step progress | ”Step N of M” | --type-caption, --color-on-surface-muted |
| Step progress bar | filled steps / total steps | 4dp bar, --color-success fill, --color-surface-variant bg |
| Giver NPC | giverNpcId.name.en or “Guild commission” if null | --type-caption, --color-on-surface-muted, icon prefix (icon.cech-seal for Guild) |
| Active beat indicator | ”ACTIVE BEAT” pill — analogous to “YOUR TURN” pill from combat-screen (11e-1 §2.5) | Small pill, --color-success background, --color-bg text, --type-caption |
| Tap target | Whole row | ≥ 48dp height |
Completed quest row anatomy (collapsed): Name + completion date + rewards summary (“4 pts” or “6 pts”) on one line. Tap to expand for full summary.
Hidden quest slot: Always visible. Shows: ”???” at --type-body-lg --color-disabled + region badge (region is revealed; the existence of the slot is part of the affordance that tells the player “there is something here”). Sub-label: “Allocate a keystone to reveal this quest.” at --type-caption --color-on-surface-muted. This communicates Pillar 3 without being didactic.
┌─────────────────────────────────────────────┐│ ││ QUEST LOG ││ ───────────────────────────────────────── ││ ││ ACTIVE (1) ││ ───────────────────────────────────────── ││ ┌─────────────────────────────────────┐ ││ │ ◉ ACTIVE BEAT │ │ <- green pill│ │ │ ││ │ Quest 002 — The Seal-House Falls │ ││ │ Silent │ ││ │ │ ││ │ [FROSTLANDS] Giver: Guild │ ││ │ commission │ ││ │ │ ││ │ Step 3 of 5 │ ││ │ ██████░░░░░░ 60% │ ││ └─────────────────────────────────────┘ ││ ││ COMPLETED (1) [v] ││ ───────────────────────────────────────── ││ ┌─────────────────────────────────────┐ ││ │ Quest 001 — The First Road │ ││ │ [PLENNY] Completed • 4 pts │ ││ └─────────────────────────────────────┘ ││ ││ HIDDEN (1) ││ ───────────────────────────────────────── ││ ┌─────────────────────────────────────┐ ││ │ ??? [FROSTLANDS] │ ││ │ Allocate a keystone to reveal. │ ││ └─────────────────────────────────────┘ ││ ││ ───────────────────────────────────────── ││ [Home] [Tree] [Factions] [QUESTS] [Map] │└─────────────────────────────────────────────┘The [v] on the Completed header row is a disclosure chevron. Collapsed by default because the completed list will grow long over a full playthrough and the active section deserves prominence at every open. The hidden section is always visible (collapsed = invisible would undermine Pillar 3’s hook). Hidden slots show a region badge so the player understands which zone to explore; the quest name and giver are concealed.
3.2 Empty states
No active quests (game just started, Quest 001 not yet issued):
┌─────────────────────────────────────────────┐│ ││ QUEST LOG ││ ───────────────────────────────────────── ││ ││ ACTIVE (0) ││ ───────────────────────────────────────── ││ ┌─────────────────────────────────────┐ ││ │ │ ││ │ No active quests. │ ││ │ Visit Bertranda at the Guild to │ ││ │ receive your first commission. │ ││ │ │ ││ └─────────────────────────────────────┘ ││ ││ COMPLETED (0) [v] ││ ───────────────────────────────────────── ││ (collapsed — nothing inside) ││ ││ HIDDEN (0) ││ ───────────────────────────────────────── ││ ┌─────────────────────────────────────┐ ││ │ Some quests unlock when you │ ││ │ allocate keystones in the tree. │ ││ └─────────────────────────────────────┘ ││ │└─────────────────────────────────────────────┘Empty active state copy is intentionally warm and directional (Pratchett-tone, D-006): it names Bertranda and gives a concrete next action rather than a generic “nothing here” placeholder. The empty Hidden section in a brand-new save file shows the system explanation rather than a locked slot — there is nothing to hint at yet, so the copy describes the mechanic in plain language.
No completed quests (active quests exist, none finished):
The Completed section remains collapsed. When expanded it shows: “No completed quests yet.” at --type-body, --color-on-surface-muted. No further copy — the active section is the relevant one at this point in the game.
3.3 Quest drill-down — Quest 002 at step 3 (worked example)
Tapping an active quest row opens its drill-down. Like the faction drill-down, this is a full-screen push navigation (not a bottom sheet). Same three-zone layout inherited from 11e-1.
Top zone:
- Quest name at
--type-h1 - Region badge
- “ACTIVE” pill (green, analogous to faction tier pill)
- “Step 3 of 5” with full-width progress bar
Content zone (scrollable):
- Quest description (
description.en) - Steps listed: past steps marked as completed (checkmark + muted text), current step highlighted (gold left border, full text), future steps dimmed (“LOCKED” pill,
--color-disabledtext — step description hidden until reached) - Giver section: “Guild commission” with
icon.cech-seal - Rewards section: “6 pts on completion” + reputation placeholders (“Faction rep: TBD — outcome-dependent” per the quest data comment)
Bottom zone (reserved, empty in phase 11): A placeholder row “Quest actions (Phase 11c+)” in --color-disabled communicates that interactions will live here in a future phase.
┌─────────────────────────────────────────────┐│ ││ < Quest 002 — The Seal-House Falls ││ Silent ││ ││ ┌─────────────────────────────────────┐ ││ │ [FROSTLANDS] ◉ ACTIVE │ ││ │ │ ││ │ Step 3 of 5 │ ││ │ ██████░░░░░░ 60% │ ││ └─────────────────────────────────────┘ ││ │ <- scrollable below│ ┌─────────────────────────────────────┐ ││ │ Magister Brodek Belated has not │ ││ │ reported from the Mroza seal-house │ ││ │ in ten days. Walk north. Find out │ ││ │ whether he is alive. Decide what │ ││ │ to do about the crack he was │ ││ │ holding closed. │ ││ └─────────────────────────────────────┘ ││ ││ STEPS ││ ───────────────────────────────────────── ││ ┌─────────────────────────────────────┐ ││ │ [✓] Step 1 — Soplica Watchtower │ │ <- completed; muted text│ │ Commission picked up. │ ││ └─────────────────────────────────────┘ ││ ┌─────────────────────────────────────┐ ││ │ [✓] Step 2 — Three-day march │ │ <- completed; muted text│ │ Ridge reached. Listening. │ ││ └─────────────────────────────────────┘ ││ ┌──◄ CURRENT ─────────────────────────┐ │ <- gold left border│ │ Step 3 — The hum │ ││ │ The wind brings not silence but │ ││ │ a slow three-note refrain. │ ││ │ Brodek is holding. Descend. │ ││ └─────────────────────────────────────┘ ││ ┌─────────────────────────────────────┐ ││ │ [--] Step 4 — Debrief │ │ <- locked; dimmed│ │ LOCKED │ ││ └─────────────────────────────────────┘ ││ ┌─────────────────────────────────────┐ ││ │ [--] Step 5 — Decide the seal │ │ <- locked; dimmed│ │ LOCKED │ ││ └─────────────────────────────────────┘ ││ ││ ISSUED BY ││ ───────────────────────────────────────── ││ ┌─────────────────────────────────────┐ ││ │ [icon.cech-seal] Guild commission │ ││ │ Posted: Soplica Watchtower │ ││ └─────────────────────────────────────┘ ││ ││ REWARDS ││ ───────────────────────────────────────── ││ ┌─────────────────────────────────────┐ ││ │ 6 pts on completion │ ││ │ Faction rep: outcome-dependent │ ││ │ (Academy / Brotherhood / Guild) │ ││ └─────────────────────────────────────┘ ││ │└─────────────────────────────────────────────┘Completed quest drill-down — Quest 001 (worked example):
When a completed quest is tapped from the Completed section:
┌─────────────────────────────────────────────┐│ ││ < Quest 001 — The First Road ││ ││ ┌─────────────────────────────────────┐ ││ │ [PLENNY] ✓ COMPLETED │ │ <- success pill (green bg)│ │ │ ││ │ Completed 2026-05-19 │ │ <- date display│ │ Step 5 of 5 │ ││ │ ████████████ 100% │ ││ └─────────────────────────────────────┘ ││ ││ All steps completed. The map updates ││ for the first time. The gold stamp is ││ on your pocket map now. ││ ││ STEPS ││ ───────────────────────────────────────── ││ [✓] Step 1 — Meet Bertranda ││ [✓] Step 2 — South Gate ││ [✓] Step 3 — The Bridge ││ [✓] Step 4 — The Karczma ││ [✓] Step 5 — Return and Redraw ││ ││ REWARDS ││ ───────────────────────────────────────── ││ ┌─────────────────────────────────────┐ ││ │ 4 pts earned │ ││ │ Issued by: Bertranda Dot-Wells │ ││ └─────────────────────────────────────┘ ││ │└─────────────────────────────────────────────┘The completed drill-down shows all steps as checked and muted, the completion date, and the final rewards. The description is removed from the completed view (the player does not need the orientation text anymore); instead a short retrospective line is shown (“The map updates for the first time…”) drawn from the final beat’s description prose.
3.4 State machine — Quest log
stateDiagram-v2 [*] --> quest_log_empty : player opens Quests tab (no quests yet) [*] --> quest_log_overview : player opens Quests tab (quests exist)
quest_log_empty --> quest_log_overview : Quest 001 beat 1 fires (first commission issued)
quest_log_overview --> quest_active_drilldown : tap active quest row quest_log_overview --> quest_completed_section_expanded : tap Completed header [v] quest_log_overview --> quest_completed_drilldown : tap completed quest row (when expanded)
quest_active_drilldown --> quest_log_overview : tap back / swipe right quest_completed_drilldown --> quest_log_overview : tap back / swipe right
quest_log_overview --> quest_log_overview : quest beat advances (step progress updates live) quest_log_overview --> quest_completion_overlay : quest final beat resolves (5/5 steps)
quest_completion_overlay --> quest_log_overview : overlay auto-dismisses after 3s or tap quest_completion_overlay --> quest_log_overview : quest moves from Active to Completed section
quest_log_overview --> hidden_slot_revealed : player allocates qualifying keystone (Pillar 3) hidden_slot_revealed --> quest_log_overview : new quest appears in Active section
note right of quest_log_overview Active section: always expanded. Completed: collapsed by default. Hidden: always visible, content locked. Beat progress updates are live (no manual refresh needed). end note
note right of quest_completion_overlay Full-screen overlay card (inherits combat-screen outcome card pattern). Quest name + "complete" headline + rewards summary + "Continue" CTA. Non-punitive framing for all outcomes. end note
note right of hidden_slot_revealed Pillar 3 mechanic surfaced visually. New quest arrives with a short haptic + badge notification. The "???" slot transforms into a real quest row in Active. end note4. Accessibility
4.1 Walking-specific baseline
| Check | Faction screen | Quest log |
|---|---|---|
| One-handed while walking | PASS — overview cards are full-width and take up the center 60% of the screen; the sort control (top-right) is secondary and not required to read faction state. Drill-down back button is top-left — reachable with a grip shift, not a primary action. | PASS — active quest row and quest drill-down both have no required interaction in the top 40% of the screen. Tapping a quest for detail is optional during a walk. |
| Glance ≤ 2 seconds | PASS — faction overview: tier pill color (faction accent) + progress bar fill communicates standing without reading text. A player glancing can see “full bar, 3 of 5” without reading any labels. Quest log: “ACTIVE BEAT” green pill + step progress bar is the dominant visual element for the active quest. | PASS |
| Tap target ≥ 48dp | PASS — faction cards minimum 72dp height; quest rows minimum 80dp height (two-line name + region badge + step bar). NPC leader chips and rival chips are 48dp height. | PASS |
| Color contrast ≥ 4.5:1 body | PASS — see §4.2 below. | PASS |
| Font scale 200% | PASS — see §4.3 below. | PASS |
| Audio/haptic alternatives | PASS — see §4.4 below. | PASS |
4.2 Color-blind-safe faction palette
The five faction accent colors defined in design-system §1.4 are:
| Faction | Token | Hex | Differentiator beyond color |
|---|---|---|---|
| Unfinished Guild | --color-faction-unfinished-guild | #c9a04a | Gold/amber hue; shares palette with Plenny (intentional — see design-system §1.4 note) |
| Practical Academy | --color-faction-practical-academy | #5b99c4 | Blue; distinct from all others |
| Brotherhood of Quiet Lights | --color-faction-quiet-lights | #9b7fc4 | Violet/purple; distinct from all others |
| Free Merchantry | --color-faction-free-merchantry | #4caf7d | Green; distinct from all others |
| Wild Path | --color-faction-wild-path | #c47a4a | Rust/orange |
Potential color-blind conflict: Guild #c9a04a (warm amber) and Wild Path #c47a4a (rust-orange) are similar in hue and may be confused under deuteranopia or protanopia. Mitigations:
- Shape differentiation: Each faction icon is a distinct shape (
icon.cech-sealvsicon.faction-wild-path). Color is never the sole differentiator on the faction card. - Label always present: Faction name is rendered in text on every card surface. Color reinforces; it does not replace.
- Tier pill text: The pill shows the tier name as text. At 200% font scale, the pill is large enough that the text is always readable even if color is ambiguous.
- Progress bar: The bar fill is the faction accent color but the numeric “247 / 300 rep” is always adjacent.
Contrast audit for faction accent colors used as tier pill backgrounds (reversed text --color-bg #0f0e0c on accent bg):
| Accent | Against --color-bg text (inverted: bg on accent) | --color-bg text on accent bg | AA large (3:1) |
|---|---|---|---|
#c9a04a | #0f0e0c on #c9a04a | ~6.9:1 | PASS |
#5b99c4 | #0f0e0c on #5b99c4 | ~5.8:1 | PASS |
#9b7fc4 | #0f0e0c on #9b7fc4 | ~4.6:1 | PASS (just) |
#4caf7d | #0f0e0c on #4caf7d | ~5.6:1 | PASS |
#c47a4a | #0f0e0c on #c47a4a | ~4.9:1 | PASS |
Quiet Lights violet (#9b7fc4) passes at large text (tier pill is rendered at --type-body-lg 16px+ = large text per WCAG). Do not use Quiet Lights violet as a body text color on dark backgrounds — use it only as a badge/pill background.
Region badge colors on quest log: Region badges use --color-region-* as background with --color-bg (#0f0e0c) as text. All region accent colors against --color-bg text pass at large text (3:1) per design-system §1.5.
4.3 Font scaling at 200%
Faction overview at 200%:
- Faction name at
--type-body-lg(16px) grows to ~32px. The two-line card layout (name on line 1, tier name + tier index on line 2, rep bar on line 3) gains vertical height. Card height expands viamin-height— no fixed heights. All five cards remain visible if the overview is allowed to scroll; at 200%, five-card single-screen visibility is not guaranteed and acceptable — the list scrolls. - Tier pill text (“Cartographer”) at
--type-body-lggrows to ~32px. The pill usesfit-contentwidth with horizontal padding — it grows to fit, never clips. - Rep bar remains 6dp (not font-scaled) — bars are not text elements.
Faction drill-down at 200%:
- Content zone is scrollable; no fixed layout constraints. Text wraps freely.
- Tier rows expand vertically. Current tier highlight (gold left border) tracks with row height.
Quest log at 200%:
- Active quest row: quest name may wrap to three lines. Progress bar stays 4dp. “Step 3 of 5” at
--type-caption(12px) grows to ~24px — still fits on a single line for that short string. - Quest drill-down: steps list is vertically scrollable; step text wraps freely. “LOCKED” pill grows but uses
fit-contentwidth. - Region badge text at
--type-caption(12px) grows to ~24px. Badge width isfit-content— grows with text. On the overview row, if both the region badge and giver text grow large, they stack vertically on separate lines (flex column at 200% fallback).
4.4 Haptic and sound cue mapping
| Event | Haptic | Sound | Notes |
|---|---|---|---|
| Faction tier gained | Heavy impact + success pattern (3-step) | Tier-up chime (distinct from quest completion) | Three-channel notification: tier name badge + screen flash (--color-faction-*) + heavy haptic. Mirrors combat crit indicator pattern from 11e-1 §8.3. |
| Faction rep delta (gain, minor) | Light impact | Soft tone | Fires on sync after a quest beat that grants rep |
| Faction rep adjusts downward | None | None | Rep losses are silent on-screen (bar updates without animation or haptic). Non-punitive per D-010 extension. Player sees the change on next Factions tab open. |
| Quest beat completed | Success pattern (medium) | Beat-complete chime | Already in design-system §5.6; referenced here for completeness |
| Quest completed (all beats) | Success pattern (3-step escalating) | Quest-complete fanfare (distinct from beat chime, 2-3s) | Inherits combat victory haptic pattern from 11e-1 §8.3 |
| Hidden quest revealed (keystone allocated) | Heavy impact | Discovery tone (distinct, single resonant note) | Pillar 3 moment — deserves a memorable signal |
| Quest log opened, active quests exist | None | None | No notification on navigation; state is visual only |
All haptic and sound events are opt-out per design-system §5.6.
4.5 Reduced-motion behavior
When the OS “Reduce Motion” accessibility setting is active:
- Faction tier-up overlay: no slide-up animation; the overlay appears immediately at full opacity. The screen flash (used for tier-up) is suppressed entirely — the tier name badge + haptic remain.
- Quest beat progress bar updates: no fill animation; bars snap to new value.
- Quest completion overlay: appears immediately without the slide-up transition used in the combat outcome card pattern.
- Drill-down navigation: no push/slide animation; screens cross-dissolve instead.
The content of all screens is identical with reduced motion — only transitions are affected.
4.6 Screen reader live regions and announcements
Faction screen:
- On faction rep delta (after sync): announced as a live region update: “Guild of Unfinished Expeditions: 247 reputation, Tier 3 Cartographer.” Uses
aria-live="polite"— rep updates are not urgent. - On tier gain: announced as assertive: “Guild of Unfinished Expeditions: tier up — Cartographer.” Uses
aria-live="assertive"— a tier gain is player-relevant and time-proximate to a quest outcome. - Faction cards: announced as groups with role “listitem”: “Guild of Unfinished Expeditions, Cartographer, Tier 3 of 5, 247 of 300 reputation.”
- Rival chips: announced as “Rival: The Free Mart of Targosie — oppose sealing, trade the leak.”
- Tier rows in drill-down: completed tiers announced with their state (“Tier 1 Apprentice, earned — Wooden ring…”), current tier announced as “current — Tier 3 Cartographer, 247 of 300 rep”, future tiers as “Tier 4 Chief Cartographer, locked — requires 600 rep.”
Quest log:
- Active quest row: announced as “Quest 002, The Seal-House Falls Silent, active, Frostlands region, Step 3 of 5, 60 percent complete.”
- Beat progress updates:
aria-live="polite"— announces on change: “Quest 002: Step 3 complete. Now at Step 4 of 5.” - Quest completion:
aria-live="assertive"— announces: “Quest 001 complete. Rewards: 4 points.” - Hidden quest slot: announced as “Hidden quest, Frostlands region. Allocate a keystone to reveal.”
- Hidden quest revealed:
aria-live="assertive"— announces: “New quest unlocked. Check your active quests.”
5. Style inheritance from combat-screen (11e-1)
5.1 Tokens reused directly
| Token | Combat-screen usage | Faction + Quest usage |
|---|---|---|
--color-success | Walker hp > 50%, “YOUR TURN” pill background, victory outcome | Active quest “ACTIVE BEAT” pill, quest completion pill, rep gain indicator |
--color-warning | Crit indicator, low hp warning, screen flash | Tier “almost there” indicator (last 10% of a tier’s rep range) — opt-in only |
--color-error | Enemy hp bar, “ENEMY TURN” pill | Rival faction chip border, “RIVAL” label |
--color-disabled | ”Use Item [Phase 12]” disabled button | Locked future tier rows, hidden quest ”???” |
--color-on-disabled | Disabled button text | Locked tier text |
--color-surface-variant | Hp/energy bar background | Rep bar background, step progress bar background |
--color-surface-elevated | Stats tooltip bottom sheet | Current tier highlight background in drill-down |
--color-region-frostlands | Walker energy bar (Pillar 1 anchor in Frostlands context) | Frostlands region badge background on quest rows |
--color-region-plenny | Focus ring (design-system) | Plenny region badge background on quest rows |
--type-h1 | Screen titles (outcome cards) | Drill-down screen titles |
--type-h2 | Section headings (Walker / enemy labels) | Section headings within drill-downs (“About”, “Reputation Tiers”, etc.) |
--type-body-lg | Quest description context block | Faction description, quest description, active quest name |
--type-caption | Hints, cost labels, turn number | Tier index “3/5”, rep value, step progress, region badge text |
5.2 Patterns reused directly
| Pattern | Combat-screen origin | Faction + Quest reuse |
|---|---|---|
| State pill (colored background + text) | “YOUR TURN / ENEMY TURN” pill (§2.5) | Tier name pill (faction accent bg), “ACTIVE BEAT” pill (success bg), “COMPLETED” pill (success bg) |
| Three-zone layout (status / content / actions) | Top status bar / context+log zone / action button zone | Faction drill-down: top tier zone / content zone (tiers, leaders, keystones) / reserved action zone. Quest drill-down: top progress zone / steps+rewards zone / reserved action zone. |
| Full-screen outcome card pattern | Victory / defeat outcome card (§5 states 4-5) | Quest completion overlay (inherits: title + headline + rewards + CTA). Faction tier-up overlay (smaller: tier name + reward prose + dismiss). |
| Current-item highlight (left border accent) | Not explicit in 11e-1, introduced here | Current tier row (gold / faction-accent left border), current quest step (same) — extends the highlighted-active-item pattern. |
| Opt-in chip | Hit/crit chance chip (§3.1, §3.2) | Not used in phase 11 faction/quest. Reserved for Phase 11c: “tap rep bar to see rep formula details” could use the same chip mechanism. |
5.3 New patterns introduced in this document
Faction accent tier pill. The state pill (previously used only with system state colors --color-success / --color-error) is extended to use faction accent colors as backgrounds. This is new. Rule: any faction-specific state pill uses the faction accent color as its background with --color-bg as text (reversed). Added to design-system §1.4 note.
Progress bar with numeric adjacent. Rep bar always shows a numeric value (“247 / 300 rep”) adjacent to the bar. This is the same mitigation as the hp/energy bar in combat-screen (color-blind safe), but applied to reputation. Rule established: progress bars showing a continuous value must include a numeric pair adjacent when the value is player-relevant state.
Disclosed-by-default / hidden-slot pattern. Hidden quests are always visible as locked placeholders — not hidden or collapsible. This is a new UX pattern introduced here for Pillar 3. The principle: the game communicates “there is something here you haven’t unlocked” explicitly, rather than keeping the slot entirely invisible. This serves glance legibility and reduces cognitive load (the player does not need to wonder why the quest log feels thin).
Collapsed-by-default secondary section. The Completed quests section is collapsed by default and expands on tap. This pattern (a disclosure control on a section header) does not appear in combat-screen but is consistent with design-system spacing and the overall information architecture. The rule: sections whose content grows unboundedly over time (completed quests will accumulate) are collapsed by default; sections whose content is always bounded (active quests) are always expanded.
6. What Phase 12d (crafting UI) inherits
Crafting UI is the next wireframe after this document. The following patterns are ready to reuse:
Three-zone layout: Crafting screens (recipe selection, material inventory, forge confirmation) should use the same status / content / action three-zone structure. The “action zone at bottom” pattern keeps primary CTAs in thumb reach.
Progress bar + numeric pair: Crafting material quantities (“7 / 10 leak shards”) should follow the rep bar pattern: bar fill + numeric pair, never bar alone.
Collapsed-by-default secondary sections: Crafting history (past recipes) should follow the Completed Quests pattern — collapsed by default, expandable.
Faction-accent chip for faction-gated recipes: If a recipe requires a faction standing, its row should display a faction-accent chip (name + tier requirement) analogous to the rival chip and the tier pill. Same visual language, different semantic.
Full-screen outcome card for forge completion: When a recipe is successfully crafted, the outcome card pattern (from combat-screen, reused in quest completion) is the right affordance: item name + “Crafted.” headline + item stats + “Continue” CTA.
Opt-in chip for ingredient formula details: The combat-screen opt-in chip (tap to reveal hit chance) maps cleanly onto crafting: tap a recipe to reveal the material formula and any stat modifiers before confirming the forge. The chip mechanism is already in the design vocabulary.
Hidden-slot pattern for locked recipes: Recipes locked behind faction standing or keystone allocation should show ”???” locked slots in the recipe list, parallel to hidden quests. Region badge (or faction badge) reveals the source without revealing the recipe itself.
Audio/haptic for forge completion: Forge completion should fire: heavy impact haptic + a distinct “forge-complete” sound, analogous to the quest-completion haptic pattern. This should be coordinated with the sound designer (or the sound token list in design-system §5.6) before 12d ships.
7. Open questions for CEO
A. Quest name language on game-system surfaces (W-level as specified, raising for awareness)
The decision to display quest names in English on all system surfaces (quest log title, notification copy, screen reader announcements) was made W-level in this document. Rationale: EN names are shorter, avoid TTS diacritic issues, and are system identifiers in the data layer. Polish names appear inside the quest prose. If the CEO’s intent is that the player always experiences Polish quest names even at the system level (e.g. “Quest 001 — Pierwszy Trakt” in the quest log header), this should be ratified as a D-level decision — it affects notification copy, screen reader behavior, and character budgets. Recommendation: keep W-level English names on system surfaces, Polish names inside prose. The character budget difference (PL names are 20-40% longer) would require re-auditing every quest row at 200% font scale.
B. Faction rep loss notification behavior
This document specifies that rep losses are silent (no haptic, no overlay, bar updates on next tab open). This extends the non-punitive design philosophy from D-010 combat defeat to faction standing. The risk: a player who loses standing with a faction (e.g. by completing a rival’s quest) may not notice for a long time. The alternative — a subtle “standing adjusted” notification on sync — would be more transparent but adds friction. Recommendation: silent for now. If playtesting (Phase 13+) shows players are confused by unexplained rep changes, add a low-priority notification tray entry (“Your standing with X has changed”) that is dismissible and does not interrupt play.
C. Hidden quest region visibility before unlock
This document shows the region badge on hidden quest slots (e.g. ”??? [FROSTLANDS]”). This reveals that the hidden quest is in the Frostlands before the player allocates the relevant keystone. An alternative is to hide even the region (”??? [???]”), making the hidden slot a pure mystery until the keystone is allocated. Recommendation: show the region. The Pillar 3 mechanic is richer if the player can reason “I should allocate a Frostlands keystone to unlock this.” Pure mystery (”??? [???]”) gives no actionable signal and may read as a bug. The region badge is the minimal hint needed to make Pillar 3 feel like a satisfying puzzle rather than random discovery.
This wireframe is W-level autonomous. Layout zones, faction accent colors for tier pills, quest name language policy (EN on system surfaces), silent rep loss behavior, collapsed-by-default completed quests section, and the hidden-slot pattern are all within ui-designer authority. Logged to ops/decisions/2026-05-19-faction-and-quest-log-wireframe.md.