kalei/initial mockups/claude_implementation_instructions.md

# 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

```css
/* 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

```css
/* 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

```html
<!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)
```html
<!-- 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)
```css
.breathing-aura {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.2), transparent 70%);
  filter: blur(40px);
  animation: breathing 6s ease-in-out infinite;
}
```

**Option C: Use `<object>` or `<img>` for complex patterns** (kaleidoscope hero, evidence wall mosaic)
```html
<!-- 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:

```html
<!-- 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:

```html
<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:

```html
<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)

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

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

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

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

```html
<!-- 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:

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

### 7.2 Fragment Detection Animation (Mirror)

When AI detects a cognitive distortion mid-session:

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

### 7.3 Kaleidoscope Pattern Generation

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

```html
<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:

```css
.screen-aura {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%);
  filter: blur(60px);
  animation: breathing 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
```

---

## 8. The 10 Cognitive Distortions

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

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

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

---

## 9. Screen-by-Screen Build Specifications

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

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

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

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

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

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

**Screen 6: `06-notifications.html`**
- Centered layout
- Icon: bell with fragment accent
- Heading: "Stay on track"
- Body: "Gentle reminders to check in with yourself"
- Two buttons: "Allow Notifications" (primary), "Not now" (ghost)

**Screen 7: `07-account-creation.html`**
- Apple Sign In button (full width, dark with Apple logo)
- Google Sign In button (full width, outlined)
- Divider with "or"
- Email input + Password input
- "Create Account" primary button
- "Already have an account? Sign in" ghost link

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

**Screen 9: `09-welcome-complete.html`**
- Centered layout
- Personalized kaleidoscope pattern (using their coaching style color)
- Heading: "You're ready"
- Subtext: "Your kaleidoscope is set. Let's find some new angles."
- CTA: "Enter Kalei" — transitions to Turn Home

---

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

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

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

**Screen 12: `12-turn-animation.html`**
- The signature Turn animation playing
- Input text visible at top, then collapses
- 3 fragments emerge and drift to positions
- This is the transition state between input and results
- Background: subtle prismatic shimmer

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

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

---

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

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

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

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

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

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

---

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

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

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

**Screen 27: `27-lens-goal-detail.html`**
- Nav header: goal title
- Large progress ring (emerald)
- Milestone checklist with completion states
- If-Then plans listed
- "Start Rehearsal" button (emerald)
- "Log Progress" button (secondary)

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

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

---

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

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

**Screen 32: `32-gallery-keepsakes.html`**
- Same layout but showing saved/bookmarked Turns
- Each card: kaleidoscope pattern, saved reframe text, source thought (dim)
- Heart/bookmark icon indicating saved state

**Screen 33: `33-gallery-detail.html`**
- Nav header: "Pattern" with back + share action
- Large kaleidoscope pattern visualization
- Original thought
- All 3 reframe perspectives
- Detected distortions with explanations
- "Turn again" button (get fresh perspectives)
- Metadata: date, coaching style used

**Screen 34: `34-gallery-search.html`**
- Search input at top (sapphire focus border)
- Filter chips: distortion types, date ranges, features
- Results list updating as filters change

---

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

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

**Screen 36: `36-you-stats.html`**
- Nav header: "Your Stats"
- Stat blocks: Total Turns, Mirror Sessions, Goals Completed, Streak Days
- Bar chart: Turns per week (simple CSS bars)
- Top distortions: ranked list with amber bars showing frequency
- Most used feature breakdown

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

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

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

---

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

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

**Screens 45–47: `45-ritual-morning.html`, `46-ritual-evening.html`, `47-ritual-quick.html`**
- Active ritual flow
- Step progress at top showing current step
- Current step content fills the screen:
  - Mirror step: simplified journaling interface
  - Turn step: quick reframe input
  - Lens step: affirmation display or goal check-in
- "Next Step" button at bottom
- Timer running in header

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

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

---

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

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

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

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

---

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

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

**Screen 59: `59-rate-limit.html`**
- Toast or inline card showing: "You've used your free turns for today"
- Upgrade CTA
- Timer showing when limit resets

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

**Screen 61: `61-pattern-share.html`**
- Share sheet modal
- Pattern card preview (how it'll look when shared)
- Share targets: Copy Link, Messages, More...
- Generated image: kaleidoscope pattern + thought + app branding

**Screen 62: `62-notification-settings.html`**
- Nav header: "Notifications"
- Toggle rows for each notification type:
  - Daily Ritual Reminder
  - Mirror Check-in
  - Weekly Spectrum Summary
  - Streak Alerts
- Time picker for reminder times

**Screen 63: `63-data-export.html`**
- Nav header: "Export Your Data"
- Explanation of what gets exported
- Format options: JSON, PDF summary
- "Export Data" primary button
- Processing state with loading animation

**Screen 64: `64-account-deletion.html`**
- Nav header: "Delete Account"
- Warning card (ruby border)
- Explanation of what gets deleted (irreversible)
- Confirmation text input: "Type DELETE to confirm"
- "Delete My Account" button (ruby, disabled until confirmed)
- "Cancel" ghost button

---

## 10. Evidence Wall — Detailed Build Spec

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

### Tile Types

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

### States

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

### Layout Algorithm (CSS Grid)

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

---

## 11. Monetization & Rate Limiting UI

### Free Tier (Kalei)
- 3 Turns/day, 1 Mirror session/day, 3 Lens goals max
- No Spectrum access
- Basic Ritual templates only

### Prism Tier ($7.99/month)
- Unlimited Turns & Mirror sessions
- Unlimited goals
- Full Spectrum access
- Advanced Ritual customization
- Priority AI processing

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

---

## 12. Build Order — Priority Sequence

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

### Phase 1: Foundation (build first)
1. `01-splash.html` — establishes breathing logo animation
2. `02-welcome.html` — establishes onboarding layout + hero pattern
3. `10-turn-home.html` — establishes tab bar + greeting + card layout
4. `13-turn-results.html` — establishes reframe blocks + distortion chips

### Phase 2: Core Loop
5. `03-fragment-intro.html`
6. `04-turn-demo.html`
7. `05-style-selection.html`
8. `06-notifications.html`
9. `07-account-creation.html`
10. `08-first-turn.html`
11. `09-welcome-complete.html`
12. `11-turn-input-active.html`
13. `12-turn-animation.html`
14. `14-turn-history.html`

### Phase 3: Mirror Feature
15. `15-mirror-home.html`
16. `16-mirror-session.html`
17. `17-mirror-fragment-highlight.html`
18. `18-mirror-fragment-detail.html`
19. `19-mirror-reflection.html`

### Phase 4: Lens + Rehearsal
20. `20-lens-dashboard.html`
21. `21-lens-create-step1.html` through `26-lens-create-step6.html`
22. `27-lens-goal-detail.html`
23. `28-lens-affirmation.html`
24. `29-rehearsal-session.html`
25. `30-rehearsal-complete.html`

### Phase 5: Gallery + You
26. `31-gallery-all.html`
27. `32-gallery-keepsakes.html`
28. `33-gallery-detail.html`
29. `34-gallery-search.html`
30. `35-you-profile.html`
31. `36-you-stats.html`
32. `37-you-settings.html`
33. `38-you-subscription.html`

### Phase 6: Evidence Wall + Ritual
34. `39-evidence-wall-empty.html`
35. `40-evidence-wall-early.html`
36. `41-evidence-wall-mid.html`
37. `42-evidence-wall-full.html`
38. `43-evidence-wall-detail.html`
39. `44-ritual-templates.html`
40. `45-ritual-morning.html`
41. `46-ritual-evening.html`
42. `47-ritual-quick.html`
43. `48-ritual-complete.html`
44. `49-ritual-streak.html`

### Phase 7: Spectrum (Phase 2)
45. `50-spectrum-dashboard.html`
46. `51-spectrum-river.html`
47. `52-spectrum-glass.html`
48. `53-spectrum-impact.html`
49. `54-spectrum-rhythm.html`
50. `55-spectrum-growth.html`
51. `56-spectrum-weekly.html`
52. `57-spectrum-monthly.html`

### Phase 8: System & Modals
53. `58-upgrade-modal.html`
54. `59-rate-limit.html`
55. `60-crisis-response.html`
56. `61-pattern-share.html`
57. `62-notification-settings.html`
58. `63-data-export.html`
59. `64-account-deletion.html`

---

## 13. Quality Checklist

Before considering any screen complete, verify:

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

---

## 14. Key Documents to Read

Read these documents in this order for full context:

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

---

*Built for Kalei — Same pieces. New angle.*