43 lines
2.9 KiB
Markdown
43 lines
2.9 KiB
Markdown
|
# 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
|