186 lines
5.6 KiB
HTML
186 lines
5.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Kalei SVG Asset Library — Preview</title>
|
||
|
|
<style>
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
|
||
|
|
body {
|
||
|
|
background: #050508;
|
||
|
|
color: #E2E8F0;
|
||
|
|
font-family: 'Inter', sans-serif;
|
||
|
|
padding: 40px;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
font-family: 'Space Grotesk', sans-serif;
|
||
|
|
font-size: 32px;
|
||
|
|
font-weight: 700;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
background: linear-gradient(135deg, #8B5CF6, #3B82F6, #10B981, #F59E0B, #EC4899);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
}
|
||
|
|
.subtitle { color: #94A3B8; font-size: 14px; margin-bottom: 40px; }
|
||
|
|
.section {
|
||
|
|
margin-bottom: 48px;
|
||
|
|
border-bottom: 1px solid rgba(28,34,64,0.5);
|
||
|
|
padding-bottom: 32px;
|
||
|
|
}
|
||
|
|
.section h2 {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #A78BFA;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
letter-spacing: 0.03em;
|
||
|
|
}
|
||
|
|
.section .desc {
|
||
|
|
font-size: 13px;
|
||
|
|
color: #94A3B8;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
.section .file-name {
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #475569;
|
||
|
|
background: #121628;
|
||
|
|
display: inline-block;
|
||
|
|
padding: 3px 10px;
|
||
|
|
border-radius: 6px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
font-family: monospace;
|
||
|
|
}
|
||
|
|
.asset-frame {
|
||
|
|
background: #0A0E1A;
|
||
|
|
border: 1px solid #1C2240;
|
||
|
|
border-radius: 16px;
|
||
|
|
padding: 24px;
|
||
|
|
overflow: auto;
|
||
|
|
max-height: 600px;
|
||
|
|
}
|
||
|
|
.asset-frame object, .asset-frame img {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 600px;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
.grid-2 {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
gap: 24px;
|
||
|
|
}
|
||
|
|
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h1>KALEI ASSET LIBRARY</h1>
|
||
|
|
<p class="subtitle">All SVG assets for the Kalei platform, derived from the soft-elegance logo visual language. 12 files, 100+ elements.</p>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>Tab Bar Icons</h2>
|
||
|
|
<div class="desc">5 navigation icons (Turn, Mirror, Lens, Gallery, You) in active + inactive states</div>
|
||
|
|
<div class="file-name">icons-tab-bar.svg</div>
|
||
|
|
<div class="asset-frame">
|
||
|
|
<object type="image/svg+xml" data="icons-tab-bar.svg"></object>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>Cognitive Distortion Icons</h2>
|
||
|
|
<div class="desc">10 fragment type icons for Mirror feature detection</div>
|
||
|
|
<div class="file-name">icons-distortions.svg</div>
|
||
|
|
<div class="asset-frame">
|
||
|
|
<object type="image/svg+xml" data="icons-distortions.svg"></object>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>Action & UI Icons</h2>
|
||
|
|
<div class="desc">30 icons for navigation, actions, status, and feature-specific use</div>
|
||
|
|
<div class="file-name">icons-actions.svg</div>
|
||
|
|
<div class="asset-frame">
|
||
|
|
<object type="image/svg+xml" data="icons-actions.svg"></object>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>Fragment Icons & Highlights</h2>
|
||
|
|
<div class="desc">The core ◇ fragment in 5 sizes, 8 color states, plus highlight effects</div>
|
||
|
|
<div class="file-name">fragment-icons.svg</div>
|
||
|
|
<div class="asset-frame">
|
||
|
|
<object type="image/svg+xml" data="fragment-icons.svg"></object>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>Decorative Shard Elements</h2>
|
||
|
|
<div class="desc">Background auras, floating shards, dividers, corner accents, edge shimmers</div>
|
||
|
|
<div class="file-name">decorative-shards.svg</div>
|
||
|
|
<div class="asset-frame">
|
||
|
|
<object type="image/svg+xml" data="decorative-shards.svg"></object>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid-2">
|
||
|
|
<div class="section">
|
||
|
|
<h2>Kaleidoscope Patterns</h2>
|
||
|
|
<div class="desc">7 pattern variants for cards, Gallery, and hero displays</div>
|
||
|
|
<div class="file-name">patterns-kaleidoscope.svg</div>
|
||
|
|
<div class="asset-frame">
|
||
|
|
<object type="image/svg+xml" data="patterns-kaleidoscope.svg"></object>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>Progress Indicators</h2>
|
||
|
|
<div class="desc">Rings, bars, calendars, timers, counters</div>
|
||
|
|
<div class="file-name">progress-indicators.svg</div>
|
||
|
|
<div class="asset-frame">
|
||
|
|
<object type="image/svg+xml" data="progress-indicators.svg"></object>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>Evidence Wall</h2>
|
||
|
|
<div class="desc">Tile shapes, mosaic compositions (early/mid/full), empty state</div>
|
||
|
|
<div class="file-name">evidence-wall.svg</div>
|
||
|
|
<div class="asset-frame">
|
||
|
|
<object type="image/svg+xml" data="evidence-wall.svg"></object>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>Loading & Animation States</h2>
|
||
|
|
<div class="desc">Spinners, skeleton shimmers, Turn animation, AI thinking, success burst</div>
|
||
|
|
<div class="file-name">loading-animations.svg</div>
|
||
|
|
<div class="asset-frame">
|
||
|
|
<object type="image/svg+xml" data="loading-animations.svg"></object>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>Device Chrome</h2>
|
||
|
|
<div class="desc">Status bar, tab bar, nav header, keyboard, device frame, modal scrim, toast</div>
|
||
|
|
<div class="file-name">device-chrome.svg</div>
|
||
|
|
<div class="asset-frame">
|
||
|
|
<object type="image/svg+xml" data="device-chrome.svg"></object>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>Spectrum Visualizations</h2>
|
||
|
|
<div class="desc">The River, Your Glass, Turn Impact, Rhythm Detection, Growth Trajectory</div>
|
||
|
|
<div class="file-name">spectrum-visualizations.svg</div>
|
||
|
|
<div class="asset-frame">
|
||
|
|
<object type="image/svg+xml" data="spectrum-visualizations.svg"></object>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="text-align: center; padding: 40px 0; color: #475569; font-size: 12px;">
|
||
|
|
Kalei Asset Library — 12 SVG files, 100+ elements, 1 CSS design system
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|