# Kalei — Claude Code Implementation Instructions > **Purpose:** This document tells Claude Code everything it needs to know to build, modify, improve, and polish pixel-perfect interactive HTML mockups for every screen in the Kalei app. > > **For agent teams:** This is the single source of truth. Read this file completely before touching any screen. Follow the agent workflow in Section 2, the quality standards in Section 15, and the review protocol in Section 20. --- ## 1. What You're Building You are building **76 interactive HTML mockup screens** for Kalei, a mobile mental wellness app (64 original + 12 Guide screens). 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) - Is **fully self-contained** — all SVGs are inlined or referenced from the local `assets/` folder. No external image URLs, no CDN dependencies for icons or illustrations. Only Google Fonts and the local `design-system.css` are external dependencies. **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. 6. **CSS `` path** is `../../assets/design-system.css` for screens inside `screens/[feature]/` directories. --- ## 7. SVG Asset Usage Guide ### 7.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 ``` **IMPORTANT:** Option C is the only acceptable use of external file references. For all icons, fragments, tab bar icons, and UI elements, use Option A (inline SVG). This ensures screens work offline and have no broken image dependencies. ### 7.2 SVG Gradient ID Conflicts When inlining multiple SVGs on the same page, **gradient IDs must be unique**. If two SVGs both use `id="gradient1"`, only the first definition will be used. Solution: prefix gradient IDs with the element context: ```html ``` ### 7.3 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) | ### 7.4 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) --- ## 8. Component Patterns ### 8.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 ``` ### 8.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.
``` ### 8.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?
``` ### 8.4 Card with Kaleidoscope Pattern ```html
My first reframe
Feb 21, 2026 • 3 perspectives
``` ### 8.5 Progress Ring ```html
72% Complete
``` ### 8.6 Evidence Wall Tile ```html
Goal Met
``` ### 8.7 Toast Notifications ```html
Turn saved
``` ### 8.8 Buttons (Design System Reference) | Type | Background | Text | Height | Radius | Use | |------|-----------|------|--------|--------|-----| | `.btn-primary` | `--amethyst` | `--pure-light` | 52px | 12px | Primary CTAs | | `.btn-secondary` | `--deep-glass` + 1px `--twilight` border | `--soft-light` | 44px | 10px | Secondary actions | | `.btn-ghost` | Transparent | `--amethyst` | Auto | None | Tertiary, dismiss | | `.btn-destructive` | `--ruby` at 15% opacity + 1px `--ruby` 30% border | `--ruby` | 44px | 10px | Delete only | **Feature-colored primaries:** When a CTA belongs to a specific feature (e.g., "Start Rehearsal" on Lens), use that feature's color instead of amethyst: - Lens CTAs: `background: var(--emerald)` - Mirror CTAs: `background: var(--amber)` - Gallery CTAs: `background: var(--sapphire)` ### 8.9 Input Fields - Background: `var(--deep-glass)` - Border: `1px solid var(--twilight)`, transitions to `1px solid var(--amethyst)` on focus - Text: `var(--pure-light)`, `.body-lg` token - Placeholder: `var(--dim-light)` - Height: 48px (single line), auto-grow for multi-line - Corner radius: 10px - Focus glow: `box-shadow: 0 0 0 3px rgba(139,92,246,0.15)` ### 8.10 Cards - Background: `var(--kalei-navy)` - Border: `1px solid var(--twilight)` (optional) - Corner radius: 16px - Padding: 16px standard, 12px compact - **No traditional shadows** — Kalei uses borders and background shifts for depth - Pressed/hover state: background shifts to `var(--deep-glass)` ### 8.11 Chips & Tags - Height: 32px - Corner radius: 16px (full pill) - Background: `var(--deep-glass)` - Text: `var(--soft-light)`, `.body-sm` token - Fragment type chips: Amber text on Amber at 15% opacity background - Selection chips: Amethyst border when selected ### 8.12 Bottom Sheet / Modal - Background: `var(--kalei-navy)` - Corner radius: 20px (top corners only) - Grab handle: 36×5px pill in `var(--twilight)`, centered, 8px from top - Backdrop: `var(--void)` at 60% opacity - Max height: 70% of screen --- ## 9. Interaction Patterns ### 9.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); } } ``` ### 9.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 ### 9.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. ### 9.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; } ``` --- ## 10. 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. --- ## 11. 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 Sage (Sapphire) — "Clear-eyed perspective" - Compassionate Friend (Rose) — "Gentle understanding" - Pragmatic Coach (Emerald) — "Practical next steps" - Growth Catalyst (Amber) — "Opportunity in everything" - Each has a small icon (inline SVG fragment in the matching color) - 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 12 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) - "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 - **52: `52-spectrum-glass.html`** — Radar/spider chart showing balance across features - **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 **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 (988 Suicide & Crisis Lifeline, Crisis Text Line: text HOME to 741741) - "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 - Goal Check-In Reminders (Guide) - Daily Attention Prompts (Guide) - Weekly Pulse (Guide) - 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 --- ## 12. 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; } ``` --- ## 13. The Guide — Active Coaching Layer Build Spec The Guide is an intelligence layer that surfaces across all features through cards, conversations, and flows. It has its own screen folder (`screens/guide/`) plus enhancements to existing screens (Turn Results and Mirror Reflection). ### Guide Visual Identity All Guide surfaces share a distinctive **prismatic gradient border** — a thin 1px border that cycles through all jewel tones (amethyst → sapphire → emerald → amber). This signals "the Guide is connecting something" and distinguishes it from feature-specific UI. ```css .guide-border { border: 1px solid transparent; background-clip: padding-box; position: relative; } .guide-border::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber)); z-index: -1; } ``` Guide icon: faceted diamond ◇ with a subtle directional pulse animation. --- ### Guide Screens (65–76) → `screens/guide/` **Screen 65: `65-guide-checkin-conversation.html`** - Shows within Lens goal detail context (include goal header at top) - Chat interface below: Guide messages in cards with prismatic border, user messages in dark bubbles - Guide opens with evidence-first message: "You completed X of Y planned sessions. That's Z% follow-through." - Then asks about specific obstacle/milestone - User response bubble (mock text) - Guide follows up with if-then plan review and adjustment suggestion - Closes with Evidence Wall proof point - At bottom: text input area with send button - Link to "Past check-ins" history **Screen 66: `66-guide-checkin-summary.html`** - Nav header: "Check-In Summary" with back arrow - Summary card with prismatic border: - What was reviewed (goal name, time period) - Plan adjustments made (if-then plan old → new, amber highlight on changes) - Evidence highlighted (2-3 proof points with jewel-tone accent dots) - Next check-in date - Footer: "Saved to your coaching history" **Screen 67: `67-guide-bridge-discovery.html`** - Shows the Turn Home screen as base (screen 10 layout) - At top (below nav, above normal content): half-height bridge card - Prismatic gradient border - Header text: "◇ Something keeps coming up" - Body: "Work has been on your mind — 4 Mirror sessions and 2 Turns this week. Want to focus that energy?" (with "4 Mirror sessions" and "2 Turns" in amber bold) - CTAs: "Open Lens" (emerald primary) + "Just noticing" (ghost) - The card should feel dismissible (X in top-right or swipe hint) **Screen 68: `68-guide-bridge-reinforcement.html`** - Shows the Lens Dashboard as base (screen 20 layout) - At top: half-height bridge card with prismatic border - Header: "◇ This connects to something you're building" - Body references user's Turns linking to active goal: "Your last 2 Turns were about public speaking anxiety. Your Lens goal 'Present with confidence' has a Rehearsal ready." - CTAs: "Start Rehearsal" (emerald primary) + "Not now" (ghost) **Screen 69: `69-guide-bridge-integration.html`** - Shows the Mirror Session screen as base (screen 16 layout — end of session) - Integration bridge card appears after last message - Prismatic border - Header: "◇ You've seen this differently before" - Shows quoted keepsake: *"One rough meeting doesn't define my skills"* (sapphire italic) - Below: current session quote that contradicts it (amber italic) - Body: "Both views are real. Which one has more evidence?" - CTAs: "See your Evidence Wall" (amethyst primary) + "Continue writing" (ghost) **Screen 70: `70-guide-attention-prompt.html`** - Shows Lens Dashboard as base (screen 20 layout) - Below active goals, a card with emerald accent border: - Header: "Today's Focus: Notice" - Body: "Today, notice one moment where you feel physically energized — even briefly. Walking up stairs easily, finishing a task with energy left. Just notice." - Footer (dimmed): "For your goal: Run a 5K without stopping" - CTA: "Got it" (emerald primary) - Below CTA (initially hidden, revealed later in day): "Log a moment" (secondary) **Screen 71: `71-guide-moment-log.html`** - Nav header: "Log a Moment" with back arrow - Reminder card: "Today's prompt was: Notice one moment of physical energy" - Text input area (multiline, 3 rows) - Below: mock logged entry: "After lunch I felt like taking the stairs instead of the elevator." - Confirmation card: "That's evidence. Your body is changing and you're starting to notice. Added to your Evidence Wall." - New Evidence Wall tile preview (emerald hexagon glow animation) **Screen 72: `72-guide-evidence-mirror.html`** - Shows Mirror Reflection screen as base (screen 19 layout) - Below normal reflection content: additional card with prismatic border - Header: "◇ Here's what I've seen" - Body: "You said you're not a follow-through person. Your evidence says differently:" - 3 numbered proof points: 1. "18 of 22 planned training sessions completed (82%)" — emerald dot 2. "14-day Mirror streak — active right now" — amber dot 3. "All 5 micro-actions for your reading goal completed last month" — sapphire dot - CTA: "See your full Evidence Wall" (amethyst primary) + Dismiss (ghost) **Screen 73: `73-guide-evidence-turn.html`** - Shows Turn Results screen as base (screen 13 layout) - Below the 3 reframe cards, above action buttons: evidence intervention card - Prismatic border - Header: "◇ Here's what I've seen" - Body: "This thought — doubting your capability — has come up before. Last time you Turned it, you saved this:" (shows quoted keepsake) - Below: "Since then, you've completed 4 of 5 planned actions." - No explicit CTA — integrates naturally into the Turn results flow **Screen 74: `74-guide-pulse-report.html`** - Full-screen flow (no tab bar — immersive like Ritual) - Step indicator: "Step 1 of 3" at top - Header: "Your Weekly Pulse" - Subheader: "How did this week feel?" - 5-point fragment scale (horizontal row of SVG diamonds): - Each at different opacity/glow level (dim cracked → brilliant faceted) - Labels below each: "Rough" / "Harder than usual" / "Steady" / "Good momentum" / "Breakthrough week" - Third one (Steady) shown as selected with amber glow - Below: optional write-in text field: "If you want to say more..." - CTA: "Next" at bottom **Screen 75: `75-guide-pulse-read.html`** - Full-screen flow continuation (Step 2 of 3) - Header: "Here's what I noticed this week" - 4-5 observation items, each with jewel-tone accent dot: - "4 Turns — all work-related. That's a theme." (amethyst dot) - "Mirror sessions showed increasing agency through the week" (amber dot) - "3 of 4 planned actions completed on your 5K goal" (emerald dot) - "Catastrophizing frequency dropped for the second week in a row" (sapphire dot) - Highlighted callout card (subtle amber background): - "You said this was a rough week, but your data shows progress on two fronts. Sometimes the feeling lags behind the evidence." - CTA: "Next" at bottom **Screen 76: `76-guide-pulse-focus.html`** - Full-screen flow completion (Step 3 of 3) - Header: "For next week" - 2-3 suggestion cards (each with emerald accent): - "Do a Rehearsal for your 5K — you haven't done one in 10 days" (Lens icon) - "Your Mirror streak is at 14 days — keep it going" (Mirror icon) - "Your rainy-day if-then plan hasn't been tested yet" (Turn icon) - CTAs: "Sounds good" (emerald primary) + "Adjust" (ghost) - Completion state: "Pulse complete. See you next week." + subtle prismatic flash --- ### Enhanced Existing Screens (Turn Results + Mirror Reflection) **Screen 13 Enhancement (Turn Results):** After the 3 reframe pattern cards and before action buttons, add two new elements: 1. **If-Then Micro-Action Card:** - Emerald accent border - Header: "◇ Make it real" - Format: "If [situation from the thought], then I will [specific action]" - CTA: "Save to Lens" (emerald) + "Skip" (ghost) 2. **Goal Connection Card** (conditional — only shows when Turn topic maps to active goal): - Small inline card, no border (just text) - "This connects to your goal: [goal title]" - CTA: "Check in on this goal" (text link) **Screen 19 Enhancement (Mirror Reflection):** After existing reflection content (themes, fragments, patterns, insight), add: **"The Guide noticed..." section:** - Prismatic-bordered card - Header: "◇ The Guide noticed..." - 1-2 cross-feature observations (e.g., "This week's Mirror themes align with your Lens goal about career growth" or "Your catastrophizing frequency is down 30% from last month") - CTA appropriate to observation --- ## 13B. Reactive & Proactive AI Behavior Patterns This section defines how Kalei's AI behaves **reactively** (responding to detected patterns) and **proactively** (surfacing content before the user asks). These behaviors are the connective tissue of the app — they make the features work as an integrated system, not isolated tools. Agent teams must understand this behavioral model to build mockups that feel alive and intelligent. ### The Core Problem Without reactive behavior, Kalei is transactional: user opens feature → does thing → leaves. The science demands a **causal chain** — clear goal → attention bias → mental rehearsal → capability belief → if-then plans → habit formation → expectation reinforcement → expanded action. Reactive AI behavior is what drives users through that chain. ### The Manifestation Chain (How Features Connect) This is the scientific model that all reactive behaviors serve: ``` Step 1: Name It → Mirror detects fragments, user becomes aware of thinking patterns Step 2: See It → Lens sets a goal, The View creates the vision Step 3: Believe It → Evidence Wall accumulates proof of capability Step 4: Notice Differently → Attention Prompts train real-world noticing Step 5: Act → If-Then micro-actions convert reframes into behavior Step 6: Prepare → Rehearsal builds cognitive rehearsal of the process Step 7: Compound → Ritual makes all of this automatic Step 8: Understand → Spectrum reveals the full picture over time ``` The Guide is the intelligence layer that actively moves users through this chain by detecting where they are and what they need next. --- ### Reactive Behavior by Feature #### Mirror — Reactive Fragment Detection | Behavior | Trigger | Response | Frequency | |----------|---------|----------|-----------| | Fragment highlighting | User finishes typing a message | Subtle amber underline + ◇ icon on detected cognitive distortions (confidence > 0.75) | Every message | | Inline reframe | User taps a highlighted fragment | Half-sheet card slides up with distortion name, reframe, Full Turn CTA | On demand | | The Nudge | 5+ messages with zero taps AND significant negative patterns accumulating | One gentle prompt: "I noticed a few fragments. Want to look at them together?" | Once per session max | | Session reflection | User closes Mirror or inactivity timeout | Generates The Mosaic (themes), Fragments Found (count), Patterns Revealed (engaged reframes), one-line insight | End of every session | | Evidence intervention | AI detects self-efficacy dip in language (helplessness, capability doubt) | Evidence Wall card surfaces inline after session ends (Guide Pattern 4) | Max once per session | | Integration bridge | Saved Turn reframe contradicts current Mirror writing | "You've seen this differently before" card with quoted keepsake (Guide Pattern 2) | Max once per day | **Mockup representation:** Show the "detected" state — fragments already highlighted with amber glow and ◇ icons. For the nudge, show the prompt card at the bottom of a session with several unhighlighted messages above it. #### Turn — Reactive Post-Reframe Actions | Behavior | Trigger | Response | Frequency | |----------|---------|----------|-----------| | If-Then micro-action card | Every Turn completion | "Make it real" card with auto-generated if-then plan: "If [situation], then I will [action]" | Every Turn result | | Goal connection card | Turn topic maps to an active Lens goal | Small inline text: "This connects to your goal: [title]" with check-in link | Conditional | | Reframe style adaptation | Prism user selects a style (Stoic, Compassionate, etc.) | Reframes shift to selected perspective | Per Turn | | Bridge trigger | 3+ Turns in 7 days share a theme NOT mapping to any goal | Discovery bridge appears on next Turn Home visit | Max once per day | **Mockup representation:** Show Turn Results screen with the if-then micro-action card below the 3 reframe patterns, plus the goal connection text below that. #### Lens — Proactive Goal Coaching | Behavior | Trigger | Response | Frequency | |----------|---------|----------|-----------| | Scheduled check-in | User's chosen check-in time (default: weekly) | Goal check-in conversation opens within goal detail | Weekly per goal | | Contextual check-in | Milestone date passed (completed or not), streak breaks, 3+ days no activity | Same check-in UI but triggered by event | As needed | | Attention prompt | Daily at user's notification time | "Today's Focus: Notice" card in Lens tab | Once per day | | Prompt chain progression | User progresses through manifestation chain | Prompt type evolves: Vision → Capability → Awareness → Action → Reflection | Automatic | | Moment logging | User logs a noticed moment from an attention prompt | Confirmation + added to Evidence Wall as proof point | On demand | | Reinforcement bridge | 3+ Mirror/Turn entries map to active goal | "This connects to something you're building" card with Rehearsal CTA | Max once per day | **Attention Prompt Evolution Through the Chain:** | Manifestation Step | Prompt Type | Example Mock Content | |---|---|---| | Step 2: See It | Vision prompt | "Picture yourself crossing that finish line. What are you wearing? Who's there?" | | Step 3: Believe It | Capability prompt | "Think of the last time you pushed through something physical when you wanted to quit." | | Step 4: Notice | Awareness prompt | "Today, notice one moment of physical strength or energy." | | Step 5: Act | Action prompt | "Your if-then plan: 'If it's 6pm, put on running shoes.' How did it go?" | | Step 6: Compound | Reflection prompt | "You've run 3 times this week. What's different about your mornings now?" | **Mockup representation:** Show mid-chain state (Step 4: Notice) as the default, since it's the most common and most tangible. #### Guide — 5 Proactive Patterns (Detection + Response) **Pattern 1: Goal Check-Ins** — Conversational coaching within Lens Detection triggers: - Scheduled: user's chosen check-in cadence - Milestone date passed (completed or missed) - 3+ days no Lens activity on active goal - Streak broken Response rules: 1. Always start with what went well (evidence first, obstacles second) 2. Reference real data — specific numbers, dates, actions 3. Adjust if-then plans collaboratively based on what actually happened 4. Close every check-in with a concrete Evidence Wall proof point 5. Never shame — missing a day is data, not failure **Pattern 2: Cross-Feature Bridges** — Connecting patterns across features | Bridge Type | Trigger Condition | Card Header | Mock Example | |---|---|---|---| | Discovery | 3+ Mirror/Turn entries in 7 days share theme with NO matching goal | "◇ Something keeps coming up" | "Work has been on your mind — 4 Mirror sessions and 2 Turns this week." | | Reinforcement | 3+ Mirror/Turn entries in 7 days share theme WITH matching goal | "◇ This connects to something you're building" | "Your last 2 Turns were about public speaking. Your goal 'Present with confidence' has a Rehearsal ready." | | Integration | Saved Turn reframe contradicts current Mirror writing | "◇ You've seen this differently before" | Shows quoted keepsake vs. current statement, asks "Which has more evidence?" | Rules: Never mid-stream in a session. Max one bridge per day. Always offer an exit. Use the user's own words. **Pattern 3: Attention Prompts** — Daily micro-exercises Detection: Daily timer at user's notification time Response: One prompt per day, tied to active goal, progressing through the manifestation chain Logging: Every noticed moment → Evidence Wall proof point **Pattern 4: Evidence Interventions** — Proactive evidence surfacing during low moments Detection signals (any 2+ in combination): | Signal | Source | Detection Pattern | |---|---|---| | Helplessness language | Mirror | "I can never stick to anything" | | Always/never frequency spike | Mirror/Turn | "Nothing I try ever works" | | Capability doubt | Turn input | "I'm not the kind of person who..." | | Goal abandonment behavior | Lens | 5+ days no activity on active goal | | Streak break + no return | Ritual | Streak broken 3+ days ago, no Ritual since | | Negative comparison | Mirror | "Everyone else seems to manage this" | Response calibration: Select 2-3 specific, relevant proof points that directly counter the expressed doubt. Evidence, never cheerleading — numbers, dates, specific actions. Max once per session. **Pattern 5: Weekly Pulse** — End-of-week feedback loop Detection: Once per week at user's chosen time (default: Sunday evening) Response: 3-step flow (< 90 seconds total): 1. Self-report (fragment-state 5-point scale) 2. AI read (4-5 specific observations with jewel-tone dots) 3. Next week's focus (2-3 actionable suggestions) Key rule: When self-report and AI read diverge, name the gap gently: "You said this was rough, but your data shows progress on two fronts. Sometimes the feeling lags behind the evidence." #### Spectrum — Proactive Insight Delivery | Behavior | Trigger | Response | Timing | |----------|---------|----------|--------| | Weekly reflection | Sunday evening | "Your Spectrum updated. See what this week's light revealed." | Weekly | | Monthly deep dive | First of each month | Month-over-month comparisons, rhythm detection, growth trajectory | Monthly | | In-context nudge (Mirror) | Recurring pattern in current session | "You've used 'I should' 4 times this session. That's a pattern." | Max once per session | | In-context nudge (Turn) | Post-Turn, topic matches tracked pattern | "This is the 3rd work-related fragment this week. The Spectrum can show more." | Max once per Turn | | In-context nudge (Lens) | Lens goal aligns with processed fragments | "Your focus on career growth aligns with fragments you've been processing." | Max once per session | | Growth pattern evolution | Monthly cumulative usage | Kaleidoscope pattern gains complexity and color range | Continuous | **Mockup representation:** Show the weekly reflection notification state and one in-context nudge example. #### Ritual — Context-Stability Tracking | Behavior | Trigger | Response | Frequency | |----------|---------|----------|-----------| | Context stability feedback | 7+ days of consistent timing | "You've completed your Morning Ritual within the same 30-min window for 12 days. This is becoming automatic." | Weekly | | Drift detection | Timing varies > 2 hours across week | "Your Ritual timing drifted this week. Consistency is the engine. Can we lock in a time?" | When detected | | Evening ritual Guide step | Evening template reaches "Acknowledge" step | Guide-powered "What did you notice today?" logging | Daily | | Morning ritual Guide step | Morning template starts | Today's attention prompt embedded in flow | Daily | #### Evidence Wall — Contextual Surfacing The Evidence Wall is primarily **passive storage** — it collects proof points automatically from all features. It becomes **active** only through the Guide's Evidence Interventions (Pattern 4). Without the Guide, the Evidence Wall just sits there. With the Guide, evidence becomes a coaching tool. Auto-collected evidence types: | Source | Evidence Type | Mock Data Example | |---|---|---| | Lens | Completed micro-actions | "Completed: 'Go for a 3km run' — Feb 18" | | Turn | Saved keepsakes (turning points) | "Saved: 'One rough meeting doesn't define my skills' — Feb 12" | | Mirror | Self-corrections (caught own fragment) | "Self-caught: identified catastrophizing before Kalei highlighted it — Feb 15" | | Mirror | Reframe echoes (internalized language) | "Echo: language from saved Turn appeared in organic Mirror writing — Feb 20" | | Ritual | Streak milestones | "14-day Morning Ritual streak — active" | | Lens | Goal completions | "Completed goal: 'Read 2 books this month' — Feb 21" | | Spectrum | Growth markers | "Fragment density dropped below 5/100 words — Feb 19" | --- ### Proactive AI Insight Card — Reusable Component Many reactive behaviors surface through a shared UI pattern: the **Proactive AI Insight Card**. This is a reusable component distinct from feature-specific UI. ```html
◇ [Header text]

[Observation text with key data in bold]

``` ```css .ai-insight-card { background: var(--kalei-navy); border-radius: var(--radius-lg); padding: var(--space-4); margin: var(--space-3) 0; } .ai-insight-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .ai-insight-title { font-family: var(--font-heading); font-size: var(--text-sm); color: var(--text-primary); letter-spacing: 0.02em; } .ai-insight-body { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; margin-bottom: var(--space-3); } .ai-insight-actions { display: flex; gap: var(--space-3); } ``` This card is used for: - Guide bridge cards (discovery, reinforcement, integration) - Evidence intervention cards - Spectrum in-context nudges - Post-Turn goal connection suggestions - Mirror session "The Guide noticed..." observations The **prismatic gradient border** (via `.guide-border`) signals that the AI is actively connecting something. Feature-specific cards (Turn results, Lens goals) use their own feature color borders instead. --- ### Representing Reactive States in Static HTML Mockups Since these are static HTML files, not a live app, here's how to represent each reactive state: | Reactive Behavior | How to Show in Mockup | |---|---| | Fragment highlighting | Show 2-3 fragments already highlighted with amber glow + ◇ icon after user messages | | The Nudge | Show the nudge card at screen bottom after 5+ messages with no highlights tapped | | If-Then micro-action | Show the "Make it real" card below Turn results with a pre-filled if-then statement | | Bridge card | Show as half-height card at top of screen (below nav), overlaying normal content | | Evidence intervention | Show as card after Mirror/Turn content with 2-3 numbered proof points | | Attention prompt | Show in Lens tab below goal cards as a daily focus card | | Weekly Pulse | Show as 3-screen flow (self-report → AI read → focus) | | Spectrum nudge | Show as small inline card within the feature where it appears | | Context stability | Show as a text observation within Ritual completion screen | | Goal check-in | Show as chat-like conversation within goal detail | **Key principle:** Every reactive mockup should show the **"detected and responded" state** — the moment when the AI has already identified the pattern and is presenting its response. Don't show "loading" or "detecting" states unless that's the specific screen's purpose (like the Turn animation screen). **Data continuity:** Reactive features reference data from multiple features. Ensure mock data is cross-referenced: - If an Evidence intervention quotes "18 of 22 sessions," the Evidence Wall screen should show the same stat - If a bridge card says "4 Mirror sessions this week," the Mirror Home screen should show a matching session count - If the Weekly Pulse says "catastrophizing dropped," the Spectrum screens should reflect the same trend --- ## 14. 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 - Guide: Discovery bridges only, 1 check-in/month/goal, 3 attention prompts/week, self-report Pulse only ### Prism Tier ($7.99/month) - Unlimited Turns & Mirror sessions + if-then micro-action cards on Turn results - Unlimited goals + weekly check-ins + daily attention prompts - Full Spectrum access - Advanced Ritual customization - Full Guide: All 5 patterns (check-ins, all bridges, daily prompts, evidence interventions, full Pulse) - 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 --- ## 15. Polish & Visual Quality Standards This section defines the quality bar for "polished" screens. Every screen should meet these standards before being considered complete. ### 15.1 Visual Refinement Principles | Principle | Implementation | |-----------|---------------| | **Anti-aliased text** | `body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }` | | **Consistent surface depth** | Cards float above background (navy on void). Inputs are recessed (deep-glass). Modals are elevated (navy with twilight border). | | **Breathing life** | Every screen with decorative elements should include at least one breathing animation (6s cycle) | | **Glow, not shadow** | All interactive highlights use `box-shadow: 0 0 Npx rgba(color, 0.2-0.3)`. No `filter: drop-shadow` on UI elements. | | **Jewel tone gradients on fragments** | Fragment diamonds always use gradient fills (light → dark stops), never flat colors. Include the specular highlight (white overlay on top-right facet). | | **Micro-interactions** | Buttons have hover (slight lighten) and active (slight darken) states. Cards have hover (border color shift or subtle glow). | | **Smooth transitions** | All state changes use CSS transitions: `transition: all 0.2s ease-out` minimum. | | **Content hierarchy** | Every screen has exactly one primary heading, one primary CTA, and a clear visual flow from top to bottom. | ### 15.2 Spacing & Layout Standards | Element | Spacing Rule | |---------|-------------| | Screen content padding | `var(--space-4)` (16px) horizontal | | Section spacing | `var(--space-8)` (32px) between major sections | | Card internal padding | `var(--space-4)` (16px) standard, `var(--space-3)` (12px) compact | | Between cards in a list | `var(--space-3)` (12px) | | Between label and content | `var(--space-2)` (8px) | | Between icon and text | `var(--space-2)` (8px) | | Status bar to content | Automatic via `.status-bar` height | | Content to tab bar | Automatic via `.screen-content` flex | ### 15.3 Animation Standards | Animation | Duration | Easing | Trigger | |-----------|----------|--------|---------| | Breathing (decorative) | 6s | ease-in-out infinite | Always running on decorative elements | | Fade in (content) | 0.3s | ease-out | On screen load or content reveal | | Slide up (modals/sheets) | 0.35s | ease-out | Modal present | | Button press | 0.15s | ease-out | Active state | | Focus ring | 0.2s | ease-out | Input focus | | Turn animation (full) | 1.5s total | dramatic ease-in-out | Submit trigger | | Fragment highlight | 0.4s | gentle ease-out | AI detection | | Toast appear | 0.3s | ease-out | Event trigger | ```css /* Standard breathing animation — include in every screen that has decorative elements */ @keyframes breathing { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } /* Standard fade in — for content appearing on load */ @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Pulse for fragments */ @keyframes pulse { 0%, 100% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.3); } 50% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.5); } } ``` ### 15.4 Border & Divider Standards - Card borders: `1px solid var(--twilight)` — subtle, never heavy - Section dividers: `1px solid var(--twilight)` with `var(--space-6)` margin above and below - Active/focus borders: feature color (e.g., `1px solid var(--amethyst)` for Turn-related inputs) - Guide borders: prismatic gradient via `::before` pseudo-element - **No solid white borders anywhere** — always use twilight or translucent jewel tones --- ## 16. Mock Data Guidelines All mock data in screens should be realistic, emotionally appropriate, and consistent across related screens. ### 16.1 User Profile Use this consistent mock user across all screens: - **Name:** Alex (gender-neutral) - **Member since:** January 2026 - **Coaching style:** Compassionate Friend - **Subscription:** Free tier (show upgrade prompts where appropriate) ### 16.2 Thought Content Mock thoughts and reframes should be: - **Realistic** — things real people actually think, not textbook examples - **Moderate emotional weight** — not trivial ("I lost my pen") and not crisis-level ("I want to end it") - **Varied** — cover work stress, relationships, self-doubt, productivity, social anxiety - **Consistent** — the same thought referenced in Turn History should match Turn Results **Sample thoughts for mockups:** - "I completely bombed my presentation today and everyone saw" - "My friend didn't reply to my message. They must be upset with me." - "I'm never going to be good enough for this promotion" - "Everyone else seems to have it figured out except me" - "I should be further along in life by now" **Sample reframes:** - Perspective Shift: "One presentation doesn't define your capability. What went well that you're overlooking?" - Evidence Check: "Think of three presentations you've done well. The evidence contradicts 'always bombing it.'" - Action Step: "Before your next presentation, rehearse the opening 3 times. Preparation builds confidence." ### 16.3 Date & Time Consistency - Use **February 2026** as the current month - Status bar always shows **9:41** (Apple convention) - Recent activity dates: Feb 20, Feb 19, Feb 18, etc. - Streak counts: 14 days (Mirror), 7 days (Ritual) - Goal timelines: 30-day goals with realistic progress (60–80% complete) ### 16.4 Statistics - Total Turns: 47 - Mirror Sessions: 23 - Goals Completed: 2 of 5 - Streak Days: 14 - Top Distortion: Catastrophizing (34% of fragments) - Second Distortion: Black-and-White Thinking (22%) ### 16.5 Voice & Tone in Mock Content Follow the Kalei brand voice strictly in all AI-generated mock text: | Do | Don't | |----|-------| | "Let's see what this looks like from another angle." | "Let's turn that frown upside down!" | | "There it is. A pattern worth keeping." | "Amazing job! You're so strong!" | | "Still here. Ready when you are." | "We miss you! Come back!" | | "Fragment detected" | "Negative thought identified" | | "Your Turn" | "Your reframe" | | "Your Gallery" | "Your history" | | "Prism" | "Premium" or "Pro" | **Words to avoid in ALL mockup text:** - "Fix," "heal," "transform," "positive vibes," "journey," "self-care" - "Unlock your potential," "you've got this!" - Any exclamation marks in regular UI text (only for milestone celebrations, max 1 per message) --- ## 17. Accessibility Standards Every screen must meet these accessibility requirements: ### 17.1 Visual Accessibility - **Contrast ratios:** All text meets WCAG 2.1 AA minimum (4.5:1 normal text, 3:1 large text) - **Color is never the only indicator:** Fragment highlights use underline + icon + color. Success/error uses icon + color + text. - **Touch targets:** Minimum 44×44px for all interactive elements - **No native emoji anywhere** — use geometric SVG abstractions for mood indicators ### 17.2 Motion Accessibility Include this comment in every screen's `