96 KiB

Raw Blame History

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 <style> block. All JS goes in a <script> block. No frameworks, no npm, no React — pure HTML + CSS + JS.

1.1 Product Context

Kalei is an AI-powered mental wellness app grounded in cognitive behavioral science. Its core metaphor: a kaleidoscope takes broken fragments of glass and reveals them as beautiful, symmetrical patterns. It never changes the pieces — it changes the angle.

The Four Pillars:

Pillar	Feature	Optical Element	Color	User Need
Awareness	The Mirror	Mirror	Amber	"I need to process"
Perspective	The Kaleidoscope (Turn)	Kaleidoscope	Amethyst	"I need to see this differently"
Direction	The Lens	Lens	Emerald	"I need to move forward"
Intelligence	The Spectrum	Prism	Prismatic	"I need to understand myself"

The Four Connectors:

Feature	Science Pillar	User Need
The Rehearsal	Visualization & Mental Imagery	"I need to prepare" (Lens sub-feature)
The Ritual	Habit Formation	"I need consistency"
The Evidence Wall	Self-Efficacy: Mastery Experiences	"I need proof I can do this" (You tab)
The Guide	Self-Regulation & Feedback Loops	"I need someone walking with me" (Cross-feature)

1.2 Technical Architecture Context (for realistic mock data)

The actual app will be built with:

Mobile: React Native + Expo SDK 54+ (iOS & Android)
Backend: Node.js Fastify 5.x modular monolith
Database: PostgreSQL 16 + Redis 7
AI Primary: DeepSeek V3.2 via OpenRouter (provider-pinned to US/EU infrastructure)
AI Fallback: Claude Haiku 4.5 via OpenRouter
Auth: JWT + refresh token rotation + Apple/Google SSO
Billing: Self-hosted entitlement authority via App Store / Google Play server APIs
Monetization: Free tier (3 turns/day, 1 mirror session/day, 3 goals max) + Prism tier ($7.99/month, unlimited)

Use this context when crafting realistic mock data — API response times, data structures, pricing, and tier gating should feel authentic.

2. Agent Team Workflow

This section defines how agent teams should coordinate when building, modifying, or polishing screens.

2.1 Task Types

Task Type	Description	Scope
Build	Create a new screen from scratch following the spec	Single screen
Polish	Improve visual quality, fix inconsistencies, enhance animations	Single or batch
Update	Add new content, components, or features to existing screen	Single screen
Consistency Pass	Ensure a group of screens share identical chrome, spacing, and patterns	Screen group (e.g., all Mirror screens)
Cross-Screen Audit	Verify navigation links, shared components, and design token usage across all screens	Full inventory

2.2 Agent Responsibilities

Before modifying any screen:

Read this entire instructions file
Read assets/design-system.css to understand available tokens and components
Read the target screen's current HTML to understand its state
Read at least one "reference screen" from the same feature group for consistency
Check the screen's spec in Section 9 for required elements

While modifying:

Use CSS custom properties from design-system.css — never hardcode hex colors
Use typography classes from the design system — never raw font-size declarations
Inline all SVGs — never reference external image URLs
Keep all screen-specific CSS inside a <style> block in the <head>
Keep all JS inside a <script> block before </body>
Test that the screen renders correctly at 390×844px

After modifying:

Run through the Quality Checklist (Section 19)
Verify navigation links to adjacent screens work
Confirm the screen looks correct when opened directly in a browser (no server needed)

2.3 Parallel Work Guidelines

Screens can be worked on in parallel within the same feature group as long as agents:

Don't modify design-system.css simultaneously (coordinate changes)
Use consistent mock data across related screens (same user name, same dates, same thoughts)
Follow the shared component patterns exactly (tab bar, nav header, status bar)

Safe to parallelize: Different feature groups (e.g., one agent on Mirror screens while another does Lens screens)

Requires coordination: Screens that share content (e.g., Turn Results #13 and Guide Evidence Turn #73 both show reframe blocks)

2.4 File Naming & Path Conventions

Screen files: [number]-[feature]-[descriptor].html (e.g., 13-turn-results.html)
Asset path from screens: ../../assets/ (screens are in screens/[feature]/)
Cross-screen links: ../[feature]/[filename].html (e.g., ../turn/10-turn-home.html)
Design system import: <link rel="stylesheet" href="../../assets/design-system.css">

3. Current Build Status

3.1 Built Screens (64 of 76)

Directory	Screens	Status
`onboarding/`	01-splash through 09-welcome-complete	All 9 built
`turn/`	10-turn-home through 14-turn-history	All 5 built
`mirror/`	15-mirror-home through 19-mirror-reflection	All 5 built
`lens/`	20-lens-dashboard through 30-rehearsal-complete	All 11 built
`gallery/`	31-gallery-all through 34-gallery-search	All 4 built
`you/`	35-you-profile through 43-evidence-wall-detail	All 9 built
`ritual/`	44-ritual-templates through 49-ritual-streak	All 6 built
`spectrum/`	50-spectrum-dashboard through 57-spectrum-monthly	All 8 built
`modals/`	58-upgrade-modal through 61-pattern-share	All 4 built
`system-states/`	62-notification-settings through 64-account-deletion	All 3 built

3.2 Missing Screens (12 of 76)

Directory	Screens	Status
`guide/`	65-guide-checkin-conversation through 76-guide-pulse-focus	NOT BUILT — 0 of 12

The screens/guide/ directory needs to be created. All 12 Guide screens (65–76) are unbuilt. Additionally, screens 13 (Turn Results) and 19 (Mirror Reflection) need Guide enhancement updates per Section 10B.

3.3 Known Issues to Address During Polish

When polishing existing screens, watch for these common issues:

Inconsistent tab bar SVGs — some screens may have slightly different tab bar icon shapes or sizes
Hardcoded colors — some screens may use hex codes instead of var(--color) custom properties
Missing hover/active states — buttons and interactive elements need state definitions
Inconsistent spacing — some screens use raw pixel values instead of var(--space-N) tokens
Missing breathing animations — decorative elements should pulse with 6s ease-in-out cycle
Overflow issues — content may overflow the 844px device height on some screens
Missing glow effects — interactive elements should glow, not cast traditional shadows
Stale dates — mock data should use February 2026 dates

4. Repository Map

Kalei/
├── docs/
│   ├── brand/
│   │   ├── kalei-brand-guidelines.md      ← Color palette, typography, voice & tone (18 sections)
│   │   └── kalei-brand-metaphor.md        ← Kaleidoscope metaphor deep dive
│   ├── product/
│   │   ├── kalei-complete-user-journey.md  ← **PRIMARY REF** — all 76 screens described
│   │   ├── kalei-complete-design.md        ← Feature specs, interactions, flows, science basis
│   │   ├── kalei-mirror-feature.md         ← Mirror (journaling) deep dive + fragment detection
│   │   └── kalei-spectrum-phase2.md        ← Spectrum analytics: River, Glass, Impact, Rhythm, Growth
│   ├── technical/
│   │   ├── kalei-user-journey-technical-map.md ← API endpoints, DB schemas, component tree
│   │   ├── kalei-system-architecture-plan.md   ← Tech stack: Fastify, PostgreSQL, Redis, Expo, DeepSeek
│   │   ├── kalei-infrastructure-plan.md        ← Server specs, AI cost model, hosting
│   │   └── kalei-claude-code-build-framework.md ← Locked toolchain versions, monorepo structure
│   └── build-phases/                      ← Phase 0–4 roadmaps for production app
│
├── initial mockups/
│   ├── claude_implementation_instructions.md  ← **THIS FILE**
│   ├── assets/
│   │   ├── design-system.css              ← **IMPORT IN EVERY SCREEN** — all tokens, components, utilities
│   │   ├── ASSET-INDEX.md                 ← Catalog of all SVG elements with usage notes
│   │   ├── preview-all-assets.html        ← Visual preview of all SVGs (open in browser)
│   │   ├── icons-tab-bar.svg              ← 5 navigation icons (active + inactive states)
│   │   ├── icons-distortions.svg          ← 10 cognitive distortion icons (amber base)
│   │   ├── icons-actions.svg              ← 30 action/UI icons (nav, save, share, dismiss, etc.)
│   │   ├── fragment-icons.svg             ← Fragment ◇ in 5 sizes (xs/sm/md/lg/xl), 8 colors
│   │   ├── decorative-shards.svg          ← Background shards, auras, dividers, ambient decoration
│   │   ├── patterns-kaleidoscope.svg      ← 7 kaleidoscope pattern variants for Gallery/Turn
│   │   ├── progress-indicators.svg        ← Rings, bars, dots, streaks for Lens/Ritual
│   │   ├── evidence-wall.svg              ← Mosaic tiles and connection system for Evidence Wall
│   │   ├── loading-animations.svg         ← Spinners, skeletons, AI thinking state references
│   │   ├── device-chrome.svg              ← Status bar, tab bar, nav header reference
│   │   └── spectrum-visualizations.svg    ← 5 analytics chart types: River, Glass, Impact, Rhythm, Growth
│   │
│   └── screens/                           ← **OUTPUT DIRECTORY**
│       ├── onboarding/                    ← Screens 1–9 (all built)
│       ├── turn/                          ← Screens 10–14 (all built)
│       ├── mirror/                        ← Screens 15–19 (all built)
│       ├── lens/                          ← Screens 20–30 (all built)
│       ├── gallery/                       ← Screens 31–34 (all built)
│       ├── you/                           ← Screens 35–43 (all built)
│       ├── ritual/                        ← Screens 44–49 (all built)
│       ├── spectrum/                      ← Screens 50–57 (all built)
│       ├── guide/                         ← Screens 65–76 (**NOT YET BUILT**)
│       ├── modals/                        ← Screens 58–61 (all built)
│       └── system-states/                 ← Screens 62–64 (all built)
│
├── logo-mockups/
│   └── finalists/
│       └── soft-elegance-final.svg        ← **LOGO & VISUAL DNA SOURCE** — study before building
│
└── research/                              ← Academic PDFs (context only, don't reference in mockups)

5. Visual DNA — The Soft-Elegance Language

Every visual decision descends from soft-elegance-final.svg. Study it before building anything.

5.1 Core Principles

Principle	How It Manifests
Crystalline geometry	Diamond ◇ as the universal shape — fragments, icons, tiles, data points
Jewel tone gradients	Each color is a gradient pair: light stop → dark stop (e.g., `#C4B5FD` → `#7C3AED` for Amethyst)
Glow, not shadow	Elements glow outward with `box-shadow: 0 0 Npx rgba(color, 0.3)`. No traditional drop shadows.
Breathing animations	Slow pulsing opacity/scale on decorative elements (6s cycle)
Prismatic color cycling	Gradient that shifts through Amethyst → Sapphire → Emerald → Amber → Rose
Dark void canvas	#050508 base with layered surfaces (#0A0E1A → #121628 → #1C2240)
Screen blend mode	Overlapping translucent elements blend additively for a light-through-glass effect
Faceted, not rounded	Moderate corner radii (10–16px), not fully rounded. Feels like cut glass, not bubbles.
Depth through luminance	Deeper surfaces are darker. Elevated surfaces are slightly lighter. No shadows — surface color creates depth.

5.2 Color System

/* Backgrounds (darkest → lightest) */
--void:        #050508;    /* Deepest bg, device frame bg */
--kalei-navy:  #0A0E1A;    /* Primary surface (cards, tab bar) */
--deep-glass:  #121628;    /* Elevated surface (inputs, modals) */
--twilight:    #1C2240;    /* Borders, dividers, inactive elements */

/* Jewel Tones — each feature "owns" a color */
--amethyst:      #8B5CF6;  /* Turn ◇ — primary accent, CTAs */
--amethyst-light:#A78BFA;  /* Lighter variant for highlights */
--amethyst-dark: #6D28D9;  /* Darker variant for pressed states */
--sapphire:      #3B82F6;  /* Gallery ▦ — info, secondary actions */
--sapphire-light:#60A5FA;
--sapphire-dark: #1D4ED8;
--emerald:       #10B981;  /* Lens ◎ — success, growth */
--emerald-light: #34D399;
--emerald-dark:  #047857;
--amber:         #F59E0B;  /* Mirror ✦ — fragments, awareness */
--amber-light:   #FCD34D;
--amber-dark:    #B45309;
--rose:          #EC4899;  /* Social, sharing, celebration */
--rose-light:    #F9A8D4;
--ruby:          #EF4444;  /* Error, destructive, crisis ONLY */
--indigo:        #6366F1;  /* Extended palette */
--indigo-light:  #818CF8;

/* Text hierarchy */
--pure-light:  #FFFFFF;    /* Titles, primary values */
--soft-light:  #E2E8F0;    /* Body text */
--dim-light:   #94A3B8;    /* Secondary text, labels */
--faint-light: #475569;    /* Tertiary, placeholders, disabled */

/* Prismatic Gradient */
--prismatic: linear-gradient(135deg, #8B5CF6, #3B82F6, #10B981, #F59E0B, #EC4899);
--prismatic-subtle: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(59,130,246,0.15), rgba(16,185,129,0.15), rgba(245,158,11,0.15), rgba(236,72,153,0.15));

Critical color rules:

Never use jewel tones for text smaller than 16px — use --pure-light or --soft-light for body text
Ruby is ONLY for errors and destructive actions — never for fragment highlighting
The prismatic gradient is for premium accents, Guide borders, and celebration moments — never for large filled areas at full opacity
All color/background combinations must meet WCAG 2.1 AA minimum contrast (4.5:1 for normal text)

5.3 Typography

/* Display: Space Grotesk — titles and hero text */
--font-display: 'Space Grotesk', 'Inter', sans-serif;

/* Body: Inter — everything else */
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

Class	Size	Weight	Line Height	Letter Spacing	Use
`.display-xl`	40px	700	48px	-0.02em	Splash, hero moments
`.display-lg`	32px	700	40px	-0.02em	Section heroes, screen titles
`.display-md`	24px	600	32px	-0.01em	Card titles
`.heading`	20px	600	28px	-0.01em	Nav titles, section heads
`.subheading`	16px	600	24px	0	Subsection heads, button text
`.body-lg`	17px	400	26px	0	Primary reading text (journal, reframes)
`.body`	15px	400	22px	0	Standard body
`.body-sm`	13px	400	18px	0.01em	Metadata, timestamps
`.label`	11px	500	16px	0.05em	Uppercase labels, section headers, badges

Typography rules:

Never center body text. Center alignment only for headlines, single-line labels, and empty states.
Use sentence case everywhere. "Turn a fragment" not "Turn A Fragment" or "TURN A FRAGMENT."
Maximum line width: 65–75 characters for body text.
Minimum text size: 13px (the body-sm class). Nothing smaller, ever.
Maintain hierarchy: every screen has one clear display or heading element.
No all-caps body text — uppercase reserved for .label token only.
Space Grotesk is for display/hero text only. Never for body text or UI elements.

5.4 Feature → Color → Icon Mapping

Tab	Feature	Color	Icon Shape	Gradient Stops
Turn	Reframing	Amethyst	Diamond ◇	`#C4B5FD` → `#7C3AED`
Mirror	Journaling	Amber	Hexagon ✦	`#FDE68A` → `#D97706`
Lens	Goals	Emerald	Circle ◎	`#6EE7B7` → `#059669`
Gallery	Collection	Sapphire	Grid ▦	`#93C5FD` → `#2563EB`
You	Profile	Soft Light	Circle ●	`#E2E8F0` → `#94A3B8`

6. Screen Template — Every File Starts Here

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=390, initial-scale=1">
  <title>Kalei — [Screen Name]</title>
  <link rel="stylesheet" href="../../assets/design-system.css">
  <style>
    /* Screen-specific styles go here */
  </style>
</head>
<body>
  <div class="device-frame">

    <!-- STATUS BAR (always present except splash) -->
    <div class="status-bar">
      <span class="time">9:41</span>
      <div class="icons">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <rect x="1" y="7" width="2.5" height="5" rx="0.5" fill="#E2E8F0" opacity="0.4"/>
          <rect x="4.5" y="5" width="2.5" height="7" rx="0.5" fill="#E2E8F0" opacity="0.6"/>
          <rect x="8" y="3" width="2.5" height="9" rx="0.5" fill="#E2E8F0" opacity="0.8"/>
          <rect x="11.5" y="1" width="2.5" height="11" rx="0.5" fill="#E2E8F0"/>
        </svg>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M 2,8 C 4,4 12,4 14,8" stroke="#E2E8F0" stroke-width="1.2" fill="none" stroke-linecap="round"/>
          <path d="M 4,10 C 6,7 10,7 12,10" stroke="#E2E8F0" stroke-width="1" fill="none" opacity="0.8" stroke-linecap="round"/>
          <circle cx="8" cy="12" r="1.2" fill="#E2E8F0"/>
        </svg>
        <svg width="24" height="12" viewBox="0 0 24 12" fill="none">
          <rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#E2E8F0" stroke-width="1" opacity="0.5"/>
          <rect x="22" y="3" width="2" height="6" rx="1" fill="#E2E8F0" opacity="0.3"/>
          <rect x="2" y="2" width="16" height="8" rx="1.5" fill="#10B981" opacity="0.9"/>
        </svg>
      </div>
    </div>

    <!-- NAV HEADER (present on non-root screens) -->
    <div class="nav-header">
      <a class="nav-back" href="#">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
          <path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </a>
      <span class="nav-title">[Title]</span>
      <span class="nav-action"><!-- optional right icon --></span>
    </div>

    <!-- SCREEN CONTENT -->
    <div class="screen-content">
      <!-- Unique screen content goes here -->
    </div>

    <!-- TAB BAR (present on main tab screens) -->
    <div class="tab-bar">
      <a class="tab-item active" data-tab="turn">
        <svg width="24" height="24" viewBox="0 0 24 24">
          <path d="M12 2L20 12L12 22L4 12Z" fill="currentColor" opacity="0.9"/>
          <path d="M12 2L20 12L12 12Z" fill="white" opacity="0.15"/>
        </svg>
        <span class="tab-label">Turn</span>
      </a>
      <a class="tab-item inactive" data-tab="mirror">
        <svg width="24" height="24" viewBox="0 0 24 24">
          <path d="M12 3L16 8L18 14L12 19L6 14L8 8Z" stroke="currentColor" fill="none" stroke-width="1.2"/>
        </svg>
        <span class="tab-label">Mirror</span>
      </a>
      <a class="tab-item inactive" data-tab="lens">
        <svg width="24" height="24" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="9" stroke="currentColor" fill="none" stroke-width="1.2"/>
          <circle cx="12" cy="12" r="4" stroke="currentColor" fill="none" stroke-width="0.8"/>
        </svg>
        <span class="tab-label">Lens</span>
      </a>
      <a class="tab-item inactive" data-tab="gallery">
        <svg width="24" height="24" viewBox="0 0 24 24">
          <rect x="3" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/>
          <rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/>
          <rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/>
          <rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/>
        </svg>
        <span class="tab-label">Gallery</span>
      </a>
      <a class="tab-item inactive" data-tab="you">
        <svg width="24" height="24" viewBox="0 0 24 24">
          <circle cx="12" cy="9" r="4" stroke="currentColor" fill="none" stroke-width="1.2"/>
          <path d="M4 20C4 16 8 14 12 14C16 14 20 16 20 20" stroke="currentColor" fill="none" stroke-width="1.2" stroke-linecap="round"/>
        </svg>
        <span class="tab-label">You</span>
      </a>
    </div>

  </div>

  <script>
    // Screen-specific interactions go here
  </script>
</body>
</html>

Template Rules

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.
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.
Status bar is always present except on the Splash screen (Screen 1).
Active tab changes color per feature — set the correct data-tab attribute and active class.
Screen content has flex: 1 and scrolls vertically. Use screen-content centered for splash/onboarding screens.
CSS <link> 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)

<!-- Inline just the Amethyst fragment diamond -->
<svg width="24" height="24" viewBox="0 0 24 24">
  <defs>
    <linearGradient id="grAmethyst" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#C4B5FD"/>
      <stop offset="100%" stop-color="#7C3AED"/>
    </linearGradient>
  </defs>
  <path d="M12 2L20 12L12 22L4 12Z" fill="url(#grAmethyst)"/>
  <path d="M12 2L20 12L12 12Z" fill="#fff" opacity="0.15"/>
</svg>

Option B: CSS recreation (preferred for backgrounds, auras, decorations)

.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 <object> or <img> for complex patterns (kaleidoscope hero, evidence wall mosaic)

<!-- Only when the full pattern is needed -->
<object data="../../assets/patterns-kaleidoscope.svg" type="image/svg+xml"
        style="width: 200px; height: 200px;"></object>

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:

<!-- Fragment in reframe block 1 -->
<linearGradient id="grReframe1" ...>
<!-- Fragment in reframe block 2 -->
<linearGradient id="grReframe2" ...>

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:

<!-- Fragment: size options xs(12) sm(16) md(24) lg(36) xl(48) -->
<svg class="fragment" width="24" height="24" viewBox="0 0 24 24">
  <defs>
    <linearGradient id="grFrag" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#C4B5FD"/>
      <stop offset="100%" stop-color="#7C3AED"/>
    </linearGradient>
    <filter id="fragGlow">
      <feGaussianBlur stdDeviation="1.5" result="b"/>
      <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
  </defs>
  <g filter="url(#fragGlow)">
    <path d="M12 2L20 12L12 22L4 12Z" fill="url(#grFrag)" opacity="0.9"/>
    <path d="M12 2L20 12L12 12Z" fill="#fff" opacity="0.15"/>
  </g>
</svg>

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:

<span class="fragment-highlight">I always mess everything up</span>
<span class="fragment-icon">
  <svg width="12" height="12" viewBox="0 0 12 12">
    <path d="M6 1L10 6L6 11L2 6Z" fill="#F59E0B"/>
    <path d="M6 1L10 6L6 6Z" fill="#fff" opacity="0.2"/>
  </svg>
</span>

8.2 Reframe Block (Turn Results)

Three perspectives shown after a Turn:

<div class="reframe-block amethyst">
  <div class="reframe-label">Perspective Shift</div>
  <div class="reframe-text">What if "messing up" is actually how you learn what works?</div>
</div>
<div class="reframe-block sapphire">
  <div class="reframe-label">Evidence Check</div>
  <div class="reframe-text">Think of three recent things you handled well.</div>
</div>
<div class="reframe-block emerald">
  <div class="reframe-label">Action Step</div>
  <div class="reframe-text">Pick one small win from today and write it down tonight.</div>
</div>

8.3 Chat Bubbles (Mirror Session)

<div class="chat-bubble user">
  I've been feeling really overwhelmed at work lately. Everything feels like it's piling up.
</div>
<div class="chat-bubble ai">
  It sounds like you're carrying a lot right now. Can you tell me more about what feels most overwhelming?
</div>

8.4 Card with Kaleidoscope Pattern

<div class="card card-pattern">
  <div class="pattern-visual">
    <!-- Inline mini kaleidoscope SVG here -->
    <svg width="120" height="120" viewBox="0 0 120 120" style="mix-blend-mode: screen;">
      <!-- 6 blades at 60° intervals, using feature color gradient -->
    </svg>
  </div>
  <div class="pattern-content">
    <div class="body" style="color: var(--soft-light);">My first reframe</div>
    <div class="body-sm" style="color: var(--dim-light);">Feb 21, 2026 • 3 perspectives</div>
  </div>
</div>

8.5 Progress Ring

<div class="progress-ring" style="width: 80px; height: 80px;">
  <svg width="80" height="80" viewBox="0 0 80 80">
    <circle cx="40" cy="40" r="34" fill="none" stroke="var(--twilight)" stroke-width="4"/>
    <circle cx="40" cy="40" r="34" fill="none" stroke="var(--emerald)" stroke-width="4"
            stroke-dasharray="213.6" stroke-dashoffset="59.8" stroke-linecap="round"/>
  </svg>
  <span class="progress-text">72%</span>
  <span class="progress-label">Complete</span>
</div>

8.6 Evidence Wall Tile

<div class="evidence-tile" style="
  width: 100px; height: 100px;
  background: var(--kalei-navy);
  border: 1px solid var(--emerald);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  box-shadow: 0 0 12px rgba(16,185,129,0.2);
">
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M12 2L20 12L12 22L4 12Z" fill="#10B981" opacity="0.8"/>
  </svg>
  <span class="body-sm" style="color: var(--emerald-light); margin-top: 4px;">Goal Met</span>
</div>

8.7 Toast Notifications

<!-- Success toast -->
<div style="
  position: absolute; top: 70px; left: 50%; transform: translateX(-50%);
  background: var(--deep-glass); border: 1px solid var(--emerald);
  border-radius: 999px; padding: 8px 20px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 0 16px rgba(16,185,129,0.2);
  animation: fadeIn 0.3s ease;
">
  <svg width="16" height="16" viewBox="0 0 16 16">
    <path d="M8 1L13 8L8 15L3 8Z" fill="#10B981"/>
  </svg>
  <span class="body-sm" style="color: var(--soft-light); font-weight: 500;">Turn saved</span>
</div>

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

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:

Collapse (0.3s): Input text compresses into a single diamond fragment at center
Multiply (0.4s): One fragment splits into 3, each drifting to a position
Crystallize (0.5s): Each fragment rotates 60° and settles into its reframe block position
Settle (0.3s): Reframe text fades in below each fragment

Implement with CSS @keyframes and animation-delay staggering:

@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:

Text gets amber underline (grows from left to right, 0.4s)
Tiny fragment ◇ pulses into existence beside the text
A subtle amber glow radiates from the highlighted text
Fragment detail card slides up as a half-sheet

9.3 Kaleidoscope Pattern Generation

For Turn results and Gallery cards, generate unique-looking patterns:

<svg width="120" height="120" viewBox="0 0 120 120" style="mix-blend-mode: screen;">
  <defs>
    <linearGradient id="blade1" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#C4B5FD" stop-opacity="0.7"/>
      <stop offset="100%" stop-color="#7C3AED" stop-opacity="0.3"/>
    </linearGradient>
  </defs>
  <!-- 6 blades at 60° intervals -->
  <g transform="translate(60,60)">
    <g><path d="M0,0 L8,-45 L0,-50 L-8,-45Z" fill="url(#blade1)"/></g>
    <g transform="rotate(60)"><path d="M0,0 L8,-45 L0,-50 L-8,-45Z" fill="url(#blade1)"/></g>
    <g transform="rotate(120)"><path d="M0,0 L8,-45 L0,-50 L-8,-45Z" fill="url(#blade1)"/></g>
    <g transform="rotate(180)"><path d="M0,0 L8,-45 L0,-50 L-8,-45Z" fill="url(#blade1)"/></g>
    <g transform="rotate(240)"><path d="M0,0 L8,-45 L0,-50 L-8,-45Z" fill="url(#blade1)"/></g>
    <g transform="rotate(300)"><path d="M0,0 L8,-45 L0,-50 L-8,-45Z" fill="url(#blade1)"/></g>
    <!-- Core glow -->
    <circle r="8" fill="white" opacity="0.15" filter="blur(3px)"/>
  </g>
</svg>

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:

.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)

.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.

.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:

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)
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:

Always start with what went well (evidence first, obstacles second)
Reference real data — specific numbers, dates, actions
Adjust if-then plans collaboratively based on what actually happened
Close every check-in with a concrete Evidence Wall proof point
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):

Self-report (fragment-state 5-point scale)
AI read (4-5 specific observations with jewel-tone dots)
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.

<!-- Proactive AI Insight Card Template -->
<div class="ai-insight-card guide-border">
  <div class="ai-insight-header">
    <span class="fragment-icon">◇</span>
    <span class="ai-insight-title">[Header text]</span>
  </div>
  <div class="ai-insight-body">
    <p>[Observation text with <strong>key data</strong> in bold]</p>
  </div>
  <div class="ai-insight-actions">
    <button class="btn-primary btn-sm">[Primary CTA]</button>
    <button class="btn-ghost btn-sm">[Dismiss CTA]</button>
  </div>
</div>

.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

/* 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 <style> block for awareness (actual implementation will be in the production app):

/* Respect "Reduce Motion" — in production, wrap animations in:
   @media (prefers-reduced-motion: reduce) { .animated { animation: none; } }
*/

17.3 Semantic Structure

Use proper heading hierarchy (h1 > h2 > h3, no skipping levels)
Buttons should be <button> elements, not styled <div>s
Links should be <a> elements with meaningful href values
Form inputs should have associated <label> elements
Images/SVGs should have aria-label or role="img" with descriptive text

18. Cross-Screen Consistency Protocol

When working on multiple screens, ensure these elements are identical across all instances:

18.1 Chrome Elements (must match exactly)

Element	Rule
Status bar	Identical SVG markup across all screens. Time: 9:41. Battery: green.
Tab bar	Identical SVG icons, labels, and structure. Only `active`/`inactive` class changes.
Nav header	Same height, same back chevron SVG, same centered title styling.
Device frame	390×844px, same corner radius, same background.

18.2 Shared Components (must match pattern)

Component	Consistency Rule
Fragment ◇	Same SVG path (`M12 2L20 12L12 22L4 12Z`), same gradient structure, same specular highlight
Cards	Same border radius (16px), same background (`--kalei-navy`), same border style (`1px solid --twilight`)
Buttons	Same heights (52px primary, 44px secondary), same radius (12px/10px), same text styling
Chips/Tags	Same height (32px), same pill radius, same background (`--deep-glass`)
Section headers	Same `.label` styling (11px, 500 weight, 0.05em spacing, uppercase)
Breathing auras	Same animation timing (6s), same filter blur (40–60px), same opacity range

18.3 Cross-Reference Checklist

When a screen references content from another screen, ensure consistency:

Turn History (#14) cards should match the data shown in Turn Results (#13)
Gallery All (#31) pattern cards should match Gallery Detail (#33)
Mirror Home (#15) recent sessions should match Mirror Session (#16) content
You Profile (#35) stats should match You Stats (#36) data
Evidence Wall states (#39–42) should show progression using the same tile designs
Guide bridge screens (#67–69) should accurately reproduce the base screen layouts they overlay

19. 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)

01-splash.html — establishes breathing logo animation
02-welcome.html — establishes onboarding layout + hero pattern
10-turn-home.html — establishes tab bar + greeting + card layout
13-turn-results.html — establishes reframe blocks + distortion chips

Phase 2: Core Loop

03-fragment-intro.html
04-turn-demo.html
05-style-selection.html
06-notifications.html
07-account-creation.html
08-first-turn.html
09-welcome-complete.html
11-turn-input-active.html
12-turn-animation.html
14-turn-history.html

Phase 3: Mirror Feature

15-mirror-home.html
16-mirror-session.html
17-mirror-fragment-highlight.html
18-mirror-fragment-detail.html
19-mirror-reflection.html

Phase 4: Lens + Rehearsal

20-lens-dashboard.html
21-lens-create-step1.html through 26-lens-create-step6.html
27-lens-goal-detail.html
28-lens-affirmation.html
29-rehearsal-session.html
30-rehearsal-complete.html

Phase 5: Gallery + You

31-gallery-all.html
32-gallery-keepsakes.html
33-gallery-detail.html
34-gallery-search.html
35-you-profile.html
36-you-stats.html
37-you-settings.html
38-you-subscription.html

Phase 6: Evidence Wall + Ritual

39-evidence-wall-empty.html
40-evidence-wall-early.html
41-evidence-wall-mid.html
42-evidence-wall-full.html
43-evidence-wall-detail.html
44-ritual-templates.html
45-ritual-morning.html
46-ritual-evening.html
47-ritual-quick.html
48-ritual-complete.html
49-ritual-streak.html

Phase 7: Spectrum (Phase 2)

50-spectrum-dashboard.html
51-spectrum-river.html
52-spectrum-glass.html
53-spectrum-impact.html
54-spectrum-rhythm.html
55-spectrum-growth.html
56-spectrum-weekly.html
57-spectrum-monthly.html

Phase 7B: The Guide (Active Coaching Layer)

65-guide-checkin-conversation.html
66-guide-checkin-summary.html
67-guide-bridge-discovery.html
68-guide-bridge-reinforcement.html
69-guide-bridge-integration.html
70-guide-attention-prompt.html
71-guide-moment-log.html
72-guide-evidence-mirror.html
73-guide-evidence-turn.html
74-guide-pulse-report.html
75-guide-pulse-read.html
76-guide-pulse-focus.html
Update 13-turn-results.html with if-then micro-action card + goal connection
Update 19-mirror-reflection.html with Guide noticed section

Phase 8: System & Modals

58-upgrade-modal.html
59-rate-limit.html
60-crisis-response.html
61-pattern-share.html
62-notification-settings.html
63-data-export.html
64-account-deletion.html

20. Agent Review Protocol

Every screen modification should be validated against this protocol before being considered complete.

20.1 Pre-Modification Checklist

Before touching a screen:

Read this instructions file (at minimum: sections 1, 2, 5, 8, 15, 16, 17, 18)
Read design-system.css to know available tokens
Read the screen's current HTML fully
Read at least one sibling screen (same feature group) for consistency reference
Identify the screen's spec in Section 11

20.2 Post-Modification Quality Gates

After modifying a screen, verify ALL of these:

Structure:

Device frame renders at exactly 390 × 844px with 44px rounded corners
Status bar shows 9:41, signal bars, wifi icon, green battery (unless splash screen)
Tab bar (if present) has correct active tab with feature color
Nav header (if present) has back chevron and centered title
Content doesn't overflow the device frame vertically
Scrollable areas have hidden scrollbars

Design System Compliance:

All colors use CSS custom properties (var(--amethyst), not #8B5CF6)
All text uses design system typography classes (no raw font-size declarations)
All spacing uses design system tokens (var(--space-4), not 16px)
All radii use design system tokens (var(--radius-lg), not 12px)
Buttons follow the component system (.btn-primary, .btn-secondary, .btn-ghost)

Visual Polish:

Fragment diamonds use gradient fills with specular highlight
Glow effects use box-shadow with color at 0.2–0.3 opacity
Breathing animations use 6s ease-in-out infinite cycle
No native emoji anywhere — geometric SVG abstractions only
Cards have --kalei-navy background with --twilight borders
Interactive elements have hover/active states
Transitions use minimum 0.2s ease-out
Text rendering uses -webkit-font-smoothing: antialiased

Content:

Mock data uses "Alex" as user name
Dates are in February 2026
Brand voice is correct (no "fix," "heal," "journey," etc.)
Sentence case used throughout (not Title Case)
No exclamation marks in regular UI text

Self-Containment:

All SVGs are inlined (no broken external image references)
CSS link points to ../../assets/design-system.css (correct relative path)
No CDN dependencies except Google Fonts (loaded by design-system.css)
File opens correctly in browser without a server
Links between screens use correct relative paths (../feature/filename.html)

21. Key Documents to Read

Read these documents in this order for full context:

This file — you're here
assets/ASSET-INDEX.md — what SVG elements exist and how to use them
assets/design-system.css — all tokens, components, utilities, animations
docs/product/kalei-complete-user-journey.md — every screen described in narrative detail
docs/product/kalei-complete-design.md — feature specs, interactions, flows, scientific basis
docs/brand/kalei-brand-guidelines.md — voice, tone, colors, typography, motion, accessibility (18 sections)
docs/brand/kalei-brand-metaphor.md — kaleidoscope metaphor, vocabulary, emotional framework
docs/product/kalei-mirror-feature.md — Mirror deep dive: fragment detection, session flow, reflection
docs/product/kalei-spectrum-phase2.md — Spectrum analytics: 5 visualization types, weekly/monthly summaries
docs/technical/kalei-user-journey-technical-map.md — API endpoints, DB schemas, component tree (for realistic mock data)
docs/technical/kalei-system-architecture-plan.md — Tech stack, AI model routing, billing, services
docs/technical/kalei-infrastructure-plan.md — Server specs, AI cost model ($0.26/MTok DeepSeek, $1.00/MTok Haiku)
logo-mockups/finalists/soft-elegance-final.svg — the visual DNA source

Built for Kalei — Same pieces. New angle.

96 KiB Raw Blame History Unescape Escape