# Kalei SVG Asset Library — Index

All assets derive their visual language from the **soft-elegance-final.svg** logo: crystalline geometry, jewel tone gradients, glow filters, breathing animations, and prismatic color cycling.

## Files

| File | Description | Elements |
|------|-------------|----------|
| `design-system.css` | Shared CSS with all design tokens, components, animations | Colors, typography, buttons, cards, inputs, utilities |
| `icons-tab-bar.svg` | 5 navigation tab icons | Turn ◇, Mirror ✦, Lens ◎, Gallery ▦, You ● — active + inactive states |
| `icons-distortions.svg` | 10 cognitive distortion type icons | Catastrophizing, Black-and-White, Mind Reading, Fortune Telling, Personalization, Discounting Positives, Emotional Reasoning, Should Statements, Labeling, Overgeneralization |
| `icons-actions.svg` | 30 action/UI icons | Navigation, actions, status, feature-specific, media controls |
| `fragment-icons.svg` | Fragment ◇ variants + highlight effects | 5 sizes (xs-xl), 8 color states, highlight underline, highlight bubble |
| `decorative-shards.svg` | Background decorative elements | Breathing aura, floating shards, prismatic divider, corner accent, hero shard, shard cluster, orbiting motes, edge shimmer |
| `patterns-kaleidoscope.svg` | 7 kaleidoscope pattern variants | Turn pattern, Mirror pattern, Ritual pattern, Simple, Complex, Thumbnail, Hero |
| `progress-indicators.svg` | 8 progress visualization types | Large/small rings, linear bar, step dots, streak calendar, ritual bar, timer, evidence counter |
| `evidence-wall.svg` | Evidence Wall mosaic system | 5 tile shapes, 3 mosaic stages (early/mid/full), connection lines, empty state |
| `loading-animations.svg` | 10 loading/animation states | Spinners, skeleton shimmers, Turn animation, breathing logo, AI thinking, success burst |
| `device-chrome.svg` | 8 device frame elements | Status bar, tab bar frame, nav header, iOS keyboard, device frame, modal scrim, toast, input accessory |
| `spectrum-visualizations.svg` | 5 Spectrum analytics visualizations | The River, Your Glass, Turn Impact, Rhythm Detection, Growth Trajectory |

## Color Reference

| Token | Hex | Usage |
|-------|-----|-------|
| Void | `#050508` | Deepest background |
| Kalei Navy | `#0A0E1A` | Primary surfaces |
| Deep Glass | `#121628` | Elevated surfaces, inputs |
| Twilight | `#1C2240` | Borders, dividers |
| Amethyst | `#8B5CF6` | Primary accent, Turn |
| Sapphire | `#3B82F6` | Info, Gallery |
| Emerald | `#10B981` | Success, Lens |
| Amber | `#F59E0B` | Fragments, Mirror |
| Rose | `#EC4899` | Social, sharing |
| Ruby | `#EF4444` | Error, destructive |
| Indigo | `#6366F1` | Extended palette |

## Total Asset Count

- **11 SVG files** containing **100+ individual elements**
- **1 CSS design system** with complete component library
- All assets use consistent prismatic color palette and crystalline design language