kalei/docs/brand/kalei-brand-guidelines.md

# Kalei — Brand Guidelines

### Version 1.0 · February 2026

> *A kaleidoscope for your mind. Same pieces. New angle.*

This document defines how Kalei looks, sounds, and feels across every touchpoint — from a push notification to a billboard. It is the single source of truth for anyone designing, writing, coding, or marketing anything that carries the Kalei name.

---

# Table of Contents

1. Brand Foundation
2. Logo & Wordmark
3. Color System
4. Typography
5. Iconography & Visual Elements
6. Pattern System
7. Photography & Imagery
8. Layout & Spacing
9. Motion & Animation
10. Voice & Tone
11. Writing Guidelines
12. UI Component Standards
13. App Store & Marketing
14. Social Media
15. Email & Notifications
16. Accessibility
17. Brand Misuse
18. Asset Checklist

---
---

# 1. Brand Foundation

## 1.1 Brand Story

A kaleidoscope takes broken, random fragments of glass and reveals them as beautiful, symmetrical patterns. It never changes the pieces — it changes the angle. Turn it once, and chaos becomes art. Turn it again, and the same fragments form something entirely new.

Kalei does the same thing with your thoughts.

This isn't toxic positivity. A kaleidoscope doesn't pretend the glass isn't broken. It proves that broken things can still be beautiful.

## 1.2 Mission

To help people see their lives from new angles — turning negative thought patterns into genuine perspectives that are grounded, actionable, and beautiful.

## 1.3 Vision

A world where changing the angle is a reflex — where people instinctively look for the pattern in the fragment, the opportunity in the setback, the facet they haven't considered yet.

## 1.4 Brand Positioning

**Category:** AI-powered mental wellness
**For:** People who want to think clearer, not just feel better
**Unlike:** Meditation apps (passive relaxation) or therapy platforms (clinical treatment)
**Kalei is:** An active tool for seeing your life from new angles — grounded in cognitive science, powered by AI, wrapped in beauty

## 1.5 Brand Personality

| Trait | What it means | What it doesn't mean |
|-------|--------------|---------------------|
| **Wise** | Sees beauty in hard things, offers genuine perspective | Preachy, lecturing, condescending |
| **Warm** | Feels like a caring friend, never clinical | Saccharine, bubbly, over-eager |
| **Grounded** | Rooted in science and reality, no false promises | Dry, academic, boring |
| **Poetic** | Finds the right words, values beauty in language | Flowery, pretentious, vague |
| **Confident** | Knows what it is, doesn't over-explain or apologize | Aggressive, arrogant, dismissive |
| **Calm** | Steady presence, never frantic or urgent | Passive, sleepy, disengaged |

**If Kalei were a person:** A quiet, thoughtful friend who always seems to notice what you missed — not because they're smarter than you, but because they look from a different angle. They don't tell you everything will be fine. They show you what's already fine that you couldn't see.

## 1.6 Brand Values

1. **Angles over answers** — We show new perspectives. We don't prescribe solutions.
2. **Beauty in the broken** — We believe hard things contain beauty. We never hide the hard part.
3. **Clarity over comfort** — We'd rather give you a real perspective than a comfortable lie.
4. **Science under poetry** — Every feature is grounded in cognitive behavioral science. The poetry is how we deliver it.
5. **Respect over rescue** — We treat users as capable people having a hard moment, not broken people who need saving.

## 1.7 Core Metaphor System

| Optical Element | Feature | Role |
|----------------|---------|------|
| **Mirror** | The Mirror | Reflects your thoughts back so you can see patterns |
| **Kaleidoscope** | The Kaleidoscope (Turn) | Takes fragments and reveals beautiful patterns |
| **Lens** | The Lens | Focuses your vision on what you're building toward |
| **Prism** | The Spectrum | Separates your experience into its full emotional range |

---
---

# 2. Logo & Wordmark

## 2.1 Primary Logo

The Kalei logo consists of two elements:

1. **The Mark** — A geometric, faceted symbol that suggests a kaleidoscope viewed from the front. It should feel crystalline, symmetrical, and luminous. Abstract enough to scale to a favicon, detailed enough to be recognizable at billboard size.

2. **The Wordmark** — "Kalei" set in a clean geometric sans-serif with subtle angular characteristics. The letterforms should echo the faceted quality of the mark — no rounded terminals, slightly sharp joints.

**Logo lockup options:**
- **Stacked:** Mark above wordmark (primary, use for app icon and centered layouts)
- **Horizontal:** Mark left of wordmark (use for headers, navigation bars, partnerships)
- **Wordmark only:** For contexts where the mark is already present (in-app, after brand recognition is established)
- **Mark only:** For favicons, app icons, loading states, and small-format contexts

## 2.2 Logo Clear Space

Minimum clear space around the logo equals the height of the "K" in the wordmark on all sides. No other elements, text, or imagery may enter this space.

## 2.3 Logo Sizing

| Context | Minimum width |
|---------|--------------|
| App icon | 1024×1024px (source), renders at all standard sizes |
| Favicon | 32×32px (mark only) |
| In-app header | 120px wide (horizontal lockup) |
| Social media avatar | 400×400px (mark only) |
| Print (business card) | 1 inch wide minimum |
| Print (large format) | No maximum |

## 2.4 Logo Color Variations

| Variant | Usage |
|---------|-------|
| **Full color on dark** | Primary. Prismatic mark + white wordmark on dark backgrounds. Default for all digital. |
| **Full color on light** | Prismatic mark + deep navy wordmark on light backgrounds. Use sparingly — Kalei is a dark-first brand. |
| **Monochrome white** | Mark + wordmark in white. For overlays on photography, video, dark UI contexts. |
| **Monochrome dark** | Mark + wordmark in Kalei Navy. For print on white paper, legal documents, partnerships. |

**Never:**
- Place the full-color logo on a busy or patterned background
- Recolor the mark in non-brand colors
- Add shadows, glows, or effects to the logo
- Stretch, rotate, or distort the logo
- Recreate the wordmark in a different typeface
- Place the logo on backgrounds that don't provide sufficient contrast

## 2.5 App Icon

The app icon uses the **mark only** on a deep navy (#0A0E1A) background. The mark should fill approximately 65-70% of the icon area. The mark uses the prismatic gradient (see Color System). Apply standard iOS/Android corner radius masking.

No text in the app icon. No borders. No additional decoration.

---
---

# 3. Color System

## 3.1 Design Philosophy

Kalei's color system is inspired by light passing through glass — jewel tones that glow against darkness. This is not a typical wellness app palette. No pastels. No sage green. No cream. Kalei is dark, rich, and luminous.

A kaleidoscope works by reflecting light against a dark interior. The dark backgrounds are the tube. The jewel tones are the fragments catching light.

## 3.2 Primary Palette

### Background Colors

| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| **Void** | `#050508` | 5, 5, 8 | Deepest background. Main app background. |
| **Kalei Navy** | `#0A0E1A` | 10, 14, 26 | Primary surface color. Cards, sheets, modals. |
| **Deep Glass** | `#121628` | 18, 22, 40 | Elevated surfaces. Active states. Input fields. |
| **Twilight** | `#1C2240` | 28, 34, 64 | Subtle borders, dividers, inactive elements. |

### Jewel Tones (Fragment Colors)

| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| **Amethyst** | `#8B5CF6` | 139, 92, 246 | Primary accent. CTAs, interactive elements, links. |
| **Sapphire** | `#3B82F6` | 59, 130, 246 | Information, secondary actions, Turn-related UI. |
| **Emerald** | `#10B981` | 16, 185, 129 | Success states, growth metrics, Lens features. |
| **Ruby** | `#EF4444` | 239, 68, 68 | Error states, destructive actions only. Never for fragment highlighting. |
| **Amber** | `#F59E0B` | 245, 158, 11 | Fragment highlights in Mirror. Warmth. Attention without alarm. |
| **Rose** | `#EC4899` | 236, 72, 153 | Accent for sharing, social features, celebration moments. |

### Text Colors

| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| **Pure Light** | `#FFFFFF` | 255, 255, 255 | Primary text on dark backgrounds. |
| **Soft Light** | `#E2E8F0` | 226, 232, 240 | Secondary text, body copy, descriptions. |
| **Dim Light** | `#94A3B8` | 148, 163, 184 | Tertiary text, timestamps, metadata, placeholders. |
| **Faint Light** | `#475569` | 71, 85, 105 | Disabled text, subtle labels. |

## 3.3 The Prismatic Gradient

Kalei's signature visual element. A multi-color gradient that simulates light refracting through a prism.

**Standard Prismatic Gradient:**
```
Direction: 135° (top-left to bottom-right)
Stops:
  0%   — #8B5CF6 (Amethyst)
  25%  — #3B82F6 (Sapphire)
  50%  — #10B981 (Emerald)
  75%  — #F59E0B (Amber)
  100% — #EC4899 (Rose)
```

**Usage:**
- Logo mark fill
- Premium upgrade CTAs ("See the full spectrum")
- Pattern Card borders
- Celebration/milestone moments
- Loading shimmer animation base
- Section dividers (as a thin 2px line)

**Reduced Prismatic Gradient** (for subtlety):
Same stops at 30% opacity over Kalei Navy. Use for background washes, hover states, and ambient decoration.

**Never:**
- Use the prismatic gradient for body text
- Apply it to large background areas at full opacity (overwhelming)
- Use it on light backgrounds (loses impact)
- Recreate it with different colors

## 3.4 Semantic Colors

| State | Color | Token |
|-------|-------|-------|
| Primary action | Amethyst `#8B5CF6` | `color-action-primary` |
| Secondary action | Sapphire `#3B82F6` | `color-action-secondary` |
| Success | Emerald `#10B981` | `color-success` |
| Warning / Fragment highlight | Amber `#F59E0B` | `color-warning` |
| Error / Destructive | Ruby `#EF4444` | `color-error` |
| Disabled | Twilight `#1C2240` | `color-disabled` |
| Focus ring | Amethyst at 50% opacity | `color-focus` |

## 3.5 Color Accessibility

All text/background combinations must meet WCAG 2.1 AA minimum contrast ratios:

| Combination | Ratio | Passes |
|-------------|-------|--------|
| Pure Light on Void | 19.8:1 | ✓ AAA |
| Pure Light on Kalei Navy | 18.2:1 | ✓ AAA |
| Soft Light on Kalei Navy | 13.1:1 | ✓ AAA |
| Dim Light on Kalei Navy | 6.8:1 | ✓ AA |
| Amethyst on Kalei Navy | 5.2:1 | ✓ AA |
| Amber on Kalei Navy | 8.4:1 | ✓ AAA |

**Rule:** Never use Jewel Tones for text smaller than 16px. Use Pure Light or Soft Light for body text. Jewel Tones are for accents, icons, and interactive elements.

## 3.6 Dark Mode / Light Mode

**Kalei is dark-first.** The primary experience is dark mode. There is no "light mode" in v1.

If a light mode is introduced in the future, it should invert backgrounds to warm off-whites (`#F8F7F4`) while keeping jewel tones as accents. The prismatic gradient should remain on dark surfaces even in light mode (e.g., dark cards or headers).

---
---

# 4. Typography

## 4.1 Type Philosophy

Kalei's typography is clean and modern with subtle geometric qualities — like cut glass. It should feel precise, not cold. Clear, not clinical. Every letterform is a facet.

## 4.2 Type Scale

### Primary Typeface — Headlines & UI

**Inter** (or equivalent geometric sans-serif: Outfit, Satoshi, or General Sans)

Selected for: clean geometry, excellent screen rendering, wide weight range, open-source availability.

### Secondary Typeface — Display & Marketing (Optional)

**Space Grotesk** (or equivalent: DM Sans, Plus Jakarta Sans)

Selected for: slightly more personality than Inter, angular terminals that echo the faceted aesthetic, strong at large sizes.

Use only for marketing headlines, hero text, and App Store screenshots. Never for body text or UI elements.

## 4.3 Type Scale — App

| Token | Size | Weight | Line Height | Letter Spacing | Usage |
|-------|------|--------|-------------|---------------|-------|
| `display-xl` | 40px | Bold (700) | 48px | -0.02em | Onboarding hero text |
| `display-lg` | 32px | Bold (700) | 40px | -0.02em | Screen titles |
| `display-md` | 24px | Semibold (600) | 32px | -0.01em | Section headers |
| `heading` | 20px | Semibold (600) | 28px | -0.01em | Card titles, modal headers |
| `subheading` | 16px | Semibold (600) | 24px | 0 | Labels, tab bar, navigation |
| `body-lg` | 17px | Regular (400) | 26px | 0 | Primary body text (iOS default) |
| `body` | 15px | Regular (400) | 22px | 0 | Secondary body text |
| `body-sm` | 13px | Regular (400) | 18px | 0.01em | Captions, metadata, timestamps |
| `label` | 11px | Medium (500) | 16px | 0.05em | Badges, tags, overlines (uppercase) |

## 4.4 Type Scale — Marketing

| Token | Size | Weight | Usage |
|-------|------|--------|-------|
| `hero` | 64–80px | Bold | Landing page hero, billboard |
| `headline` | 40–56px | Bold | Section titles, feature headers |
| `subhead` | 24–32px | Regular/Medium | Supporting text under headlines |
| `body` | 18–20px | Regular | Marketing body copy |
| `fine` | 14px | Regular | Legal, footnotes, disclaimers |

## 4.5 Typography Rules

1. **Never center body text.** Center alignment is only for headlines, single-line labels, and empty states.
2. **Maximum line width:** 65–75 characters for body text. Longer lines reduce readability.
3. **Use sentence case everywhere.** No Title Case except in the logo wordmark. "Turn a fragment" not "Turn A Fragment."
4. **No all-caps body text.** Uppercase is reserved for `label` token (badges, tags, overlines) only.
5. **Maintain hierarchy.** Every screen should have one clear `display` or `heading` element. Don't use two display sizes in the same view.
6. **Minimum text size:** 13px in-app, 14px on web. Nothing smaller, ever.

---
---

# 5. Iconography & Visual Elements

## 5.1 Icon Style

Kalei icons are **geometric, faceted, and angular.** They suggest crystalline structures — the fragments of glass inside a kaleidoscope.

**Characteristics:**
- 24×24px base grid with 2px stroke (line icons)
- Straight lines and sharp angles preferred over curves
- Hexagonal and triangular motifs where possible
- Symmetrical when it reinforces the kaleidoscope metaphor
- Consistent 2px corner radius on corners (not fully rounded)

**Avoid:**
- Rounded, bubbly icon styles (that's every other wellness app)
- Filled icons by default (use filled only for active/selected states)
- Highly detailed or illustrative icons
- Emoji-style icons

## 5.2 Core Navigation Icons

| Feature | Icon Description | Active State |
|---------|-----------------|-------------|
| **Turn** (Kaleidoscope) | Geometric diamond/shard — ◇ | Filled with Amethyst gradient |
| **Mirror** | Hexagonal mirror shape — ✦ | Filled with Amber gradient |
| **Lens** | Concentric circles (lens cross-section) — ◎ | Filled with Emerald gradient |
| **Gallery** | Grid of small geometric shapes — ▦ | Filled with Sapphire gradient |
| **You** (Profile) | Angular avatar silhouette — ● | Filled with Soft Light |

**Active state treatment:** Selected tab icon fills with its assigned Jewel Tone. Unselected icons render in Dim Light (`#94A3B8`).

## 5.3 Action Icons

| Action | Icon | Color |
|--------|------|-------|
| Turn (submit reframe) | Rotating diamond | Amethyst |
| Save keepsake | Angular bookmark/gem | Amber |
| Share pattern | Angular arrow-out | Soft Light |
| Expand / Full Turn | Chevron-diamond | Sapphire |
| Dismiss | Angular X | Dim Light |
| Settings gear | Hexagonal gear | Dim Light |
| Streak flame | Angular flame | Amber |

## 5.4 Fragment Type Icons

Each cognitive distortion type has a unique small icon used in the Mirror and Spectrum:

| Distortion | Icon Motif | Reasoning |
|------------|-----------|-----------|
| Catastrophizing | Downward-pointing angular arrow | Predicting the worst |
| Black-and-white | Split diamond (half light, half dark) | All-or-nothing |
| Mind reading | Angular thought bubble | Assuming thoughts |
| Fortune telling | Angular crystal ball / forward arrow | Predicting negative future |
| Personalization | Inward-pointing arrows → center | Taking everything personally |
| Discounting positives | Dimmed/struck-through star | Minimizing good things |
| Emotional reasoning | Heart → equals sign | Feelings as facts |
| Should statements | Rigid angular ruler | Self-imposed rules |
| Labeling | Angular tag/label | Identity-level judgment |
| Overgeneralization | Single dot → many dots | One event to universal |

These icons are always rendered in Amber (`#F59E0B`) when highlighting fragments and in their respective Jewel Tones in the Spectrum dashboard.

---
---

# 6. Pattern System

## 6.1 What Patterns Are

Every reframing session in Kalei generates a unique, procedurally-created kaleidoscope pattern. These patterns are central to the brand identity — they are the visual proof that broken fragments can become beautiful.

## 6.2 Pattern Generation Rules

- **Deterministic:** The same input text always generates the same base pattern (creates personal meaning)
- **Symmetrical:** All patterns exhibit kaleidoscopic symmetry (6-fold or 8-fold rotational)
- **Jewel-toned:** Patterns use colors from the Kalei Jewel Tone palette only
- **Dark-grounded:** Patterns render on Void or Kalei Navy backgrounds
- **Unique:** No two different inputs should produce visually identical patterns

## 6.3 Pattern Types

| Source | Visual Style | Save Location |
|--------|-------------|--------------|
| **Turn pattern** | Sharp, geometric, high-contrast. Angular fragments in full symmetry. | Gallery → Turns |
| **Mirror Reflection pattern** | Softer geometry, more organic curves blended with facets. Amber-dominant. | Gallery → Reflections |
| **Growth pattern** (Spectrum) | Evolving complexity over time. Starts simple, gains layers and color range. | Spectrum dashboard |

## 6.4 Pattern Usage

| Context | Format | Size |
|---------|--------|------|
| In-app Gallery tile | Square | 360×360px |
| Pattern Card (Instagram Story) | 9:16 | 1080×1920px |
| Pattern Card (Feed/Square) | 1:1 | 1080×1080px |
| Pattern Card (iMessage) | ~3:2 | 1200×800px |
| Onboarding animation | Full screen | Device resolution |
| Marketing / print | Vector (SVG) | Scalable |

## 6.5 Pattern Card Layout

Pattern Cards are shareable images generated when a user saves a keepsake. Layout:

```
┌──────────────────────────┐
│                          │
│                          │
│    [Kaleidoscope         │
│     Pattern              │
│     centered,            │
│     60% of card height]  │
│                          │
│                          │
├──────────────────────────┤
│                          │
│  "The reframed thought   │
│   goes here in Soft      │
│   Light, centered."      │
│                          │
│            ◇ kalei       │
│                          │
└──────────────────────────┘

Background: Void (#050508)
Pattern: Jewel Tones
Text: Soft Light (#E2E8F0), body-lg, centered
Branding: Kalei mark + wordmark in Dim Light, bottom center
```

**Rules:**
- Only the reframed thought (pattern) appears on the card — never the original negative thought (fragment)
- Maximum 2 lines of text. If the reframe is longer, truncate with "..."
- The Kalei branding is subtle (Dim Light, small) — the pattern and reframe are the heroes

---
---

# 7. Photography & Imagery

## 7.1 Photography Style

Kalei uses photography sparingly — the brand's visual identity is built on patterns, geometry, and color, not photos. When photography is used (marketing, App Store, social media), it should follow these guidelines:

**Mood:** Contemplative, still, luminous. Moments of quiet clarity — not action shots.

**Subjects:**
- Light interacting with objects: prisms, glass, water surfaces, crystal formations
- Macro/close-up abstract textures: faceted gems, ice, refracted light
- People in moments of quiet reflection (never staged positivity, never cheering/jumping)
- Architecture with geometric patterns and symmetry
- Natural landscapes at transitional moments: dawn, dusk, golden hour

**Treatment:**
- Dark and moody with selective areas of vivid color
- High contrast between dark backgrounds and illuminated subjects
- Desaturated overall with selective jewel-tone color grading
- Shallow depth of field to create a "looking through a lens" feeling

**Avoid:**
- Stock photo energy (diverse group laughing around laptop)
- Bright, flat, evenly-lit scenes
- Nature clichés (sunsets, mountaintops, ocean waves used generically)
- Faces in obvious distress or obvious joy — Kalei lives in the nuanced middle
- Any image that could be mistaken for a meditation app or therapy platform

## 7.2 Illustration Style

Kalei does not use illustration in v1. If introduced later, illustrations should be:
- Geometric and angular (consistent with icon style)
- Limited to Kalei color palette
- Abstract or symbolic, never literal or cartoonish
- Used for educational content (explaining CBT concepts) only

---
---

# 8. Layout & Spacing

## 8.1 Grid System

**App (Mobile):**
- 4-column grid
- 16px margins (left and right)
- 12px gutters between columns
- Content width: screen width − 32px

**Web (Marketing/Landing Page):**
- 12-column grid
- Maximum content width: 1200px
- 24px gutters
- 80px margins on desktop, 24px on tablet, 16px on mobile

## 8.2 Spacing Scale

Based on a 4px base unit:

| Token | Value | Usage |
|-------|-------|-------|
| `space-1` | 4px | Minimal spacing. Between icon and label. |
| `space-2` | 8px | Tight spacing. Between related elements. |
| `space-3` | 12px | Default inner padding. Card padding (compact). |
| `space-4` | 16px | Standard spacing. Between sections, card padding (standard). |
| `space-5` | 20px | Comfortable spacing. |
| `space-6` | 24px | Between distinct content blocks. |
| `space-8` | 32px | Between major sections. Screen padding top/bottom. |
| `space-10` | 40px | Large spacing. Between feature sections. |
| `space-12` | 48px | Hero spacing. Onboarding screen padding. |
| `space-16` | 64px | Maximum spacing. Between landing page sections. |

## 8.3 Component Sizing

| Component | Height | Corner Radius |
|-----------|--------|---------------|
| Primary button | 52px | 12px |
| Secondary button | 44px | 10px |
| Text input | 48px | 10px |
| Text area (Mirror) | Auto (min 120px) | 12px |
| Card | Auto | 16px |
| Modal (half-sheet) | Auto (max 70% screen) | 20px (top corners only) |
| Tab bar | 83px (with safe area) | 0px |
| Chip / Tag | 32px | 16px (full pill) |
| Avatar | 40px | 20px (circle) |

## 8.4 Corner Radius Philosophy

Kalei uses **moderate corner radii** — not sharp rectangles (too harsh) and not fully rounded (too soft). The corners should feel like faceted glass: slightly softened but still geometric.

| Element type | Radius |
|-------------|--------|
| Buttons, inputs | 10–12px |
| Cards, modals | 16–20px |
| Chips, tags, pills | Full (height / 2) |
| Icons | 2px |
| App icon | Platform standard (iOS: continuous curve) |

---
---

# 9. Motion & Animation

## 9.1 Motion Philosophy

Kalei's motion design reflects the physics of light and glass: smooth, precise, and mesmerizing without being distracting. Every animation serves a purpose — either providing feedback, guiding attention, or reinforcing the metaphor.

## 9.2 Timing Curves

| Curve | Easing | Duration | Usage |
|-------|--------|----------|-------|
| **Standard** | ease-out (0.0, 0.0, 0.2, 1.0) | 200–300ms | Most UI transitions, button feedback |
| **Decelerate** | ease-out (0.0, 0.0, 0.0, 1.0) | 300–400ms | Elements entering the screen |
| **Accelerate** | ease-in (0.4, 0.0, 1.0, 1.0) | 200–250ms | Elements leaving the screen |
| **Dramatic** | ease-in-out (0.4, 0.0, 0.2, 1.0) | 500–800ms | The Turn animation, pattern reveals |
| **Gentle** | ease-out (0.0, 0.0, 0.4, 1.0) | 400–600ms | Fragment highlights appearing, ambient motion |

## 9.3 Signature Animations

### The Turn (Core Animation)

The most important animation in the app. Triggered when a user submits a thought for reframing.

**Sequence:**
1. **Collapse** (200ms): Input text compresses into a single angular shard (fragment icon)
2. **Multiply** (400ms): The shard duplicates into 6 copies, rotating outward
3. **Crystallize** (600ms): Copies arrange into kaleidoscopic symmetry, colors bloom from center outward
4. **Settle** (300ms): Pattern locks into final position; reframed perspectives fade in beneath

**Total duration:** ~1.5 seconds. Should feel like one fluid motion, not four discrete steps.

**Technical:** Implement with React Native Reanimated 2+ or Skia. Not Lottie — needs to be dynamic based on input.

### Fragment Highlight (Mirror)

When the AI detects a cognitive distortion in Mirror text:

1. **Glow** (400ms): Amber underline fades in beneath the detected text, left to right
2. **Pulse** (200ms): A single subtle pulse of brightness, then settles to steady glow
3. **Icon appear** (200ms): Small ◇ fragment icon fades in at the end of the highlight

**Feel:** Like sunlight falling on a piece of glass — natural, gentle, drawing the eye without shouting.

### Pattern Card Generation

When a user saves a keepsake and the Pattern Card generates:

1. **Fragments scatter** (300ms): Random colored fragments spread across the card area
2. **Coalesce** (600ms): Fragments draw toward center, rotating and aligning
3. **Symmetry snap** (200ms): Pattern locks into final kaleidoscopic arrangement
4. **Text fade** (300ms): Reframed thought fades in below the pattern

### Loading States

**Prismatic shimmer:** A slow-moving prismatic gradient sweeps across placeholder elements. Direction: left to right. Speed: 1.5s per cycle. Colors: Reduced prismatic gradient at 20% opacity.

**Never use:** Spinning circles, bouncing dots, or generic loading indicators.

## 9.4 Transition Patterns

| Transition | Animation | Duration |
|-----------|-----------|----------|
| Screen push (forward) | Slide from right + subtle scale (0.97→1.0 on entering, 1.0→0.97 on exiting) | 300ms |
| Screen pop (back) | Reverse of push | 250ms |
| Modal present | Slide up from bottom with backdrop fade | 350ms |
| Modal dismiss | Slide down with backdrop fade | 250ms |
| Tab switch | Crossfade (no slide) | 200ms |
| Card expand | Shared element transition (card → full screen) | 400ms |
| Toast/snackbar | Slide down from top + fade | 300ms in, 200ms out |

## 9.5 Motion Accessibility

- **Respect "Reduce Motion"** system setting. When enabled: replace all animations with instant cuts or simple fades (200ms max)
- The Turn animation should degrade to: input disappears → pattern appears with fade (no rotation or multiplication)
- Fragment highlights should appear instantly (no glow animation)
- Loading states should use a static shimmer (no movement)

---
---

# 10. Voice & Tone

## 10.1 Brand Voice (Constant)

Kalei's voice is the personality that remains consistent across all contexts. It never changes.

**Kalei sounds like:** A wise friend who sees beauty in hard things — not a therapist, not a guru, not a cheerleader.

**Voice attributes:**
- **Clear** — Say it simply. If a sentence needs re-reading, rewrite it.
- **Warm** — Kindness without softness. Care without coddling.
- **Grounded** — Rooted in reality. No fairy dust. No "everything happens for a reason."
- **Poetic** — When a beautiful phrase captures it better than a plain one, use it. But never at the cost of clarity.
- **Respectful** — The user is a capable person having a hard moment. Not a patient. Not a project.

## 10.2 Tone (Variable)

Tone shifts based on context while the voice stays constant.

| Context | Tone | Example |
|---------|------|---------|
| **Onboarding** | Inviting, intriguing, slightly mysterious | "This is a thought. Change the angle... and the same piece becomes part of something beautiful." |
| **Turn (Reframing)** | Calm, steady, perspective-offering | "Let's see what this looks like from another angle." |
| **Mirror (Highlighting)** | Gentle, observational, non-judgmental | "This sounds like mind reading — assuming someone else's thoughts without evidence." |
| **Lens (Goals)** | Focused, encouraging, forward-looking | "Your focus is getting sharper." |
| **Milestone** | Quiet pride, not celebration overload | "There it is. A pattern worth keeping." |
| **Re-engagement** | Patient, no guilt, always welcoming | "Still here. Ready when you are." |
| **Error state** | Honest, brief, solution-oriented | "Something went wrong. Let's try that Turn again." |
| **Upgrade prompt** | Confident, value-focused, never desperate | "See the full spectrum." |
| **Crisis detection** | Immediate warmth, resourceful, no reframing | "What you're feeling matters. Here are people who can help right now." |

## 10.3 Tone Calibration

**The 1-10 scale for emotional weight:**

| User state | Kalei's tone weight | Example |
|-----------|--------------------|---------| 
| Casual/browsing (1-3) | Light, slightly playful | "Ready for today's Turn? 🔮" |
| Processing/reflecting (4-6) | Warm, steady, grounded | "Let's see what this looks like from another angle." |
| Distressed/venting (7-8) | Gentle, careful, deeply respectful | "I noticed a few fragments in what you wrote. Want to look at them together?" |
| In crisis (9-10) | Immediate, warm, resource-focused — **no reframing** | "What you're feeling matters. If you need to talk to someone right now: [crisis resources]" |

**Critical rule:** Kalei NEVER reframes suicidal ideation, self-harm thoughts, or crisis-level distress. These are not "fragments to be turned." They are signals to provide immediate support resources.

---
---

# 11. Writing Guidelines

## 11.1 Vocabulary

See the complete Brand Vocabulary table in the Brand Metaphor document. Key rules:

**Always say:**
| Concept | Kalei word |
|---------|-----------|
| Negative thought | Fragment |
| Reframe | Turn |
| Reframed perspective | Pattern |
| Save | Keep / Keepsake |
| Journal session | Reflection |
| History | Gallery |
| Cognitive distortion | Fragment type (in-app) |
| Premium | Prism |

**Never say:**
- "Fix" (implies user is broken)
- "Heal" (too clinical)
- "Transform" (too dramatic)
- "Positive vibes" (trivializes)
- "Journey" (overused)
- "Self-care" (generic)
- "Unlock your potential" (cliché)
- "You've got this!" (patronizing)

## 11.2 Grammar & Style

1. **Sentence case everywhere.** Headlines, buttons, labels, navigation. "Turn a fragment" not "Turn a Fragment" or "TURN A FRAGMENT."
2. **No periods on single-sentence UI text.** Button labels, headlines, toasts, and single-line descriptions omit the period. Multi-sentence body text uses periods.
3. **Use contractions.** "It's" not "It is." "You've" not "You have." Kalei is warm, not formal.
4. **Active voice default.** "Kalei found 3 fragments" not "3 fragments were found by Kalei."
5. **Second person.** "Your Gallery" not "The Gallery." "You turned 10 fragments" not "10 fragments have been turned."
6. **Present tense for actions.** "Turn this fragment" not "Turning this fragment" or "Fragment will be turned."
7. **No exclamation marks in UI text.** The only exceptions: milestone celebrations and streak messages, limited to one per message.
8. **Oxford comma.** Always. "Fragments, patterns, and keepsakes."
9. **Numbers:** Spell out one through nine. Use digits for 10+. Always use digits for stats and data. "You turned 3 fragments" but "Your 10th Turn."
10. **Em dashes over parentheses.** For asides and elaboration. "Your Mirror session — your most honest yet — revealed three new fragments."

## 11.3 Error Messages

Error messages should be brief, honest, and never blame the user.

**Formula:** [What happened] + [What to do next]

| ❌ Bad | ✅ Good |
|--------|---------|
| "Error 500: Server failure" | "Something went wrong on our end. Try again in a moment." |
| "Invalid input! Please try again." | "We couldn't read that. Try rephrasing your fragment." |
| "Network error" | "Lost connection. Your Turn is saved — we'll send it when you're back online." |
| "You've exceeded your free limit!" | "You've used your 3 free Turns today. Unlock unlimited with Prism, or come back tomorrow." |

## 11.4 Empty States

Empty states are moments of opportunity — the first thing a new user sees in each section.

**Formula:** [Aspirational description of what will be here] + [Light encouragement to take action]

| Screen | Empty state copy |
|--------|-----------------|
| Gallery | "Your Gallery is waiting. The next pattern you save will appear here." |
| Mirror | "Start writing. Say whatever's on your mind. Kalei will listen." |
| Lens | "What are you focusing on? Set your first Lens." |
| Turn history | "Every kaleidoscope starts with a single Turn." |
| Keepsakes | "No keepsakes yet. When a pattern feels worth keeping, you'll find it here." |

## 11.5 Microcopy Quick Reference

| Element | Style | Example |
|---------|-------|---------|
| Button (primary) | 1–3 words, verb-first | "Turn" · "Keep this pattern" |
| Button (secondary) | 1–3 words | "Not now" · "Dismiss" |
| Input placeholder | Question or gentle instruction | "What's the fragment?" · "Start writing" |
| Toast notification | 1 sentence, no period | "Pattern saved to your Gallery" |
| Section header | 1–4 words, sentence case | "Recent patterns" · "Your Glass" |
| Tooltip | 1 sentence explaining function | "Tap a highlighted fragment to see it from a new angle" |

---
---

# 12. UI Component Standards

## 12.1 Buttons

### Primary Button
- Background: Amethyst (`#8B5CF6`)
- Text: Pure Light, `subheading` token (16px Semibold)
- Height: 52px
- Corner radius: 12px
- Padding: 16px horizontal
- Pressed state: Amethyst at 80% brightness
- Disabled state: Twilight background, Faint Light text
- Full-width on mobile by default

### Secondary Button
- Background: Deep Glass (`#121628`)
- Border: 1px Twilight (`#1C2240`)
- Text: Soft Light, `subheading` token
- Height: 44px
- Corner radius: 10px
- Pressed state: Twilight background

### Ghost Button
- Background: Transparent
- Text: Amethyst, `subheading` token
- No border
- Pressed state: Amethyst at 10% opacity background

### Destructive Button
- Background: Ruby (`#EF4444`) at 15% opacity
- Text: Ruby
- Border: 1px Ruby at 30% opacity
- Use only for irreversible actions (delete account, clear Mirror data)

## 12.2 Input Fields

- Background: Deep Glass (`#121628`)
- Border: 1px Twilight, transitions to 1px Amethyst on focus
- Text: Pure Light, `body-lg` token
- Placeholder: Dim Light
- Height: 48px (single line), auto-grow for multi-line (Mirror)
- Corner radius: 10px
- Padding: 14px horizontal, 12px vertical

### Mirror Input (Special)

- Appears as a chat-style input bar at the bottom of the screen
- Send button: Angular arrow icon in Amethyst
- No character count (unrestricted)
- Auto-grow up to 5 lines before scrolling internally

## 12.3 Cards

- Background: Kalei Navy (`#0A0E1A`)
- Border: 1px Twilight (optional, for elevated contexts)
- Corner radius: 16px
- Padding: 16px (standard), 12px (compact)
- Shadow: None (Kalei uses borders and background shifts, not shadows)
- Pressed state: Background shifts to Deep Glass

### Pattern Card (Gallery)
- Square aspect ratio
- Pattern fills upper 65%
- Fragment type badge: top-left corner, Chip component
- Date: bottom-right, `body-sm` in Dim Light

### Insight Card (Spectrum)
- Full-width
- Left accent border: 3px in relevant Jewel Tone
- Body text: `body-lg` in Soft Light
- Action: Ghost button aligned right

## 12.4 Bottom Sheet / Modal

- Background: Kalei Navy
- Corner radius: 20px (top-left and top-right only)
- Handle: 36×5px pill in Twilight, centered, 8px from top
- Backdrop: Void at 60% opacity
- Max height: 70% of screen
- Scrollable when content exceeds max height

**Used for:**
- Fragment reframe cards (Mirror tap)
- Turn results (expanded view)
- Keepsake save confirmation
- Settings pickers

## 12.5 Tab Bar

- Background: Kalei Navy with subtle top border (1px Twilight)
- Height: 49px + safe area
- Icons: 24×24px
- Labels: `label` token (11px Medium, uppercase)
- Inactive: Dim Light icon + label
- Active: Jewel Tone icon (filled) + Pure Light label
- No badge counts (Kalei doesn't create anxiety about unseen content)

## 12.6 Chips & Tags

- Height: 32px
- Corner radius: 16px (full pill)
- Background: Deep Glass
- Text: Soft Light, `body-sm` token
- Fragment type chips: Amber text on Amber at 15% opacity background
- Selection chips: Amethyst border when selected

## 12.7 Toast / Snackbar

- Position: Top of screen, below status bar
- Background: Deep Glass with 1px Twilight border
- Text: Soft Light, `body` token
- Duration: 3 seconds, dismissable with swipe up
- Corner radius: 12px
- Max width: screen width − 32px
- No action buttons on toasts. If an action is needed, use a bottom sheet.

---
---

# 13. App Store & Marketing

## 13.1 App Store Listing

**App Name:** Kalei — A new way to see

**Subtitle (30 chars):** Same pieces. New angle.

**Keywords:** reframe, perspective, mindset, CBT, mental wellness, journal, AI, thought patterns, positivity, cognitive

**Category:** Primary: Health & Fitness. Secondary: Lifestyle.

**App Store Description:** See Brand Metaphor document for full draft.

## 13.2 Screenshot Style

App Store screenshots should follow a consistent template:

- **Background:** Void with subtle prismatic gradient wash
- **Device frame:** Minimal or none (floating screen style)
- **Headline text above screen:** `display-lg` in Pure Light, centered
- **Screen content:** Actual app UI, not mockups
- **Pattern decoration:** Subtle kaleidoscope patterns in corners at low opacity

**Screenshot sequence (recommended):**
1. "A kaleidoscope for your mind" — Onboarding or hero screen
2. "Turn a fragment" — Kaleidoscope feature with reframe results
3. "The Mirror listens" — Mirror session with highlighted fragments
4. "Your patterns, your Gallery" — Gallery grid view
5. "Focus through the Lens" — Lens/goal feature
6. "Same pieces. New angle." — Brand statement with pattern visual

## 13.3 Marketing Taglines

| Context | Tagline |
|---------|---------|
| **Primary** | Same pieces. New angle. |
| **Descriptive** | A kaleidoscope for your mind. |
| **Action** | Turn how you see it. |
| **Discovery** | Find the pattern. |
| **Aspirational** | See every side. |

**Usage guidance:** "Same pieces. New angle." is the primary tagline and should appear in the majority of marketing materials. Other taglines are supporting options for specific contexts (ads, social, feature marketing).

## 13.4 Boilerplate Descriptions

**One-liner (10 words):**
Kalei turns negative thoughts into new perspectives. AI-powered.

**Short (30 words):**
Kalei is a kaleidoscope for your mind. Give it a negative thought and it reveals the beautiful patterns hidden inside — genuine perspective shifts grounded in cognitive science.

**Medium (75 words):**
Kalei is an AI-powered app that helps you see your life from new angles. Write freely in the Mirror and Kalei highlights the negative patterns you can't see yourself. Take any thought to the Kaleidoscope and see it reframed from multiple perspectives. Focus your clarity through the Lens toward the goals that matter. Every session generates a unique kaleidoscope pattern — building a personal Gallery of the moments you chose to see differently.

---
---

# 14. Social Media

## 14.1 Platform Presence

| Platform | Handle | Primary use |
|----------|--------|------------|
| Instagram | @kalei.app | Pattern Cards, brand visuals, reframe inspiration |
| TikTok | @kalei.app | Short-form demos, "Turn this" challenges, founder content |
| X (Twitter) | @kaleiapp | Product updates, CBT insights, engagement |
| LinkedIn | Kalei | Company updates, hiring, thought leadership |

## 14.2 Content Pillars

1. **Pattern of the day** (40%) — Shareable Pattern Cards with powerful reframes. These are the viral mechanic.
2. **Turn this** (25%) — Present a common negative thought and show the Turn. Educational and engaging.
3. **The science behind it** (20%) — Short, accessible explanations of CBT concepts, cognitive distortions, and the psychology of perspective.
4. **Product** (15%) — Feature demos, updates, user testimonials (anonymized), milestone celebrations.

## 14.3 Social Visual Standards

- **Background:** Always Void or Kalei Navy. Never white. Never platform defaults.
- **Text overlay:** Pure Light or Soft Light. Maximum 15 words per image.
- **Patterns:** Use real generated patterns, not stock geometric art.
- **No stock photos.** No generic wellness imagery. If photos are used, they follow the Photography guidelines.
- **Video:** Dark backgrounds, jewel-tone accents, subtle motion. No fast cuts or aggressive transitions.

## 14.4 Hashtag Strategy

**Branded:**
- #Kalei (primary)
- #TurnIt (for reframe challenges)
- #SamePiecesNewAngle (tagline)
- #KaleiPatterns (for shared patterns)

**Community:**
- #MindsetShift #PerspectiveShift #CognitiveReframing #MentalWellness #ThinkDifferently

---
---

# 15. Email & Notifications

## 15.1 Push Notification Voice

Push notifications are the most intimate touchpoint — they appear on the user's lock screen alongside messages from real people. They must feel personal, not promotional.

**Rules:**
- Maximum 60 characters (visible without expanding on most devices)
- No ALL CAPS words
- No exclamation marks (except rare milestone celebrations)
- No guilt-tripping ("We miss you!", "Don't break your streak!")
- One emoji maximum, and only 🔮 (crystal ball — the Kalei emoji)

**Notification types and cadence:**

| Type | Frequency | Time |
|------|-----------|------|
| Daily Turn prompt | 1x/day (if user opted in) | User-configured, default 9am |
| Streak maintenance | Only on day 3, 7, 30 milestones | Evening (7pm) |
| Streak at risk | Once, after 36 hours of no activity | Morning (10am) |
| Weekly Spectrum | 1x/week (Prism users) | Sunday 6pm |
| Feature announcement | Max 1x/month | Varies |
| Re-engagement | Once after 7 days inactive, once after 30 | Morning (10am) |

**Never send more than 1 push notification per day.**

## 15.2 Email Design

- **From name:** Kalei
- **From address:** hello@kalei.ai
- **Template:** Dark background (Void), single column, 600px max width
- **Logo:** Horizontal lockup, full-color on dark, top center
- **Headlines:** `display-md` equivalent, Pure Light
- **Body text:** `body` equivalent, Soft Light
- **CTA button:** Amethyst background, Pure Light text, rounded corners
- **Footer:** Dim Light text, minimal links (unsubscribe, privacy, help)
- **Pattern decoration:** Subtle pattern element in header area

**Email types:**
1. Welcome series (3 emails over first week)
2. Weekly Spectrum summary (Prism users)
3. Monthly progress narrative
4. Product updates (max 1x/month)
5. Re-engagement (7-day and 30-day)

---
---

# 16. Accessibility

## 16.1 Commitment

Kalei is built to be used by everyone. Accessibility is not an afterthought — it's a design constraint from day one. All features must meet WCAG 2.1 AA standards at minimum.

## 16.2 Visual Accessibility

- **Contrast ratios:** All text meets AA minimum (4.5:1 for normal text, 3:1 for large text). See Color Accessibility section.
- **Color is never the only indicator.** Fragment highlights use underline + icon + color. Success/error states use icon + color + text.
- **Dark mode only (v1)** reduces the need for light/dark switching, but ensure all elements have sufficient contrast on dark backgrounds.
- **Scalable text:** Support Dynamic Type (iOS) and system font scaling (Android). UI must not break at 200% text size.
- **Touch targets:** Minimum 44×44px for all interactive elements (Apple HIG standard).

## 16.3 Motion Accessibility

- **Respect "Reduce Motion" settings.** All animations degrade to crossfades or instant transitions.
- **No autoplay video or animation** that cannot be paused.
- **The Turn animation must degrade gracefully** — still communicates "processing → result" without rotation.
- **No flashing content.** Nothing flashes more than 3 times per second.

## 16.4 Screen Reader Support

- All interactive elements have descriptive `accessibilityLabel` properties
- Pattern images include alt text describing the emotional context ("Kaleidoscope pattern from your February 3rd Turn about work stress")
- Fragment highlights in the Mirror announce via screen reader: "[highlighted text] — possible [distortion type]. Double-tap to see another angle."
- Gallery patterns are navigable and describable
- Turn results are announced sequentially: "Pattern 1 of 3: [reframe text]"

## 16.5 Cognitive Accessibility

- **Simple, clear language** throughout the UI. Kalei vocabulary is poetic but never jargon-heavy.
- **No time pressure.** No countdown timers, no disappearing content, no "limited time" messaging.
- **Predictable navigation.** Tab bar is always visible. Back buttons always go back. No hidden gestures required for core functionality.
- **Error recovery.** Every action is undoable or confirmation-gated. Deleted Mirror sessions go to a 30-day recovery bin.

---
---

# 17. Brand Misuse

## 17.1 Logo Misuse

**Never:**
- ✗ Rotate, skew, or distort the logo
- ✗ Apply drop shadows, outer glows, or bevels
- ✗ Place on busy or patterned backgrounds without sufficient contrast
- ✗ Recolor the mark or wordmark in non-brand colors
- ✗ Outline the mark (it should always be filled)
- ✗ Crop or partially obscure the logo
- ✗ Recreate the wordmark in a different typeface
- ✗ Animate the logo in ways not specified in this guide
- ✗ Use the logo as a pattern element or wallpaper tile
- ✗ Place the logo smaller than minimum size specifications

## 17.2 Color Misuse

**Never:**
- ✗ Use Jewel Tones on light/white backgrounds (they lose their luminous quality)
- ✗ Replace Void/Navy backgrounds with grey or white
- ✗ Use pastel versions of the Jewel Tones
- ✗ Apply the prismatic gradient to large filled areas at full opacity
- ✗ Use Ruby (error red) for any purpose other than errors and destructive actions
- ✗ Mix Kalei colors with external brand colors in co-marketing without approval

## 17.3 Voice Misuse

**Never write Kalei copy that:**
- ✗ Uses exclamation marks excessively
- ✗ Sounds clinical ("Your cognitive distortion has been identified")
- ✗ Sounds overly casual ("Yo, let's fix that bad thought!")
- ✗ Sounds desperate ("PLEASE come back! We miss you SO much!")
- ✗ Makes medical claims ("Kalei cures anxiety")
- ✗ Guarantees outcomes ("You WILL feel better")
- ✗ Guilt-trips ("You're letting yourself down by not using Kalei")
- ✗ Compares to therapy ("Better than a therapist!")
- ✗ Uses gendered language ("Hey girl!")
- ✗ References specific religions or spiritual practices

## 17.4 Content Misuse

**Kalei should never be used or presented in contexts involving:**
- ✗ Medical diagnosis or treatment claims
- ✗ Replacement for professional therapy or psychiatric care
- ✗ Political content or partisan messaging
- ✗ Religious or spiritual promotion
- ✗ Multi-level marketing or affiliate schemes
- ✗ Content that trivializes mental health conditions

---
---

# 18. Asset Checklist

## 18.1 Required Brand Assets

| Asset | Formats | Sizes | Status |
|-------|---------|-------|--------|
| Logo — Stacked (color on dark) | SVG, PNG | 1x, 2x, 3x | TBD |
| Logo — Stacked (mono white) | SVG, PNG | 1x, 2x, 3x | TBD |
| Logo — Stacked (mono dark) | SVG, PNG | 1x, 2x, 3x | TBD |
| Logo — Horizontal (color on dark) | SVG, PNG | 1x, 2x, 3x | TBD |
| Logo — Horizontal (mono white) | SVG, PNG | 1x, 2x, 3x | TBD |
| Logo — Horizontal (mono dark) | SVG, PNG | 1x, 2x, 3x | TBD |
| Mark only (color) | SVG, PNG | 1x, 2x, 3x | TBD |
| Mark only (mono) | SVG, PNG | 1x, 2x, 3x | TBD |
| App icon (iOS) | PNG | 1024×1024 | TBD |
| App icon (Android) | PNG | 512×512 | TBD |
| Favicon | ICO, PNG | 32×32, 16×16 | TBD |
| Social avatar | PNG | 400×400 | TBD |
| OG image (default) | PNG | 1200×630 | TBD |
| Pattern Card template | Figma, PNG | 1080×1920, 1080×1080 | TBD |
| App Store screenshots | PNG | Per platform spec | TBD |
| Icon set (navigation) | SVG | 24×24 | TBD |
| Icon set (actions) | SVG | 24×24 | TBD |
| Icon set (distortion types) | SVG | 20×20 | TBD |
| Prismatic gradient (CSS) | CSS/code | — | Defined in this doc |
| Color tokens (design system) | JSON/Figma | — | Defined in this doc |
| Type tokens (design system) | JSON/Figma | — | Defined in this doc |
| Spacing tokens (design system) | JSON/Figma | — | Defined in this doc |

## 18.2 Design File Structure (Figma)

```
Kalei Design System/
├── 🎨 Foundations/
│   ├── Colors
│   ├── Typography
│   ├── Spacing & Grid
│   ├── Shadows & Elevation
│   └── Motion specs
├── 🧩 Components/
│   ├── Buttons
│   ├── Inputs
│   ├── Cards
│   ├── Navigation
│   ├── Modals & Sheets
│   ├── Chips & Tags
│   ├── Toasts
│   └── Empty States
├── 📱 Screens/
│   ├── Onboarding
│   ├── Turn (Kaleidoscope)
│   ├── Mirror
│   ├── Lens
│   ├── Gallery
│   ├── Spectrum (Phase 2)
│   ├── Profile & Settings
│   └── Upgrade Flow
├── 🖼️ Patterns/
│   ├── Generation examples
│   ├── Pattern Card templates
│   └── Marketing patterns
├── 📣 Marketing/
│   ├── App Store screenshots
│   ├── Social templates
│   ├── Email templates
│   └── Landing page
└── 📋 Brand/
    ├── Logo usage
    ├── Icon library
    └── Photography moodboard
```

---
---

# Appendix: Color Token Reference (Code)

```javascript
// Kalei Design Tokens — Colors
export const colors = {
  // Backgrounds
  void: '#050508',
  navy: '#0A0E1A',
  deepGlass: '#121628',
  twilight: '#1C2240',

  // Jewel Tones
  amethyst: '#8B5CF6',
  sapphire: '#3B82F6',
  emerald: '#10B981',
  ruby: '#EF4444',
  amber: '#F59E0B',
  rose: '#EC4899',

  // Text
  pureLight: '#FFFFFF',
  softLight: '#E2E8F0',
  dimLight: '#94A3B8',
  faintLight: '#475569',

  // Semantic
  actionPrimary: '#8B5CF6',   // amethyst
  actionSecondary: '#3B82F6', // sapphire
  success: '#10B981',         // emerald
  warning: '#F59E0B',         // amber
  error: '#EF4444',           // ruby
  disabled: '#1C2240',        // twilight
  focus: '#8B5CF680',         // amethyst 50%
};

// Prismatic Gradient (CSS)
export const prismaticGradient =
  'linear-gradient(135deg, #8B5CF6 0%, #3B82F6 25%, #10B981 50%, #F59E0B 75%, #EC4899 100%)';

// Prismatic Gradient (Reduced, for backgrounds)
export const prismaticGradientSubtle =
  'linear-gradient(135deg, rgba(139,92,246,0.3) 0%, rgba(59,130,246,0.3) 25%, rgba(16,185,129,0.3) 50%, rgba(245,158,11,0.3) 75%, rgba(236,72,153,0.3) 100%)';
```

# Appendix: Typography Token Reference (Code)

```javascript
// Kalei Design Tokens — Typography
export const typography = {
  displayXl: { size: 40, weight: '700', lineHeight: 48, letterSpacing: -0.8 },
  displayLg: { size: 32, weight: '700', lineHeight: 40, letterSpacing: -0.6 },
  displayMd: { size: 24, weight: '600', lineHeight: 32, letterSpacing: -0.2 },
  heading:   { size: 20, weight: '600', lineHeight: 28, letterSpacing: -0.2 },
  subheading:{ size: 16, weight: '600', lineHeight: 24, letterSpacing: 0 },
  bodyLg:    { size: 17, weight: '400', lineHeight: 26, letterSpacing: 0 },
  body:      { size: 15, weight: '400', lineHeight: 22, letterSpacing: 0 },
  bodySm:    { size: 13, weight: '400', lineHeight: 18, letterSpacing: 0.1 },
  label:     { size: 11, weight: '500', lineHeight: 16, letterSpacing: 0.5 },
};

export const fontFamily = {
  primary: 'Inter',
  display: 'Space Grotesk', // Optional, marketing only
};
```

# Appendix: Spacing Token Reference (Code)

```javascript
// Kalei Design Tokens — Spacing
export const spacing = {
  1: 4,
  2: 8,
  3: 12,
  4: 16,
  5: 20,
  6: 24,
  8: 32,
  10: 40,
  12: 48,
  16: 64,
};

export const radius = {
  sm: 2,    // Icons
  md: 10,   // Buttons, inputs
  lg: 16,   // Cards, modals
  xl: 20,   // Bottom sheets
  full: 999, // Pills, chips, avatars
};
```

---

*The glass hasn't changed. But you have.*

**© 2026 Kalei. All rights reserved.**