letsbe
/
kalei
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
kalei/initial mockups/claude_implementation_instr...

47 KiB
Raw Blame History

Kalei — Claude Code Implementation Instructions

Purpose: This document tells Claude Code everything it needs to know to build pixel-perfect, interactive HTML mockups for every screen in the Kalei app.

Read this file first, then follow the build order at the bottom.

1. What You're Building

You are building 64 interactive HTML mockup screens for Kalei, a mobile mental wellness app. Each screen is a standalone .html file that:

  • Renders at 390 × 844px (iPhone 14 viewport) inside a rounded device frame
  • Uses the shared design-system.css for all tokens, typography, components, and layout
  • References SVG assets from the assets/ folder for icons, patterns, decorations, and visualizations
  • Includes micro-interactions and state transitions using CSS animations + minimal vanilla JS
  • Can be viewed in any browser by opening the file directly (no build step, no server)

Output format: Single-file HTML per screen. All CSS beyond design-system.css goes in a <style> block. All JS goes in a <script> block. No frameworks, no npm, no React — pure HTML + CSS + JS.

2. Repository Map

Kalei/
├── docs/
│   ├── brand/
│   │   ├── kalei-brand-guidelines.md      ← Color palette, typography, voice & tone
│   │   └── kalei-brand-metaphor.md        ← Kaleidoscope metaphor deep dive
│   ├── product/
│   │   ├── kalei-complete-user-journey.md  ← **PRIMARY REF** — all 64 screens described
│   │   ├── kalei-complete-design.md        ← Feature specs, interactions, flows
│   │   ├── kalei-mirror-feature.md         ← Mirror (journaling) deep dive
│   │   └── kalei-spectrum-phase2.md        ← Spectrum analytics specs
│   ├── technical/
│   │   ├── kalei-user-journey-technical-map.md ← API endpoints, DB schemas, component tree
│   │   └── kalei-system-architecture-plan.md   ← Tech stack, infrastructure
│   └── build-phases/                      ← Phase 0–4 roadmaps
│
├── initial mockups/
│   ├── claude_implementation_instructions.md  ← **THIS FILE**
│   ├── assets/
│   │   ├── design-system.css              ← **IMPORT IN EVERY SCREEN**
│   │   ├── ASSET-INDEX.md                 ← Catalog of all SVG elements
│   │   ├── preview-all-assets.html        ← Visual preview of all SVGs
│   │   ├── icons-tab-bar.svg              ← 5 navigation icons (active + inactive)
│   │   ├── icons-distortions.svg          ← 10 cognitive distortion icons
│   │   ├── icons-actions.svg              ← 30 action/UI icons
│   │   ├── fragment-icons.svg             ← Fragment ◇ in 5 sizes, 8 colors
│   │   ├── decorative-shards.svg          ← Background shards, auras, dividers
│   │   ├── patterns-kaleidoscope.svg      ← 7 kaleidoscope pattern variants
│   │   ├── progress-indicators.svg        ← Rings, bars, dots, streaks
│   │   ├── evidence-wall.svg              ← Mosaic tiles and connection system
│   │   ├── loading-animations.svg         ← Spinners, skeletons, AI thinking
│   │   ├── device-chrome.svg              ← Status bar, tab bar, nav header
│   │   └── spectrum-visualizations.svg    ← 5 analytics chart types
│   │
│   └── screens/                           ← **OUTPUT DIRECTORY**
│       ├── onboarding/                    ← Screens 1–9
│       ├── turn/                          ← Screens 10–14
│       ├── mirror/                        ← Screens 15–19
│       ├── lens/                          ← Screens 20–30
│       ├── gallery/                       ← Screens 31–34
│       ├── you/                           ← Screens 35–43
│       ├── ritual/                        ← Screens 44–49
│       ├── spectrum/                      ← Screens 50–57
│       ├── modals/                        ← Screens 58–61
│       └── system-states/                 ← Screens 62–64 + loading/error/offline
│
├── logo-mockups/
│   └── finalists/
│       └── soft-elegance-final.svg        ← **LOGO & VISUAL DNA SOURCE**
│
└── research/                              ← Academic PDFs (context only, don't reference)

3. Visual DNA — The Soft-Elegance Language

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

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

3.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 */
--sapphire:    #3B82F6;    /* Gallery ▦ — info */
--emerald:     #10B981;    /* Lens ◎ — success, growth */
--amber:       #F59E0B;    /* Mirror ✦ — fragments, awareness */
--rose:        #EC4899;    /* Social, sharing */
--ruby:        #EF4444;    /* Error, destructive, crisis */
--indigo:      #6366F1;    /* Extended palette */

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

3.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 Use
.display-xl 40px 700 Splash, hero moments
.display-lg 32px 700 Section heroes
.display-md 24px 600 Card titles
.heading 20px 600 Nav titles, section heads
.subheading 16px 600 Subsection heads
.body-lg 17px 400 Primary reading text (journal, reframes)
.body 15px 400 Standard body
.body-sm 13px 400 Metadata, timestamps
.label 11px 500 Uppercase labels, section headers

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

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

  1. Tab bar is only present on the 5 root tab screens and their immediate children (Turn Home, Mirror Home, Lens Dashboard, Gallery All Patterns, You Profile). Sub-screens (detail views, creation flows) use nav-header + back button instead, no tab bar.
  2. Nav header is hidden on root tab screens (tab bar acts as navigation). Show it on all sub-screens with a back chevron and centered title.
  3. Status bar is always present except on the Splash screen (Screen 1).
  4. Active tab changes color per feature — set the correct data-tab attribute and active class.
  5. Screen content has flex: 1 and scrolls vertically. Use screen-content centered for splash/onboarding screens.

5. SVG Asset Usage Guide

5.1 How to Use SVGs in Mockups

The SVG files are reference sheets — each contains multiple elements arranged on a canvas for visual cataloging. You should not embed the entire SVG file. Instead:

Option A: Inline the specific SVG element (preferred for icons and small elements)

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

5.2 Asset → Screen Mapping

SVG File Used In Screens
icons-tab-bar.svg All tab bar screens (reference for inline SVGs)
icons-distortions.svg Mirror Fragment Detail (#18), Mirror Reflection (#19), Spectrum (#50–57)
icons-actions.svg Every screen — navigation, actions, status indicators
fragment-icons.svg Turn Results (#13), Mirror Highlight (#17), Evidence Wall (#39–43)
decorative-shards.svg Onboarding (#2–9), Turn Home (#10), splash backgrounds
patterns-kaleidoscope.svg Splash (#1), Welcome (#2), Turn Animation (#12), Gallery Detail (#33), Pattern Share (#61)
progress-indicators.svg Lens Dashboard (#20), Ritual Streak (#49), You Stats (#36)
evidence-wall.svg Evidence Wall screens (#39–43)
loading-animations.svg System states, Turn Animation (#12), AI Thinking states
device-chrome.svg Reference for status bar, tab bar, nav header (already in template)
spectrum-visualizations.svg Spectrum screens (#50–57)

5.3 The Fragment ◇ — Universal Element

The diamond fragment ◇ appears everywhere. Build it as a reusable inline SVG:

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

6. Component Patterns

6.1 Fragment Highlight (Mirror Feature)

When AI detects a cognitive distortion in journal text, that text gets an amber underline highlight with a pulsing fragment icon:

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

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

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

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

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

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

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

7. Interaction Patterns

7.1 The Turn Animation Sequence

The signature moment. When a user submits a thought for reframing:

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

Implement with CSS @keyframes and animation-delay staggering:

@keyframes turnCollapse {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.3) translateY(-50px); }
}
@keyframes turnMultiply {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1) translateX(var(--offset-x)) translateY(var(--offset-y)); }
}
@keyframes turnSettle {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

7.2 Fragment Detection Animation (Mirror)

When AI detects a cognitive distortion mid-session:

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

7.3 Kaleidoscope Pattern Generation

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

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

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

8. The 10 Cognitive Distortions

These appear in Mirror as detected "fragments." Each has an icon, color tint, and label:

# Distortion Icon Concept Detection Example
1 Catastrophizing Shattered diamond with explosion lines "Everything is going to fall apart"
2 Black-and-White Half-filled diamond (split) "I always fail" / "It's never good enough"
3 Mind Reading Diamond with eye inside "They probably think I'm stupid"
4 Fortune Telling Diamond with spiral/clock "This will definitely go wrong"
5 Personalization Diamond with arrow pointing inward "It's all my fault"
6 Discounting Positives Diamond with minus/strikethrough "That doesn't count"
7 Emotional Reasoning Diamond with wave/heart "I feel it, so it must be true"
8 Should Statements Diamond with gavel/ruler "I should be better by now"
9 Labeling Diamond with tag "I'm such a failure"
10 Overgeneralization Diamond with infinite loop "This always happens to me"

All distortion icons use Amber as their base color since they're detected in Mirror.

9. Screen-by-Screen Build Specifications

Onboarding (Screens 1–9) → screens/onboarding/

Screen 1: 01-splash.html

  • No status bar, no nav, no tab bar
  • Full device-frame is #050508 void
  • Centered: breathing kaleidoscope logo (from soft-elegance-final.svg simplified — 6 blades, core glow, slow rotation)
  • Below logo: "Kalei" in Space Grotesk 32px, #E2E8F0
  • Animation: logo fades in (0.5s), breathes for 1.5s, auto-transitions (add "tap to continue" fallback)

Screen 2: 02-welcome.html

  • Status bar visible
  • Centered layout (.screen-content.centered)
  • Hero: 6-blade prismatic kaleidoscope pattern (large, ~200px), breathing animation
  • Below: "Same pieces." line 1, "New angle." line 2 — Space Grotesk display-lg
  • Subtle breathing aura behind pattern (amethyst tint)
  • CTA: "See how it works" — .btn-primary full width at bottom
  • No tab bar, no nav header

Screen 3: 03-fragment-intro.html

  • Single amber fragment ◇ centered, pulsing with glow
  • Copy: "Your thoughts are like pieces of glass in a kaleidoscope."
  • Tap interaction: fragment pulses larger, then copy continues: "Sometimes you see sharp edges. Sometimes beautiful patterns."
  • CTA: "Next" at bottom

Screen 4: 04-turn-demo.html

  • Pre-filled thought: "I always mess everything up" in a text card
  • Auto-animated Turn sequence plays after 1s delay
  • Shows the collapse → multiply → crystallize → settle animation
  • 3 reframe blocks appear with sample perspectives
  • CTA: "That's the Turn" → next screen

Screen 5: 05-style-selection.html

  • Heading: "Choose your coaching style"
  • 4 radio options using .radio-option:
    • Stoic Clarity — "Direct truths, no sugarcoating"
    • Compassionate — "Warmth first, gentle nudges"
    • Pragmatic — "Practical steps, skip the fluff"
    • Growth-Oriented — "Challenge me to stretch"
  • Each has a small icon (inline SVG fragment in the matching style)
  • CTA: "Continue" — enabled when one is selected

Screen 6: 06-notifications.html

  • Centered layout
  • Icon: bell with fragment accent
  • Heading: "Stay on track"
  • Body: "Gentle reminders to check in with yourself"
  • Two buttons: "Allow Notifications" (primary), "Not now" (ghost)

Screen 7: 07-account-creation.html

  • Apple Sign In button (full width, dark with Apple logo)
  • Google Sign In button (full width, outlined)
  • Divider with "or"
  • Email input + Password input
  • "Create Account" primary button
  • "Already have an account? Sign in" ghost link

Screen 8: 08-first-turn.html

  • Heading: "What's on your mind?"
  • Large textarea with placeholder: "Type a thought that's been bothering you..."
  • Fragment hint: small dim text "The Turn will show you new angles"
  • Submit button: "Turn the kaleidoscope" (amethyst primary)
  • Decorative: subtle amethyst breathing aura behind textarea

Screen 9: 09-welcome-complete.html

  • Centered layout
  • Personalized kaleidoscope pattern (using their coaching style color)
  • Heading: "You're ready"
  • Subtext: "Your kaleidoscope is set. Let's find some new angles."
  • CTA: "Enter Kalei" — transitions to Turn Home

Turn Tab (Screens 10–14) → screens/turn/

Screen 10: 10-turn-home.html

  • Tab bar with Turn active (amethyst)
  • No nav header (root tab screen)
  • Greeting: "Good morning, [Name]" — heading class
  • Subtext: "What's weighing on you?" — body, dim-light
  • Large textarea card with rounded corners, deep-glass bg
  • Placeholder: "Something happened today..."
  • Below textarea: recent Turn history cards (2–3 sample cards with mini kaleidoscope patterns)
  • Section header: "RECENT TURNS" with "See all" action link
  • Floating action: "Turn the kaleidoscope" button at bottom (above tab bar)
  • Breathing aura behind greeting area

Screen 11: 11-turn-input-active.html

  • Same as Turn Home but textarea is focused (amethyst border glow)
  • Text typed: "I completely bombed my presentation today and everyone saw"
  • Character count in bottom-right of textarea
  • Submit button fully visible and active
  • Keyboard visible (simple CSS representation or just reduced content area)

Screen 12: 12-turn-animation.html

  • The signature Turn animation playing
  • Input text visible at top, then collapses
  • 3 fragments emerge and drift to positions
  • This is the transition state between input and results
  • Background: subtle prismatic shimmer

Screen 13: 13-turn-results.html

  • Nav header: "Your Turn" with back chevron
  • Original thought in a dim card at top: "I completely bombed my presentation..."
  • Below: 3 reframe blocks (amethyst, sapphire, emerald) with AI-generated perspectives
  • Detected distortions: chips showing "Catastrophizing" and "Overgeneralization" in amber
  • Actions row: Save (bookmark icon), Share (share icon), Try Another (refresh icon)
  • Kaleidoscope pattern unique to this Turn between the thought and reframes
  • No tab bar (sub-screen)

Screen 14: 14-turn-history.html

  • Nav header: "Turn History" with back chevron
  • List of Turn cards, each showing:
    • Mini kaleidoscope thumbnail (left)
    • First line of original thought (truncated)
    • Date + number of perspectives
    • Detected distortion chips
  • Filter chips at top: All, This Week, Saved
  • No tab bar

Mirror Tab (Screens 15–19) → screens/mirror/

Screen 15: 15-mirror-home.html

  • Tab bar with Mirror active (amber)
  • Greeting area with amber accent
  • "Start a session" primary card — large, with hexagonal Mirror icon
  • Streak indicator: "3 days" with amber flame
  • Recent sessions list (2–3 cards showing date, duration, fragment count)
  • Section: "YOUR FRAGMENTS" — grid of recent detected distortion chips with counts

Screen 16: 16-mirror-session.html

  • Nav header: "Mirror Session" with close (X) button on right
  • Chat bubble interface
  • User messages (right-aligned, amethyst-tinted bg)
  • AI responses (left-aligned, kalei-navy bg)
  • Input accessory bar at bottom with text field + send button
  • 3–4 exchanges shown
  • No tab bar (full-screen session)

Screen 17: 17-mirror-fragment-highlight.html

  • Same as active session but with a detected fragment
  • One user message has amber .fragment-highlight underline on a phrase
  • Tiny amber fragment ◇ pulses beside the highlighted text
  • Amber glow radiates from the highlight
  • Hint text: "Fragment detected" in amber label below the message

Screen 18: 18-mirror-fragment-detail.html

  • Half-sheet modal (.modal-overlay + .modal-sheet)
  • Behind: the chat session dimmed by scrim
  • Sheet content:
    • Grab handle
    • Distortion name: "Catastrophizing" in amber heading
    • Icon from icons-distortions.svg (inline)
    • Highlighted text quoted
    • Explanation: 1–2 sentences about this distortion
    • "Turn this thought" button (amethyst) — links to Turn with pre-filled text
    • "Dismiss" ghost button

Screen 19: 19-mirror-reflection.html

  • Nav header: "Session Reflection"
  • Session summary card:
    • Duration: "12 minutes"
    • Words written: "847"
    • Fragments detected: 3 (with distortion chips)
  • Mood check: "How are you feeling now?" with 5 emoji-like options (abstract geometric, not actual emoji)
  • Key themes identified (AI-generated tags)
  • "Save Session" primary button
  • "Start a Turn" secondary button

Lens Tab (Screens 20–30) → screens/lens/

Screen 20: 20-lens-dashboard.html

  • Tab bar with Lens active (emerald)
  • Heading: "Your Lens" in emerald
  • Active goals list (2–3 goal cards):
    • Progress ring (left) showing completion %
    • Goal title + next action step
    • Days remaining chip
  • "Add New Goal" button (emerald primary)
  • Section: "DAILY AFFIRMATION" — card with today's auto-generated affirmation
  • Section: "REHEARSALS" — upcoming/recent rehearsal sessions

Screens 21–26: 21-lens-create-step1.html through 26-lens-create-step6.html

  • 6-step goal creation wizard
  • Step progress dots at top (.step-progress)
  • Nav header: "New Goal" with step indicator
  • Step 1 — Name: "What do you want to achieve?" + text input
  • Step 2 — Why: "Why does this matter to you?" + textarea (emotional driver)
  • Step 3 — Obstacles: "What might get in the way?" + add multiple obstacle chips
  • Step 4 — If-Then Plans: For each obstacle, create an if-then implementation intention
  • Step 5 — Milestones: Break goal into 3–5 milestones with target dates
  • Step 6 — Visualization: "Close your eyes and imagine achieving this" — guided prompt + "Save Goal" CTA
  • Each step: emerald accent, previous/next buttons

Screen 27: 27-lens-goal-detail.html

  • Nav header: goal title
  • Large progress ring (emerald)
  • Milestone checklist with completion states
  • If-Then plans listed
  • "Start Rehearsal" button (emerald)
  • "Log Progress" button (secondary)

Screen 28: 28-lens-affirmation.html

  • Centered, full-screen card feel
  • Today's AI-generated affirmation in display-md
  • Decorative: emerald breathing aura behind text
  • Mini kaleidoscope with emerald tint
  • "Reflect on this" button → opens Mirror with affirmation as prompt

Screens 29–30: 29-rehearsal-session.html, 30-rehearsal-complete.html

  • Session: Guided visualization interface
    • Soft emerald background glow
    • Step-by-step prompts appearing one at a time with fade-in
    • Timer ring showing session progress
    • "I can see it" / "Next" progression
    • Breathing guide animation (expanding/contracting circle)
  • Complete: Session summary
    • Vividness rating (1–5 stars or fragments)
    • "How real did it feel?" slider
    • Session added to Evidence Wall notification

Gallery Tab (Screens 31–34) → screens/gallery/

Screen 31: 31-gallery-all.html

  • Tab bar with Gallery active (sapphire)
  • Toggle: "Patterns" / "Keepsakes" at top
  • Grid of pattern cards (2 columns):
    • Each card: mini kaleidoscope visual, thought preview, date, distortion chips
    • Sapphire accent on active/selected
  • Sorting: "Recent" / "Most Reframed" chips

Screen 32: 32-gallery-keepsakes.html

  • Same layout but showing saved/bookmarked Turns
  • Each card: kaleidoscope pattern, saved reframe text, source thought (dim)
  • Heart/bookmark icon indicating saved state

Screen 33: 33-gallery-detail.html

  • Nav header: "Pattern" with back + share action
  • Large kaleidoscope pattern visualization
  • Original thought
  • All 3 reframe perspectives
  • Detected distortions with explanations
  • "Turn again" button (get fresh perspectives)
  • Metadata: date, coaching style used

Screen 34: 34-gallery-search.html

  • Search input at top (sapphire focus border)
  • Filter chips: distortion types, date ranges, features
  • Results list updating as filters change

You Tab (Screens 35–43) → screens/you/

Screen 35: 35-you-profile.html

  • Tab bar with You active (soft light)
  • Avatar circle (initial or placeholder)
  • Name, member since date
  • Stats row: Turns taken, Mirror sessions, Active goals
  • Quick links: Settings, Subscription, Data & Privacy
  • Section: "EVIDENCE WALL" — preview mosaic (link to full view)
  • Section: "SPECTRUM" — preview card (Phase 2, Prism badge)

Screen 36: 36-you-stats.html

  • Nav header: "Your Stats"
  • Stat blocks: Total Turns, Mirror Sessions, Goals Completed, Streak Days
  • Bar chart: Turns per week (simple CSS bars)
  • Top distortions: ranked list with amber bars showing frequency
  • Most used feature breakdown

Screen 37: 37-you-settings.html

  • Nav header: "Settings"
  • Sections with .card-action items:
    • Profile: Edit name, coaching style
    • Notifications: link to #62
    • Appearance: (future: themes)
    • Data & Privacy: Export (#63), Delete Account (#64)
    • About: Version, Terms, Privacy Policy

Screen 38: 38-you-subscription.html

  • Nav header: "Subscription"
  • Current plan card (Free or Prism)
  • If Free: comparison table showing Free vs Prism features
  • Prism pricing: "$7.99/month" with prismatic text gradient
  • Feature bullets for Prism: Unlimited turns, Mirror sessions, Spectrum access, Priority AI
  • CTA: "Upgrade to Prism" (prismatic gradient button)

Screens 39–43: Evidence Wall (See Section 10 below for detailed specs)

Ritual (Screens 44–49) → screens/ritual/

Screen 44: 44-ritual-templates.html

  • Nav header: "Choose Your Ritual" with back
  • 3 ritual template cards:
    • Morning Clarity (Amethyst): Mirror reflection → Turn reframe → Lens affirmation
    • Evening Wind-Down (Sapphire): Mirror journal → Turn gratitude → Lens review
    • Quick Reset (Emerald): Turn single thought → Mirror check-in (2 min)
  • Each card shows: name, duration, steps preview, accent color

Screens 45–47: 45-ritual-morning.html, 46-ritual-evening.html, 47-ritual-quick.html

  • Active ritual flow
  • Step progress at top showing current step
  • Current step content fills the screen:
    • Mirror step: simplified journaling interface
    • Turn step: quick reframe input
    • Lens step: affirmation display or goal check-in
  • "Next Step" button at bottom
  • Timer running in header

Screen 48: 48-ritual-complete.html

  • Celebration screen
  • Prismatic kaleidoscope animation (success burst from loading-animations.svg reference)
  • "Ritual Complete" heading
  • Stats: time taken, steps completed, streak count
  • Evidence Wall tile preview: "New tile earned!"
  • CTA: "Done" returns to Turn Home

Screen 49: 49-ritual-streak.html

  • Nav header: "Ritual Streak"
  • Calendar view (week by week) with amber-filled completed days
  • Current streak count (large display number)
  • Longest streak record
  • Heat map of ritual completion times

Spectrum (Screens 50–57) → screens/spectrum/

Screen 50: 50-spectrum-dashboard.html

  • Nav header: "Spectrum" with Prism badge
  • 5 preview cards linking to each visualization:
    • The River (prismatic flowing band)
    • Your Glass (radar chart thumbnail)
    • Turn Impact (before/after bars)
    • Rhythm Detection (bubble chart)
    • Growth Trajectory (line chart)
  • Time range selector: Week / Month / All Time
  • Overall insight card with AI-generated summary

Screens 51–55: Each is a full-screen visualization detail

  • 51: 51-spectrum-river.html — Flowing prismatic band showing emotional patterns over time, with fragment data points. Reference spectrum-visualizations.svg River section.
  • 52: 52-spectrum-glass.html — Radar/spider chart showing balance across features. Reference Glass section.
  • 53: 53-spectrum-impact.html — Before/after bar pairs showing Turn effectiveness. Ruby (before) → Emerald (after).
  • 54: 54-spectrum-rhythm.html — Time-of-day bubble chart showing when user is most active/reflective.
  • 55: 55-spectrum-growth.html — Line chart with fragment data points and milestone markers showing progress trajectory.

Screens 56–57: Summaries

  • 56: 56-spectrum-weekly.html — AI-generated weekly summary with key metrics, top distortions, recommended actions
  • 57: 57-spectrum-monthly.html — Deeper monthly analysis with trend arrows, comparison to previous month, growth areas

Modals & System (Screens 58–64) → screens/modals/ and screens/system-states/

Screen 58: 58-upgrade-modal.html

  • .modal-overlay.centered + .modal-card
  • Prismatic gradient border on card
  • "Unlock Kalei Prism" heading
  • Feature preview (3 key benefits)
  • Price: "$7.99/month"
  • "Start Free Trial" primary button
  • "Maybe Later" ghost button

Screen 59: 59-rate-limit.html

  • Toast or inline card showing: "You've used your free turns for today"
  • Upgrade CTA
  • Timer showing when limit resets

Screen 60: 60-crisis-response.html

  • Full-screen safety response
  • Ruby accent throughout
  • "We're here for you" heading
  • Crisis hotline numbers
  • "Talk to someone now" button (ruby primary)
  • "I'm okay, continue" secondary option
  • Breathing exercise link

Screen 61: 61-pattern-share.html

  • Share sheet modal
  • Pattern card preview (how it'll look when shared)
  • Share targets: Copy Link, Messages, More...
  • Generated image: kaleidoscope pattern + thought + app branding

Screen 62: 62-notification-settings.html

  • Nav header: "Notifications"
  • Toggle rows for each notification type:
    • Daily Ritual Reminder
    • Mirror Check-in
    • Weekly Spectrum Summary
    • Streak Alerts
  • Time picker for reminder times

Screen 63: 63-data-export.html

  • Nav header: "Export Your Data"
  • Explanation of what gets exported
  • Format options: JSON, PDF summary
  • "Export Data" primary button
  • Processing state with loading animation

Screen 64: 64-account-deletion.html

  • Nav header: "Delete Account"
  • Warning card (ruby border)
  • Explanation of what gets deleted (irreversible)
  • Confirmation text input: "Type DELETE to confirm"
  • "Delete My Account" button (ruby, disabled until confirmed)
  • "Cancel" ghost button

10. Evidence Wall — Detailed Build Spec

The Evidence Wall is Kalei's mastery tracking mosaic. Tiles are earned through activities and form a growing visual tapestry.

Tile Types

Type Shape Earned From Color
Diamond ◇ Completing a Turn Amethyst
Hexagon ⬡ Mirror session Amber
Circle ● Lens goal milestone Emerald
Rectangle ▭ Ritual completion Sapphire
Triangle △ Streak achievement Rose

States

  • Screen 39 (Empty): Ghost tile outlines with dashed borders, CTA "Complete your first Turn to earn a tile"
  • Screen 40 (Early, 3–5 tiles): Tiles placed with gaps, faint connection lines between them
  • Screen 41 (Mid, 10–15 tiles): Denser arrangement, connection web forming, pattern emerging
  • Screen 42 (Full, 20+ tiles): Rich mosaic with glowing connections, celebration state
  • Screen 43 (Tile Detail): Tap a tile → half-sheet showing: tile type, date earned, source activity, related thought/goal

Layout Algorithm (CSS Grid)

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 16px;
}
.evidence-tile {
  aspect-ratio: 1;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  position: relative;
}
/* Some tiles span 2 columns or rows for visual interest */
.evidence-tile.wide { grid-column: span 2; aspect-ratio: 2/1; }
.evidence-tile.tall { grid-row: span 2; aspect-ratio: 1/2; }

11. Monetization & Rate Limiting UI

Free Tier (Kalei)

  • 3 Turns/day, 1 Mirror session/day, 3 Lens goals max
  • No Spectrum access
  • Basic Ritual templates only

Prism Tier ($7.99/month)

  • Unlimited Turns & Mirror sessions
  • Unlimited goals
  • Full Spectrum access
  • Advanced Ritual customization
  • Priority AI processing

UI Implications

  • Show Prism badge (prismatic gradient chip) next to premium features
  • When rate-limited: inline card with count remaining, upgrade CTA
  • Subscription screen: comparison table with checkmarks

12. Build Order — Priority Sequence

Build screens in this order, which follows the user journey and ensures shared components are established first:

Phase 1: Foundation (build first)

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

Phase 2: Core Loop

  1. 03-fragment-intro.html
  2. 04-turn-demo.html
  3. 05-style-selection.html
  4. 06-notifications.html
  5. 07-account-creation.html
  6. 08-first-turn.html
  7. 09-welcome-complete.html
  8. 11-turn-input-active.html
  9. 12-turn-animation.html
  10. 14-turn-history.html

Phase 3: Mirror Feature

  1. 15-mirror-home.html
  2. 16-mirror-session.html
  3. 17-mirror-fragment-highlight.html
  4. 18-mirror-fragment-detail.html
  5. 19-mirror-reflection.html

Phase 4: Lens + Rehearsal

  1. 20-lens-dashboard.html
  2. 21-lens-create-step1.html through 26-lens-create-step6.html
  3. 27-lens-goal-detail.html
  4. 28-lens-affirmation.html
  5. 29-rehearsal-session.html
  6. 30-rehearsal-complete.html

Phase 5: Gallery + You

  1. 31-gallery-all.html
  2. 32-gallery-keepsakes.html
  3. 33-gallery-detail.html
  4. 34-gallery-search.html
  5. 35-you-profile.html
  6. 36-you-stats.html
  7. 37-you-settings.html
  8. 38-you-subscription.html

Phase 6: Evidence Wall + Ritual

  1. 39-evidence-wall-empty.html
  2. 40-evidence-wall-early.html
  3. 41-evidence-wall-mid.html
  4. 42-evidence-wall-full.html
  5. 43-evidence-wall-detail.html
  6. 44-ritual-templates.html
  7. 45-ritual-morning.html
  8. 46-ritual-evening.html
  9. 47-ritual-quick.html
  10. 48-ritual-complete.html
  11. 49-ritual-streak.html

Phase 7: Spectrum (Phase 2)

  1. 50-spectrum-dashboard.html
  2. 51-spectrum-river.html
  3. 52-spectrum-glass.html
  4. 53-spectrum-impact.html
  5. 54-spectrum-rhythm.html
  6. 55-spectrum-growth.html
  7. 56-spectrum-weekly.html
  8. 57-spectrum-monthly.html

Phase 8: System & Modals

  1. 58-upgrade-modal.html
  2. 59-rate-limit.html
  3. 60-crisis-response.html
  4. 61-pattern-share.html
  5. 62-notification-settings.html
  6. 63-data-export.html
  7. 64-account-deletion.html

13. Quality Checklist

Before considering any screen complete, verify:

  • Device frame renders at exactly 390 × 844px with 44px rounded corners
  • Status bar shows 9:41, signal bars, wifi icon, green battery
  • Tab bar (if present) has correct active tab with feature color
  • All text uses design system typography classes (no raw font sizes)
  • All colors use CSS custom properties (var(--amethyst), not #8B5CF6)
  • Fragment diamonds use gradient fills with specular highlight
  • Glow effects use box-shadow with color at 0.3 opacity (not drop-shadow)
  • Breathing animations use 6s ease-in-out infinite cycle
  • No native emoji anywhere — use geometric SVG abstractions
  • Cards use --kalei-navy background with --twilight borders
  • Buttons follow the component system (.btn-primary, .btn-secondary, .btn-ghost)
  • Interactive elements have hover/active states defined
  • Content doesn't overflow the device frame
  • Scrollable areas have hidden scrollbars (.screen-content handles this)
  • Links between screens use relative paths (../turn/10-turn-home.html)

14. Key Documents to Read

Read these documents in this order for full context:

  1. This file — you're here
  2. assets/ASSET-INDEX.md — what SVG elements exist
  3. assets/design-system.css — all tokens, components, utilities
  4. docs/product/kalei-complete-user-journey.md — every screen described in detail
  5. docs/product/kalei-complete-design.md — feature specs and interaction patterns
  6. docs/brand/kalei-brand-guidelines.md — voice, tone, visual principles
  7. docs/technical/kalei-user-journey-technical-map.md — API/DB context (for realistic mock data)
  8. logo-mockups/finalists/soft-elegance-final.svg — the visual DNA source

Built for Kalei — Same pieces. New angle.