# Kalei — Claude Code Implementation Instructions > **Purpose:** This document tells Claude Code everything it needs to know to build pixel-perfect, interactive HTML mockups for every screen in the Kalei app. > > **Read this file first, then follow the build order at the bottom.** --- ## 1. What You're Building You are building **64 interactive HTML mockup screens** for Kalei, a mobile mental wellness app. Each screen is a standalone `.html` file that: - Renders at **390 × 844px** (iPhone 14 viewport) inside a rounded device frame - Uses the shared `design-system.css` for all tokens, typography, components, and layout - References SVG assets from the `assets/` folder for icons, patterns, decorations, and visualizations - Includes micro-interactions and state transitions using CSS animations + minimal vanilla JS - Can be viewed in any browser by opening the file directly (no build step, no server) **Output format:** Single-file HTML per screen. All CSS beyond `design-system.css` goes in a `
9:41
[Title]
Turn Mirror Lens Gallery You
``` ### Template Rules 1. **Tab bar** is only present on the 5 root tab screens and their immediate children (Turn Home, Mirror Home, Lens Dashboard, Gallery All Patterns, You Profile). Sub-screens (detail views, creation flows) use nav-header + back button instead, no tab bar. 2. **Nav header** is hidden on root tab screens (tab bar acts as navigation). Show it on all sub-screens with a back chevron and centered title. 3. **Status bar** is always present except on the Splash screen (Screen 1). 4. **Active tab** changes color per feature — set the correct `data-tab` attribute and `active` class. 5. **Screen content** has `flex: 1` and scrolls vertically. Use `screen-content centered` for splash/onboarding screens. --- ## 5. SVG Asset Usage Guide ### 5.1 How to Use SVGs in Mockups The SVG files are **reference sheets** — each contains multiple elements arranged on a canvas for visual cataloging. You should **not embed the entire SVG file**. Instead: **Option A: Inline the specific SVG element** (preferred for icons and small elements) ```html ``` **Option B: CSS recreation** (preferred for backgrounds, auras, decorations) ```css .breathing-aura { position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(139,92,246,0.2), transparent 70%); filter: blur(40px); animation: breathing 6s ease-in-out infinite; } ``` **Option C: Use `` or `` for complex patterns** (kaleidoscope hero, evidence wall mosaic) ```html ``` ### 5.2 Asset → Screen Mapping | SVG File | Used In Screens | |----------|----------------| | `icons-tab-bar.svg` | All tab bar screens (reference for inline SVGs) | | `icons-distortions.svg` | Mirror Fragment Detail (#18), Mirror Reflection (#19), Spectrum (#50–57) | | `icons-actions.svg` | Every screen — navigation, actions, status indicators | | `fragment-icons.svg` | Turn Results (#13), Mirror Highlight (#17), Evidence Wall (#39–43) | | `decorative-shards.svg` | Onboarding (#2–9), Turn Home (#10), splash backgrounds | | `patterns-kaleidoscope.svg` | Splash (#1), Welcome (#2), Turn Animation (#12), Gallery Detail (#33), Pattern Share (#61) | | `progress-indicators.svg` | Lens Dashboard (#20), Ritual Streak (#49), You Stats (#36) | | `evidence-wall.svg` | Evidence Wall screens (#39–43) | | `loading-animations.svg` | System states, Turn Animation (#12), AI Thinking states | | `device-chrome.svg` | Reference for status bar, tab bar, nav header (already in template) | | `spectrum-visualizations.svg` | Spectrum screens (#50–57) | ### 5.3 The Fragment ◇ — Universal Element The diamond fragment `◇` appears everywhere. Build it as a reusable inline SVG: ```html ``` Color variants — swap the gradient stops: - **Amethyst:** `#C4B5FD` → `#7C3AED` (Turn, primary) - **Amber:** `#FDE68A` → `#D97706` (Mirror, detected fragments) - **Emerald:** `#6EE7B7` → `#059669` (Lens, success) - **Sapphire:** `#93C5FD` → `#2563EB` (Gallery, info) - **Rose:** `#F9A8D4` → `#DB2777` (social) - **Ruby:** `#FCA5A5` → `#DC2626` (error) --- ## 6. Component Patterns ### 6.1 Fragment Highlight (Mirror Feature) When AI detects a cognitive distortion in journal text, that text gets an amber underline highlight with a pulsing fragment icon: ```html I always mess everything up ``` ### 6.2 Reframe Block (Turn Results) Three perspectives shown after a Turn: ```html
Perspective Shift
What if "messing up" is actually how you learn what works?
Evidence Check
Think of three recent things you handled well.
Action Step
Pick one small win from today and write it down tonight.
``` ### 6.3 Chat Bubbles (Mirror Session) ```html
I've been feeling really overwhelmed at work lately. Everything feels like it's piling up.
It sounds like you're carrying a lot right now. Can you tell me more about what feels most overwhelming?
``` ### 6.4 Card with Kaleidoscope Pattern ```html
My first reframe
Feb 21, 2026 • 3 perspectives
``` ### 6.5 Progress Ring ```html
72% Complete
``` ### 6.6 Evidence Wall Tile ```html
Goal Met
``` ### 6.7 Toast Notifications ```html
Turn saved
``` --- ## 7. Interaction Patterns ### 7.1 The Turn Animation Sequence The signature moment. When a user submits a thought for reframing: 1. **Collapse** (0.3s): Input text compresses into a single diamond fragment at center 2. **Multiply** (0.4s): One fragment splits into 3, each drifting to a position 3. **Crystallize** (0.5s): Each fragment rotates 60° and settles into its reframe block position 4. **Settle** (0.3s): Reframe text fades in below each fragment Implement with CSS `@keyframes` and `animation-delay` staggering: ```css @keyframes turnCollapse { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.3) translateY(-50px); } } @keyframes turnMultiply { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1) translateX(var(--offset-x)) translateY(var(--offset-y)); } } @keyframes turnSettle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } ``` ### 7.2 Fragment Detection Animation (Mirror) When AI detects a cognitive distortion mid-session: 1. Text gets amber underline (grows from left to right, 0.4s) 2. Tiny fragment ◇ pulses into existence beside the text 3. A subtle amber glow radiates from the highlighted text 4. Fragment detail card slides up as a half-sheet ### 7.3 Kaleidoscope Pattern Generation For Turn results and Gallery cards, generate unique-looking patterns: ```html ``` Vary patterns per screen by changing: blade count (3 or 6), blade length, gradient colors, rotation offset, core glow size. ### 7.4 Breathing Aura (Background Decoration) Place behind hero content on onboarding and Turn screens: ```css .screen-aura { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%); filter: blur(60px); animation: breathing 6s ease-in-out infinite; pointer-events: none; z-index: 0; } ``` --- ## 8. The 10 Cognitive Distortions These appear in Mirror as detected "fragments." Each has an icon, color tint, and label: | # | Distortion | Icon Concept | Detection Example | |---|-----------|--------------|-------------------| | 1 | Catastrophizing | Shattered diamond with explosion lines | "Everything is going to fall apart" | | 2 | Black-and-White | Half-filled diamond (split) | "I always fail" / "It's never good enough" | | 3 | Mind Reading | Diamond with eye inside | "They probably think I'm stupid" | | 4 | Fortune Telling | Diamond with spiral/clock | "This will definitely go wrong" | | 5 | Personalization | Diamond with arrow pointing inward | "It's all my fault" | | 6 | Discounting Positives | Diamond with minus/strikethrough | "That doesn't count" | | 7 | Emotional Reasoning | Diamond with wave/heart | "I feel it, so it must be true" | | 8 | Should Statements | Diamond with gavel/ruler | "I should be better by now" | | 9 | Labeling | Diamond with tag | "I'm such a failure" | | 10 | Overgeneralization | Diamond with infinite loop | "This always happens to me" | All distortion icons use **Amber** as their base color since they're detected in Mirror. --- ## 9. Screen-by-Screen Build Specifications ### Onboarding (Screens 1–9) → `screens/onboarding/` **Screen 1: `01-splash.html`** - No status bar, no nav, no tab bar - Full device-frame is #050508 void - Centered: breathing kaleidoscope logo (from `soft-elegance-final.svg` simplified — 6 blades, core glow, slow rotation) - Below logo: "Kalei" in Space Grotesk 32px, #E2E8F0 - Animation: logo fades in (0.5s), breathes for 1.5s, auto-transitions (add "tap to continue" fallback) **Screen 2: `02-welcome.html`** - Status bar visible - Centered layout (`.screen-content.centered`) - Hero: 6-blade prismatic kaleidoscope pattern (large, ~200px), breathing animation - Below: "Same pieces." line 1, "New angle." line 2 — Space Grotesk display-lg - Subtle breathing aura behind pattern (amethyst tint) - CTA: "See how it works" — `.btn-primary` full width at bottom - No tab bar, no nav header **Screen 3: `03-fragment-intro.html`** - Single amber fragment ◇ centered, pulsing with glow - Copy: "Your thoughts are like pieces of glass in a kaleidoscope." - Tap interaction: fragment pulses larger, then copy continues: "Sometimes you see sharp edges. Sometimes beautiful patterns." - CTA: "Next" at bottom **Screen 4: `04-turn-demo.html`** - Pre-filled thought: "I always mess everything up" in a text card - Auto-animated Turn sequence plays after 1s delay - Shows the collapse → multiply → crystallize → settle animation - 3 reframe blocks appear with sample perspectives - CTA: "That's the Turn" → next screen **Screen 5: `05-style-selection.html`** - Heading: "Choose your coaching style" - 4 radio options using `.radio-option`: - Stoic Clarity — "Direct truths, no sugarcoating" - Compassionate — "Warmth first, gentle nudges" - Pragmatic — "Practical steps, skip the fluff" - Growth-Oriented — "Challenge me to stretch" - Each has a small icon (inline SVG fragment in the matching style) - CTA: "Continue" — enabled when one is selected **Screen 6: `06-notifications.html`** - Centered layout - Icon: bell with fragment accent - Heading: "Stay on track" - Body: "Gentle reminders to check in with yourself" - Two buttons: "Allow Notifications" (primary), "Not now" (ghost) **Screen 7: `07-account-creation.html`** - Apple Sign In button (full width, dark with Apple logo) - Google Sign In button (full width, outlined) - Divider with "or" - Email input + Password input - "Create Account" primary button - "Already have an account? Sign in" ghost link **Screen 8: `08-first-turn.html`** - Heading: "What's on your mind?" - Large textarea with placeholder: "Type a thought that's been bothering you..." - Fragment hint: small dim text "The Turn will show you new angles" - Submit button: "Turn the kaleidoscope" (amethyst primary) - Decorative: subtle amethyst breathing aura behind textarea **Screen 9: `09-welcome-complete.html`** - Centered layout - Personalized kaleidoscope pattern (using their coaching style color) - Heading: "You're ready" - Subtext: "Your kaleidoscope is set. Let's find some new angles." - CTA: "Enter Kalei" — transitions to Turn Home --- ### Turn Tab (Screens 10–14) → `screens/turn/` **Screen 10: `10-turn-home.html`** - Tab bar with Turn active (amethyst) - No nav header (root tab screen) - Greeting: "Good morning, [Name]" — heading class - Subtext: "What's weighing on you?" — body, dim-light - Large textarea card with rounded corners, deep-glass bg - Placeholder: "Something happened today..." - Below textarea: recent Turn history cards (2–3 sample cards with mini kaleidoscope patterns) - Section header: "RECENT TURNS" with "See all" action link - Floating action: "Turn the kaleidoscope" button at bottom (above tab bar) - Breathing aura behind greeting area **Screen 11: `11-turn-input-active.html`** - Same as Turn Home but textarea is focused (amethyst border glow) - Text typed: "I completely bombed my presentation today and everyone saw" - Character count in bottom-right of textarea - Submit button fully visible and active - Keyboard visible (simple CSS representation or just reduced content area) **Screen 12: `12-turn-animation.html`** - The signature Turn animation playing - Input text visible at top, then collapses - 3 fragments emerge and drift to positions - This is the transition state between input and results - Background: subtle prismatic shimmer **Screen 13: `13-turn-results.html`** - Nav header: "Your Turn" with back chevron - Original thought in a dim card at top: "I completely bombed my presentation..." - Below: 3 reframe blocks (amethyst, sapphire, emerald) with AI-generated perspectives - Detected distortions: chips showing "Catastrophizing" and "Overgeneralization" in amber - Actions row: Save (bookmark icon), Share (share icon), Try Another (refresh icon) - Kaleidoscope pattern unique to this Turn between the thought and reframes - No tab bar (sub-screen) **Screen 14: `14-turn-history.html`** - Nav header: "Turn History" with back chevron - List of Turn cards, each showing: - Mini kaleidoscope thumbnail (left) - First line of original thought (truncated) - Date + number of perspectives - Detected distortion chips - Filter chips at top: All, This Week, Saved - No tab bar --- ### Mirror Tab (Screens 15–19) → `screens/mirror/` **Screen 15: `15-mirror-home.html`** - Tab bar with Mirror active (amber) - Greeting area with amber accent - "Start a session" primary card — large, with hexagonal Mirror icon - Streak indicator: "3 days" with amber flame - Recent sessions list (2–3 cards showing date, duration, fragment count) - Section: "YOUR FRAGMENTS" — grid of recent detected distortion chips with counts **Screen 16: `16-mirror-session.html`** - Nav header: "Mirror Session" with close (X) button on right - Chat bubble interface - User messages (right-aligned, amethyst-tinted bg) - AI responses (left-aligned, kalei-navy bg) - Input accessory bar at bottom with text field + send button - 3–4 exchanges shown - No tab bar (full-screen session) **Screen 17: `17-mirror-fragment-highlight.html`** - Same as active session but with a detected fragment - One user message has amber `.fragment-highlight` underline on a phrase - Tiny amber fragment ◇ pulses beside the highlighted text - Amber glow radiates from the highlight - Hint text: "Fragment detected" in amber label below the message **Screen 18: `18-mirror-fragment-detail.html`** - Half-sheet modal (`.modal-overlay` + `.modal-sheet`) - Behind: the chat session dimmed by scrim - Sheet content: - Grab handle - Distortion name: "Catastrophizing" in amber heading - Icon from `icons-distortions.svg` (inline) - Highlighted text quoted - Explanation: 1–2 sentences about this distortion - "Turn this thought" button (amethyst) — links to Turn with pre-filled text - "Dismiss" ghost button **Screen 19: `19-mirror-reflection.html`** - Nav header: "Session Reflection" - Session summary card: - Duration: "12 minutes" - Words written: "847" - Fragments detected: 3 (with distortion chips) - Mood check: "How are you feeling now?" with 5 emoji-like options (abstract geometric, not actual emoji) - Key themes identified (AI-generated tags) - "Save Session" primary button - "Start a Turn" secondary button --- ### Lens Tab (Screens 20–30) → `screens/lens/` **Screen 20: `20-lens-dashboard.html`** - Tab bar with Lens active (emerald) - Heading: "Your Lens" in emerald - Active goals list (2–3 goal cards): - Progress ring (left) showing completion % - Goal title + next action step - Days remaining chip - "Add New Goal" button (emerald primary) - Section: "DAILY AFFIRMATION" — card with today's auto-generated affirmation - Section: "REHEARSALS" — upcoming/recent rehearsal sessions **Screens 21–26: `21-lens-create-step1.html` through `26-lens-create-step6.html`** - 6-step goal creation wizard - Step progress dots at top (`.step-progress`) - Nav header: "New Goal" with step indicator - **Step 1 — Name:** "What do you want to achieve?" + text input - **Step 2 — Why:** "Why does this matter to you?" + textarea (emotional driver) - **Step 3 — Obstacles:** "What might get in the way?" + add multiple obstacle chips - **Step 4 — If-Then Plans:** For each obstacle, create an if-then implementation intention - **Step 5 — Milestones:** Break goal into 3–5 milestones with target dates - **Step 6 — Visualization:** "Close your eyes and imagine achieving this" — guided prompt + "Save Goal" CTA - Each step: emerald accent, previous/next buttons **Screen 27: `27-lens-goal-detail.html`** - Nav header: goal title - Large progress ring (emerald) - Milestone checklist with completion states - If-Then plans listed - "Start Rehearsal" button (emerald) - "Log Progress" button (secondary) **Screen 28: `28-lens-affirmation.html`** - Centered, full-screen card feel - Today's AI-generated affirmation in display-md - Decorative: emerald breathing aura behind text - Mini kaleidoscope with emerald tint - "Reflect on this" button → opens Mirror with affirmation as prompt **Screens 29–30: `29-rehearsal-session.html`, `30-rehearsal-complete.html`** - **Session:** Guided visualization interface - Soft emerald background glow - Step-by-step prompts appearing one at a time with fade-in - Timer ring showing session progress - "I can see it" / "Next" progression - Breathing guide animation (expanding/contracting circle) - **Complete:** Session summary - Vividness rating (1–5 stars or fragments) - "How real did it feel?" slider - Session added to Evidence Wall notification --- ### Gallery Tab (Screens 31–34) → `screens/gallery/` **Screen 31: `31-gallery-all.html`** - Tab bar with Gallery active (sapphire) - Toggle: "Patterns" / "Keepsakes" at top - Grid of pattern cards (2 columns): - Each card: mini kaleidoscope visual, thought preview, date, distortion chips - Sapphire accent on active/selected - Sorting: "Recent" / "Most Reframed" chips **Screen 32: `32-gallery-keepsakes.html`** - Same layout but showing saved/bookmarked Turns - Each card: kaleidoscope pattern, saved reframe text, source thought (dim) - Heart/bookmark icon indicating saved state **Screen 33: `33-gallery-detail.html`** - Nav header: "Pattern" with back + share action - Large kaleidoscope pattern visualization - Original thought - All 3 reframe perspectives - Detected distortions with explanations - "Turn again" button (get fresh perspectives) - Metadata: date, coaching style used **Screen 34: `34-gallery-search.html`** - Search input at top (sapphire focus border) - Filter chips: distortion types, date ranges, features - Results list updating as filters change --- ### You Tab (Screens 35–43) → `screens/you/` **Screen 35: `35-you-profile.html`** - Tab bar with You active (soft light) - Avatar circle (initial or placeholder) - Name, member since date - Stats row: Turns taken, Mirror sessions, Active goals - Quick links: Settings, Subscription, Data & Privacy - Section: "EVIDENCE WALL" — preview mosaic (link to full view) - Section: "SPECTRUM" — preview card (Phase 2, Prism badge) **Screen 36: `36-you-stats.html`** - Nav header: "Your Stats" - Stat blocks: Total Turns, Mirror Sessions, Goals Completed, Streak Days - Bar chart: Turns per week (simple CSS bars) - Top distortions: ranked list with amber bars showing frequency - Most used feature breakdown **Screen 37: `37-you-settings.html`** - Nav header: "Settings" - Sections with `.card-action` items: - Profile: Edit name, coaching style - Notifications: link to #62 - Appearance: (future: themes) - Data & Privacy: Export (#63), Delete Account (#64) - About: Version, Terms, Privacy Policy **Screen 38: `38-you-subscription.html`** - Nav header: "Subscription" - Current plan card (Free or Prism) - If Free: comparison table showing Free vs Prism features - Prism pricing: "$7.99/month" with prismatic text gradient - Feature bullets for Prism: Unlimited turns, Mirror sessions, Spectrum access, Priority AI - CTA: "Upgrade to Prism" (prismatic gradient button) **Screens 39–43: Evidence Wall** (See Section 10 below for detailed specs) --- ### Ritual (Screens 44–49) → `screens/ritual/` **Screen 44: `44-ritual-templates.html`** - Nav header: "Choose Your Ritual" with back - 3 ritual template cards: - **Morning Clarity** (Amethyst): Mirror reflection → Turn reframe → Lens affirmation - **Evening Wind-Down** (Sapphire): Mirror journal → Turn gratitude → Lens review - **Quick Reset** (Emerald): Turn single thought → Mirror check-in (2 min) - Each card shows: name, duration, steps preview, accent color **Screens 45–47: `45-ritual-morning.html`, `46-ritual-evening.html`, `47-ritual-quick.html`** - Active ritual flow - Step progress at top showing current step - Current step content fills the screen: - Mirror step: simplified journaling interface - Turn step: quick reframe input - Lens step: affirmation display or goal check-in - "Next Step" button at bottom - Timer running in header **Screen 48: `48-ritual-complete.html`** - Celebration screen - Prismatic kaleidoscope animation (success burst from `loading-animations.svg` reference) - "Ritual Complete" heading - Stats: time taken, steps completed, streak count - Evidence Wall tile preview: "New tile earned!" - CTA: "Done" returns to Turn Home **Screen 49: `49-ritual-streak.html`** - Nav header: "Ritual Streak" - Calendar view (week by week) with amber-filled completed days - Current streak count (large display number) - Longest streak record - Heat map of ritual completion times --- ### Spectrum (Screens 50–57) → `screens/spectrum/` **Screen 50: `50-spectrum-dashboard.html`** - Nav header: "Spectrum" with Prism badge - 5 preview cards linking to each visualization: - The River (prismatic flowing band) - Your Glass (radar chart thumbnail) - Turn Impact (before/after bars) - Rhythm Detection (bubble chart) - Growth Trajectory (line chart) - Time range selector: Week / Month / All Time - Overall insight card with AI-generated summary **Screens 51–55:** Each is a full-screen visualization detail - **51: `51-spectrum-river.html`** — Flowing prismatic band showing emotional patterns over time, with fragment data points. Reference `spectrum-visualizations.svg` River section. - **52: `52-spectrum-glass.html`** — Radar/spider chart showing balance across features. Reference Glass section. - **53: `53-spectrum-impact.html`** — Before/after bar pairs showing Turn effectiveness. Ruby (before) → Emerald (after). - **54: `54-spectrum-rhythm.html`** — Time-of-day bubble chart showing when user is most active/reflective. - **55: `55-spectrum-growth.html`** — Line chart with fragment data points and milestone markers showing progress trajectory. **Screens 56–57: Summaries** - **56: `56-spectrum-weekly.html`** — AI-generated weekly summary with key metrics, top distortions, recommended actions - **57: `57-spectrum-monthly.html`** — Deeper monthly analysis with trend arrows, comparison to previous month, growth areas --- ### Modals & System (Screens 58–64) → `screens/modals/` and `screens/system-states/` **Screen 58: `58-upgrade-modal.html`** - `.modal-overlay.centered` + `.modal-card` - Prismatic gradient border on card - "Unlock Kalei Prism" heading - Feature preview (3 key benefits) - Price: "$7.99/month" - "Start Free Trial" primary button - "Maybe Later" ghost button **Screen 59: `59-rate-limit.html`** - Toast or inline card showing: "You've used your free turns for today" - Upgrade CTA - Timer showing when limit resets **Screen 60: `60-crisis-response.html`** - Full-screen safety response - Ruby accent throughout - "We're here for you" heading - Crisis hotline numbers - "Talk to someone now" button (ruby primary) - "I'm okay, continue" secondary option - Breathing exercise link **Screen 61: `61-pattern-share.html`** - Share sheet modal - Pattern card preview (how it'll look when shared) - Share targets: Copy Link, Messages, More... - Generated image: kaleidoscope pattern + thought + app branding **Screen 62: `62-notification-settings.html`** - Nav header: "Notifications" - Toggle rows for each notification type: - Daily Ritual Reminder - Mirror Check-in - Weekly Spectrum Summary - Streak Alerts - Time picker for reminder times **Screen 63: `63-data-export.html`** - Nav header: "Export Your Data" - Explanation of what gets exported - Format options: JSON, PDF summary - "Export Data" primary button - Processing state with loading animation **Screen 64: `64-account-deletion.html`** - Nav header: "Delete Account" - Warning card (ruby border) - Explanation of what gets deleted (irreversible) - Confirmation text input: "Type DELETE to confirm" - "Delete My Account" button (ruby, disabled until confirmed) - "Cancel" ghost button --- ## 10. Evidence Wall — Detailed Build Spec The Evidence Wall is Kalei's mastery tracking mosaic. Tiles are earned through activities and form a growing visual tapestry. ### Tile Types | Type | Shape | Earned From | Color | |------|-------|------------|-------| | Diamond | ◇ | Completing a Turn | Amethyst | | Hexagon | ⬡ | Mirror session | Amber | | Circle | ● | Lens goal milestone | Emerald | | Rectangle | ▭ | Ritual completion | Sapphire | | Triangle | △ | Streak achievement | Rose | ### States - **Screen 39 (Empty):** Ghost tile outlines with dashed borders, CTA "Complete your first Turn to earn a tile" - **Screen 40 (Early, 3–5 tiles):** Tiles placed with gaps, faint connection lines between them - **Screen 41 (Mid, 10–15 tiles):** Denser arrangement, connection web forming, pattern emerging - **Screen 42 (Full, 20+ tiles):** Rich mosaic with glowing connections, celebration state - **Screen 43 (Tile Detail):** Tap a tile → half-sheet showing: tile type, date earned, source activity, related thought/goal ### Layout Algorithm (CSS Grid) ```css .evidence-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 16px; } .evidence-tile { aspect-ratio: 1; border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid; position: relative; } /* Some tiles span 2 columns or rows for visual interest */ .evidence-tile.wide { grid-column: span 2; aspect-ratio: 2/1; } .evidence-tile.tall { grid-row: span 2; aspect-ratio: 1/2; } ``` --- ## 11. Monetization & Rate Limiting UI ### Free Tier (Kalei) - 3 Turns/day, 1 Mirror session/day, 3 Lens goals max - No Spectrum access - Basic Ritual templates only ### Prism Tier ($7.99/month) - Unlimited Turns & Mirror sessions - Unlimited goals - Full Spectrum access - Advanced Ritual customization - Priority AI processing ### UI Implications - Show `Prism` badge (prismatic gradient chip) next to premium features - When rate-limited: inline card with count remaining, upgrade CTA - Subscription screen: comparison table with checkmarks --- ## 12. Build Order — Priority Sequence Build screens in this order, which follows the user journey and ensures shared components are established first: ### Phase 1: Foundation (build first) 1. `01-splash.html` — establishes breathing logo animation 2. `02-welcome.html` — establishes onboarding layout + hero pattern 3. `10-turn-home.html` — establishes tab bar + greeting + card layout 4. `13-turn-results.html` — establishes reframe blocks + distortion chips ### Phase 2: Core Loop 5. `03-fragment-intro.html` 6. `04-turn-demo.html` 7. `05-style-selection.html` 8. `06-notifications.html` 9. `07-account-creation.html` 10. `08-first-turn.html` 11. `09-welcome-complete.html` 12. `11-turn-input-active.html` 13. `12-turn-animation.html` 14. `14-turn-history.html` ### Phase 3: Mirror Feature 15. `15-mirror-home.html` 16. `16-mirror-session.html` 17. `17-mirror-fragment-highlight.html` 18. `18-mirror-fragment-detail.html` 19. `19-mirror-reflection.html` ### Phase 4: Lens + Rehearsal 20. `20-lens-dashboard.html` 21. `21-lens-create-step1.html` through `26-lens-create-step6.html` 22. `27-lens-goal-detail.html` 23. `28-lens-affirmation.html` 24. `29-rehearsal-session.html` 25. `30-rehearsal-complete.html` ### Phase 5: Gallery + You 26. `31-gallery-all.html` 27. `32-gallery-keepsakes.html` 28. `33-gallery-detail.html` 29. `34-gallery-search.html` 30. `35-you-profile.html` 31. `36-you-stats.html` 32. `37-you-settings.html` 33. `38-you-subscription.html` ### Phase 6: Evidence Wall + Ritual 34. `39-evidence-wall-empty.html` 35. `40-evidence-wall-early.html` 36. `41-evidence-wall-mid.html` 37. `42-evidence-wall-full.html` 38. `43-evidence-wall-detail.html` 39. `44-ritual-templates.html` 40. `45-ritual-morning.html` 41. `46-ritual-evening.html` 42. `47-ritual-quick.html` 43. `48-ritual-complete.html` 44. `49-ritual-streak.html` ### Phase 7: Spectrum (Phase 2) 45. `50-spectrum-dashboard.html` 46. `51-spectrum-river.html` 47. `52-spectrum-glass.html` 48. `53-spectrum-impact.html` 49. `54-spectrum-rhythm.html` 50. `55-spectrum-growth.html` 51. `56-spectrum-weekly.html` 52. `57-spectrum-monthly.html` ### Phase 8: System & Modals 53. `58-upgrade-modal.html` 54. `59-rate-limit.html` 55. `60-crisis-response.html` 56. `61-pattern-share.html` 57. `62-notification-settings.html` 58. `63-data-export.html` 59. `64-account-deletion.html` --- ## 13. Quality Checklist Before considering any screen complete, verify: - [ ] Device frame renders at exactly 390 × 844px with 44px rounded corners - [ ] Status bar shows 9:41, signal bars, wifi icon, green battery - [ ] Tab bar (if present) has correct active tab with feature color - [ ] All text uses design system typography classes (no raw font sizes) - [ ] All colors use CSS custom properties (`var(--amethyst)`, not `#8B5CF6`) - [ ] Fragment diamonds use gradient fills with specular highlight - [ ] Glow effects use `box-shadow` with color at 0.3 opacity (not drop-shadow) - [ ] Breathing animations use 6s `ease-in-out infinite` cycle - [ ] No native emoji anywhere — use geometric SVG abstractions - [ ] Cards use `--kalei-navy` background with `--twilight` borders - [ ] Buttons follow the component system (`.btn-primary`, `.btn-secondary`, `.btn-ghost`) - [ ] Interactive elements have hover/active states defined - [ ] Content doesn't overflow the device frame - [ ] Scrollable areas have hidden scrollbars (`.screen-content` handles this) - [ ] Links between screens use relative paths (`../turn/10-turn-home.html`) --- ## 14. Key Documents to Read Read these documents in this order for full context: 1. **This file** — you're here 2. **`assets/ASSET-INDEX.md`** — what SVG elements exist 3. **`assets/design-system.css`** — all tokens, components, utilities 4. **`docs/product/kalei-complete-user-journey.md`** — every screen described in detail 5. **`docs/product/kalei-complete-design.md`** — feature specs and interaction patterns 6. **`docs/brand/kalei-brand-guidelines.md`** — voice, tone, visual principles 7. **`docs/technical/kalei-user-journey-technical-map.md`** — API/DB context (for realistic mock data) 8. **`logo-mockups/finalists/soft-elegance-final.svg`** — the visual DNA source --- *Built for Kalei — Same pieces. New angle.*