# Spoken Language V2 — Prototype Build Brief ## Context files to read first - work/active-projects/spoken/SPOKEN-V2-CARD-NAV-SPEC.md — card structure + nav spec extracted from Figma - work/active-projects/spoken/SPOKEN-LANGUAGE-V2-PRD.md — full product definition - public/spoken-language-v2/index.html — V1 prototype for reference (DO NOT modify this) ## Output Single file: public/spoken-v2/index.html ## What to build A clickable HTML/CSS/JS prototype of the Spoken Language V2 app. Three zoom levels, all in one file, no server needed. --- ## VISUAL LANGUAGE (new — do not copy V1 colors) Palette: - Background: warm off-white #F8F4EF - Card surface: white #FFFFFF with subtle shadow - Border: #E8E2DA (warm light gray) - Primary text: #1A1614 (warm near-black) - Secondary text: #8A7F78 (warm medium gray) - Language A / target language (Portuguese): #C0392B (deep red) — the braiding color - Language B / native (English): #1A1614 (near-black) - Accent / CTA buttons: #1A1614 dark pill buttons - Special card A (Hear yourself back): #E8F4E8 (pale green tint) - Special card B (Speech Work): #F4EDE8 (pale terracotta tint) - Dial track: #E8E2DA, Dial fill: #C0392B Typography: - Headings + braided text: Georgia, serif - Body + UI: system-ui, -apple-system, sans-serif - Braided text: BOTH languages in Georgia serif — Portuguese in #C0392B, English in #1A1614 - Font sizes: heading 22px, body 14px, label 11px uppercase tracking Card aesthetic: Clean white cards, 16px border-radius, 1px border #E8E2DA, box-shadow: 0 2px 12px rgba(0,0,0,0.06). No glassmorphism. --- ## NAVIGATION BAR Fixed top bar, full width, 64px tall, white, 1px bottom border #E8E2DA. Left: 3-dot icon (three 6px dots horizontal, gray) + 1px vertical divider (20px tall) + SPOKEN logo Logo: "S p o" top row / "K e n" bottom row, Georgia serif, mixed case and size (uppercase S,K,P larger ~16px; lowercase p,o,e,n smaller ~11px) Center: Breadcrumb pills - Each pill: border 1px solid #E8E2DA, border-radius 20px, padding 6px 14px, font-size 13px - Contains "x" close button + label - Current level: plain text no pill Right: The Dial + avatar - The Dial: horizontal track 120px wide 6px tall, fill moves left to right (EN to PT ratio), red fill #C0392B - Label above: "EN — PT" in 10px uppercase gray - Currently 30% filled - Avatar: 32px circle, initials "AD", bg #E8E2DA --- ## SCREEN 1 — Z1: TOPICS VIEW (default state) Below nav. Grid layout: 3 columns, gap 24px, padding 40px. Screen header (above grid): - Small uppercase label: "SPOKEN — LANGUAGE / ENGLISH → PORTUGUESE" - Large heading (28px Georgia): "What do you want to talk about?" - Subtitle (16px gray): "Choose by excitement, not need." Topic card anatomy (card width ~380px): ``` [CARD] IMAGE AREA (200px tall, padding 24px) - Background: #F0EBE4 (warm light) - Two lines of text centered: Line 1: English argument title — Georgia 20px #1A1614 Line 2: Portuguese argument title — Georgia 18px italic #C0392B CONTENT AREA (padding 20px) - Topic label: 11px uppercase gray tracking-wide - Progress: "5 arguments · 0 sessions" 12px gray FOOTER - Full-width nav pill button: "→ Enter topic" dark bg white text 48px tall fully rounded ``` 6 topic cards: Card 1 — "Brazilian Street Food" EN: "Why street food resists gentrification" PT: "Por que a comida de rua resiste à gentrificação" Card 2 — "Politics & Persuasion" EN: "What makes a political argument convincing" PT: "O que torna um argumento político convincente" Card 3 — "Relationships" EN: "The problem with how we talk about love" PT: "O problema de como falamos sobre o amor" Card 4 — "Work & Identity" EN: "Why your job title doesn't describe what you do" PT: "Por que seu cargo não descreve o que você faz" Card 5 — "Digital Life" EN: "What we lose when we stop arguing face to face" PT: "O que perdemos quando paramos de discutir pessoalmente" Card 6 — Special "Speech Work" card (terracotta tint #F4EDE8): Text: "Build something you want to say. In Portuguese." Button: "→ Start your speech" Below grid: outlined button "+ Enter your own topic" Clicking any topic card: transition to Z2 (argument map). Add breadcrumb pill. --- ## SCREEN 2 — Z2: ARGUMENT MAP (spatial canvas) Full viewport canvas (minus nav). position:relative, overflow:hidden, bg #F8F4EF. Cards positioned absolutely. SVG connector lines. Breadcrumb: adds [x Brazilian Street Food] pill. 5 argument cards (~340px wide × ~280px tall) positioned: - Card 1: left:5%, top:15% - Card 2: left:35%, top:8% - Card 3: left:30%, top:42% - Card 4: left:8%, top:62% - Card 5: left:58%, top:55% Argument card anatomy: ``` [CARD] IMAGE AREA (140px tall, padding 20px, bg #F0EBE4) EN title: Georgia 18px #1A1614 PT title: Georgia 16px italic #C0392B CONTENT AREA (padding 16px) Argument type tag: small pill, border, 12px text FOOTER Nav pill: "→ Start this argument" 44px dark pill ``` 5 arguments for "Brazilian Street Food": 1. EN: "Street food as cultural memory" / PT: "A comida de rua como memória cultural" / tag: "Cultural history" 2. EN: "Why tourists accelerate the problem" / PT: "Por que os turistas aceleram o problema" / tag: "Economic pressure" 3. EN: "The rent paradox in food culture" / PT: "O paradoxo do aluguel na cultura alimentar" / tag: "Urban economics" 4. EN: "What regulation can and cannot do" / PT: "O que a regulação pode e não pode fazer" / tag: "Policy debate" 5. EN: "Is preservation even the right goal?" / PT: "A preservação é mesmo o objetivo certo?" / tag: "Philosophical" SVG connector lines (absolute positioned SVG, pointer-events:none): - Card 1 → Card 2: quadratic bezier - Card 2 → Card 3: quadratic bezier - Card 3 → Card 4: quadratic bezier - Card 3 → Card 5: quadratic bezier Line style: stroke #E8E2DA, stroke-width 1.5, fill none. Small circle (r=4, fill #E8E2DA) at each endpoint. Two special cards (bottom right area, ~280px wide): - Hear yourself back card: bg #E8F4E8, text "Compare your first recording to now", button "→ Listen back" - Speech Work card: bg #F4EDE8, text "Build something you want to say", button "→ Your speech" Position special cards: right:3%, bottom:8% stacked vertically with 16px gap. Clicking "Start this argument": transition to Z3. Add breadcrumb. Canvas dims (rgba overlay 0.6 over canvas). Session card slides up. --- ## SCREEN 3 — Z3: FLOW SESSION (glass card overlay) Canvas dims. Centered session card slides up from bottom. Session card: max-width 560px, centered horizontally, positioned at 50% left, transform translateX(-50%). White bg, border-radius 20px, box-shadow 0 20px 60px rgba(0,0,0,0.12), padding 40px. Bottom of card ~80px from viewport bottom. Also slides in: vocabulary panel from right (200px wide, full height minus nav, white bg, border-left 1px #E8E2DA, padding 20px). Stage dots (top of card): 5 dots × 8px, gap 8px, centered. Current: filled #1A1614. Others: border 1px #E8E2DA, bg white. --- STAGE 1: HEAR --- Label: "HEAR IT FIRST" (11px uppercase red) Decorative waveform: SVG wavy lines in #C0392B (3 sine-wave lines, varying heights) Play button: 56px circle, #1A1614 bg, white triangle Text below: "Listen. Don't translate. Just feel the shape of it." (14px gray italic) Text content (shown below in gray box, 14px Georgia): "A comida de rua brasileira não é apenas comida — é resistência. É história viva." Continue button: full-width dark pill "→ I listened. Continue" --- STAGE 2: READ --- Label: "READ — BRAIDED" (11px uppercase red) Instruction: "The red words are Portuguese. Read through without stopping." (13px gray) Braided paragraph (Georgia 17px, line-height 1.9): "Street food / [a comida de rua] / in Brazil is not just food. It carries / [ela carrega] / stories, resistance / [resistência], memory / [memória]. Every stall / [cada barraca] / is a decision: to stay / [ficar], to remain / [permanecer]." EN words: color #1A1614 PT words (in brackets in the text): color #C0392B, font-style italic Actually render this as inline spans — no brackets visible — EN and PT alternate naturally: "Street food " a comida de rua " in Brazil is not just food. It carries " ela carrega " stories, resistance " resistência "..." Continue button: "→ Continue" --- STAGE 3: SPEAK --- Label: "YOUR TURN" (11px uppercase red) Subtext: "Say the argument how you can. Wrong is completely fine." (14px gray) Reference text (smaller, 14px, muted): "Street food " a comida de rua " is resistance " é resistência "..." Mic button: 80px circle, #C0392B bg, white mic icon SVG, centered, cursor pointer Below mic: "Tap to start recording" On click: add class "recording" - Pulse animation on mic button (scale 1.0→1.05→1.0, loop) - Text changes to "Recording... tap to stop" - After 2.5 seconds of simulated recording: auto-stop, show waveform graphic Waveform: simple SVG bars of varying heights, #C0392B color, 200px wide Text: "Good. That's your first POR." (14px, warm black) Continue button: "→ Continue" --- STAGE 4: REFINE --- Label: "ONE MORE TIME" (11px uppercase red) Waveform playback (your first recording): SVG waveform + small play button (32px) Below: reference braided text (same as Stage 2 but smaller, 14px) Subtext: "Again. A little more. You don't have to be right." (14px gray italic) Mic button: 56px circle, outlined (border 2px #1A1614), mic icon, not filled Continue button: "→ That's enough. Continue" --- STAGE 5: END --- Label: "ONE POR — COMPLETE" (11px uppercase red) Two waveforms side by side with labels: Left: "First attempt" label, small waveform SVG Right: "This attempt" label, slightly taller waveform SVG (implying improvement) Divider line Self-rating: "How did that feel?" (16px Georgia) Three pill buttons side by side: [Better] [Same] [Worse] Pill style: border 1px #E8E2DA, border-radius 20px, padding 8px 20px, font-size 14px On click: fills the selected pill (#1A1614 bg, white text) Divider line "Words you encountered today:" (12px uppercase gray) Three word pills: [resistência] [memória] [barraca] Word pills: red text #C0392B, border 1px #C0392B, border-radius 20px, padding 4px 12px, 13px font Two bottom actions: - Primary pill: "→ Next argument" (dark, full width) - Text link below: "Done for today" (gray, centered) Clicking "Next argument": resets to Z2 (canvas), session card slides down Clicking "Done for today": resets to Z1 (topic grid), all breadcrumbs clear --- ## VOCABULARY PANEL (appears in Z3) Right side panel, 200px wide, full height minus nav (64px from top). Position: fixed, right 0, top 64px, bottom 0. Bg: rgba(255,255,255,0.95), border-left 1px #E8E2DA, padding 16px. Slides in from right when Z3 activates (transform: translateX(100%) → translateX(0)). Header: "YOUR WORDS" (10px uppercase, #8A7F78, tracking 0.1em) 8 vocabulary words, each as a row: ``` resistência EN: resistance [opacity varies] memória EN: memory barraca EN: stall/stand comida EN: food história EN: history permanecer EN: to remain ficar EN: to stay cultura EN: culture ``` Word row (16px tall, margin-bottom 12px): - PT word: 14px Georgia, #C0392B - EN word: 12px sans-serif, #8A7F78 - Opacity: first 3 words at 1.0, next 3 at 0.6, last 2 at 0.3 (simulating fade from disuse) On hover: show tooltip with example sentence On click: word briefly pulses (scale 1.1→1.0) --- ## TRANSITIONS Z1 → Z2: - Topic cards scale down and fade (transform: scale(0.95), opacity: 0) over 300ms - Canvas view fades in - Breadcrumb pill animates in from right Z2 → Z3: - Canvas stays visible but dims (::before overlay, rgba(248,244,239,0.75), opacity 0→1) - Session card: transform translateY(100%) → translateY(0), opacity 0→1, 400ms ease-out - Vocab panel: transform translateX(100%) → translateX(0), 300ms 100ms delay Stage progression (within Z3): - Content area: opacity 0→1, transform translateY(8px)→translateY(0), 250ms Back navigation: - "x" on breadcrumb pill: reverse the transition for that level - Clicking x on session breadcrumb: card slides down, canvas un-dims - Clicking x on topic breadcrumb: canvas fades out, Z1 grid fades in --- ## TECHNICAL - Single HTML file, all CSS in style tag, all JS in script tag - No external dependencies (Georgia is a system font) - Smooth transitions: transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) as default - Mobile: below 768px, Z1 cards stack 1 column; Z2 canvas scrollable with cards sized down to 280px - SVG connector lines: calculate card center positions after render, draw bezier curves - State management: simple JS object { screen: "z1"|"z2"|"z3", topic: null, argument: null, stage: 1 } - Polished and production-ready — this is going to a real client (Daniel Kremer / Spoken) When completely done, run: openclaw system event --text "Spoken V2 prototype complete at public/spoken-v2/index.html" --mode now