21 — Codex UI

Purpose

This document specifies the Codex screen UI — the discovery flow, entry reading experience, navigation, and visual design. For the full content catalog and unlock trigger system, see 18_codex_system.md.

Design Intent

The Codex must feel like a personal archive, not a database. The player has collected these entries through play. The UI should reinforce that — worn, accumulated, alive with things the player earned. Not a clean wiki. A field record.

Screen Layout

Header Bar

[← Back]   CODEX   [Search 🔍]   [18 / 182 discovered]

• Search icon visible at Pilot Rank 20+; greyed and non-functional before
• Discovery count top-right in DM Mono muted text
• At 100% completion: count text changes to lime #c8f542

Category Tab Row

Horizontally scrollable tab row below header:

ALL  |  TELOS  |  VEILED  |  COALITION  |  FIGURES  |  PHYSICS  |  WAR  |  SHIPS  |  BESTIARY  |  FRAGMENTS

Each tab: category name + (12/25) count in muted 10px. Active tab has lime underline. Undiscovered categories show greyed tab.

Entry List

Discovered entry card:

• Left accent strip (4px, category color)
• Entry title in 14px DM Sans medium
• Trigger description in 11px muted: "Discovered after Stage 14"
• Unread pip (small lime dot, top-right) — disappears when entry is opened
• Category badge (small pill) if in ALL tab

Undiscovered entry (silhouette):

• Entire card dimmed to 30% opacity
• Title: ???
• Trigger hint in muted text: "Found in Sector 3" or "Found in endless mode"
• No tap interaction

Sort order within category: Unlock date, most recent first. In ALL tab: chronological by unlock date.

Entry Reading Screen

Tapping a discovered entry opens a full-screen reading view.

Layout

[← Codex]                     [Category badge]

[Entry Title — 18px DM Sans medium]
[Discovered after: Stage 14 — 11px muted]

─────────────────────────────────────────

[Body text — 14px DM Sans regular, 1.7 line-height, max 300 words]

─────────────────────────────────────────

[Flavor text or attributed quote — italic, 13px, slightly muted]

Codex chain indicator: If this entry unlocks another via codex_chain trigger, a line at the bottom: "Reading this entry unlocked: [linked entry title]" with a lime arrow. Tap to jump to the linked entry.

Navigation: Swipe left/right to move to next/previous discovered entry within the current category. No swipe in the ALL tab.

Discovery Notification Flow

During gameplay: slim toast "Codex updated — [Entry name]" (11px, 3s, non-intrusive).

Multiple simultaneous unlocks: toast shows "Codex updated — 3 new entries."

On return to hub: Codex tab notification pip shows count of unread entries.

Completion State

At 100% discovery (182/182):

• Header count turns lime #c8f542
• Brief flourish animation on count (scale 1.0 → 1.15 → 1.0, once)
• Bonus "The Record Is Complete" entry appears at the top of the ALL tab
• All category tabs show a small lime checkmark next to their name

Summary — Locked Decisions

1. Header: back, title, search (Rank 20+), discovery counter
2. 10 category tabs including ALL, each showing discovered/total count
3. Discovered cards: accent strip + unread pip; undiscovered silhouettes with category hint
4. Entry reading view: title, trigger attribution, body, flavor text, codex chain indicator
5. Swipe navigation within category; no swipe in ALL tab
6. Discovery toast 3s non-intrusive during gameplay; hub pip on return
7. 100% completion: lime counter + bonus entry + tab checkmarks

Document version: 1.0 (locked) Part of: Tao Baryon GDD — Tier 4 UX & Meta