# Spoken V2 — Card Structure & Navigation Spec ## Extracted from Figma: Orchestra — production (node 949-41880) ## Date: 2026-04-03 | Colors stripped — structure only --- ## 1. THE CANVAS SYSTEM The entire app lives on a **full-viewport spatial canvas** (1512×982px base). Not pages. Not tabs. One infinite plane that you navigate by zooming in and out. ### Three zoom levels | Level | What you see | Behaviour | |---|---|---| | **Z1 — Overview** | All course/topic cards in a loose grid | Pan + zoom in to enter | | **Z2 — Map** | Cards for one course, connected by lines | Cards shrink from ~455px → ~320px as you zoom out | | **Z3 — Lesson** | Single card expanded, content fills view | Zoomed into one card | ### Card sizing by zoom level - **Z1/Z2 full size:** ~455px wide × 385–499px tall (variable by content) - **Z2 zoomed out / background context:** ~316–325px wide × 330–342px tall - The same card component scales — no different component, just transform ### Connection lines - Thin **Bézier CONNECTOR** lines between cards - ~1–2px stroke, semi-transparent - Small circular endpoints (~6–8px) where lines meet card edges - One card → many children (fan out) - Line type: straight-curve hybrid, not orthogonal --- ## 2. THE CARD COMPONENT ### Anatomy (top → bottom) ``` ┌─────────────────────────────────────┐ │ [Details chip] [Progress] │ ← overlaid on image │ │ │ IMAGE AREA │ problem_images: ~415×294px │ (single hero OR 2×2 grid) │ multiple images: 415×230px │ │ ├─────────────────────────────────────┤ │ Title (serif, ~22px) │ Frame 935 (text block) │ Description (sans, ~14px, 2 lines) │ Height: 100–155px depending on content │ │ │ [Navigation pill ——————————→] │ 428×52px — action CTA └─────────────────────────────────────┘ ``` ### Exact component layers ``` problem card (455×385–499px) ├── problem_images (415×294px) │ ├── [variant A] single hero image — full bleed │ └── [variant B] multiple images (415×230px) — 2×2 grid of 4 thumbnails ├── Frame 935 — text content block (415px wide, 100–155px tall) │ ├── Title text — serif, ~22px │ └── Description text — sans, ~14px, 2 lines ├── Summary small (25×25px) — circular progress indicator, top-right ├── Navigation pill (428×52px) — bottom CTA button └── expanded card chip (83×35px) — "Details" pill, top-left corner ``` ### Image variants - **Single hero** — full-width image, ~294px tall. Used for topic-level cards. - **2×2 grid (multiple images)** — 4 thumbnails arranged in a 2×2. Used for review/summary cards and cards showing sub-items. Each thumbnail ~207×115px. ### Special card variants | Variant | Visual treatment | Purpose | |---|---|---| | **Standard** | Default treatment | Topic / lesson card | | **Review the map** | Tinted background + 2×2 thumbnail grid | Summary of all items in set | | **Create your own** | Different tint + dashed illustration | Capstone / creative output | ### Card interaction states 1. **Resting** — card at full opacity, shadow subtle 2. **Hover** — slight lift (inferred) 3. **Selected / zoomed into** — card stays visible at edge of canvas as you zoom, acting as breadcrumb context 4. **Background context** — when you've drilled in, surrounding cards scale down to ~70% size and remain visible on canvas --- ## 3. THE NAVIGATION BAR ### Structure (full width × 69px height) ``` [Browse icon · SPOKEN logo] ←——————→ [Breadcrumbs] ←——————→ [Icons · Avatar] 151×43px 200–133×35px ``` ### Left — Logo + Browse - **Browse icon:** 3 dots arranged horizontally, each 15×15px — a "menu" or "grid" toggle - **Thin vertical divider:** 1×40px line separating icon from logo - **Logo:** 81×40px - Letters `S p o` / `K e n` in a 2-row grid - Mixed case: uppercase S, K = large (~16px), lowercase p, o, e, n = small (~11px) - This is NOT just "SPOKEN" — it's a 2×3 grid wordmark with size contrast between letters ### Center — Breadcrumbs Breadcrumbs are **pill-shaped chips** that accumulate as you drill in: ``` [⊗ All courses] [⊗ Mechanics] [⊗ Get to work] Current page ``` - Each pill: ~35px height, variable width, rounded fully (border-radius: 50px) - The `⊗` icon (14×14px) is a close/back action — clicking it pops you back to that level - **Active/current level:** plain text, no pill - **Parent levels:** same pill style, differentiated by color or opacity ### Right — Utility icons + Avatar From left to right: 1. **Community** — icon with notification badge (14×14px icon, 5×5px ellipse badge) 2. **Bookmark** — save/bookmark icon (14×14px) 3. **Info** — info icon (24×24px) 4. **navigation_guru** — 42×23px custom icon (overlapping circles — possibly AI/tutor mode toggle) 5. **navigation_map** — 42×23px custom icon (grid/map view toggle, with small dots and arrows) 6. **User avatar** — circular, 35×35px --- ## 4. NAVIGATION FLOW ``` Z1 — All Courses (grid) └── click card → breadcrumb adds [⊗ Course name] Z2 — Course Map (spatial canvas) └── click card → breadcrumb adds [⊗ Topic name] Z3 — Topic / Lesson view └── "Get to work" → enters learning flow ``` ### Key behaviour - **Zooming in = drilling down.** Cards don't disappear — they become background context, scaled down, still visible at canvas edges. - **Breadcrumb = zoom history.** Each pill represents a zoom level. Clicking `⊗` on a pill zooms back out to that level. - **The canvas never resets.** You always know where you are spatially. --- ## 5. THE NAVIGATION PILL (CTA button on cards) The action button at the bottom of each card: ``` [ → Label text ] 428×52px, fully rounded ends ``` - Full width of card (428px), 52px tall - Heavy border-radius (fully rounded, pill shape) - Contains a right arrow icon + label text - On smaller zoom: 302×36px (scales proportionally) --- ## 6. GLASS CARD (Login / Overlay modal) Used for auth screens and likely for modal overlays in the learning flow: ``` Glass frame: 486×587px └── Content area: 406px wide (40px padding each side) ├── Heading: serif, 30px — e.g. "Welcome to Spoken." ├── Text field: 406×72px │ ├── Label: sans, 18px (above the input) │ └── Input: 406×52px, rounded corners ~8px ├── Text field: 406×78px (same pattern) ├── Checkbox + Forgot password row: 406×25px └── Button stack: 406×250px ├── Primary button: 406×63px — full width, pill-style ├── Register link row: 231×25px ├── Divider: "Continue with" with lines └── Social button row: two × 198×50px buttons ``` - **Glass treatment:** semi-transparent background, heavy backdrop blur - **Card border:** 1px, semi-transparent, rounded corners ~12–16px --- ## 7. V2 ADAPTATION NOTES ### What maps directly to V2 | V1 element | V2 equivalent | |---|---| | Course card (image + title + description) | Topic card (topic image + argument title + angle description) | | 2×2 image grid (multiple images variant) | Vocabulary scroll preview (4 words shown as tiles) | | "Review the map" card | "Hear yourself back" session — tinted differently | | "Create your own" card | "Speech Work" capstone card | | Navigation pill CTA | "Start this argument" CTA | | Summary small (progress dot) | Session completion indicator | | Z1 → Z2 → Z3 zoom drill | Topic → Argument → Flow session drill | | Breadcrumb pills | Same — tracks depth: [⊗ Topics] [⊗ Argument title] Session | | Connector lines | Same — shows relationships between argument angles | ### What V2 changes - **Image area content:** Not space photography / physics renders — instead: abstract or typographic treatment for each topic (could be a color field + large type treatment showing the argument in the language being learned, braided) - **Colors:** New palette — not locked to dark purple. TBD. - **The dial:** A new persistent UI element (not in V1) — shows native ↔ target language ratio, lives in the nav bar or on each card - **Vocabulary scroll panel:** New — right-side floating panel, not present in V1 --- *Source: Figma file TAkUfzjJFo5sAEfzcEnb0H, node 949-41880* *Extracted: 2026-04-03*