letsbe/kalei
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit: Kalei app — docs, mockups, logo, pitch deck

Browse Source 
Complete project files including:
- 73 polished HTML mockup screens (onboarding, turn, mirror, lens, gallery, you, ritual, spectrum, modals, guide)
- Design system CSS with Inter font, jewel-tone palette, device frame scaling
- Canonical 6-blade kaleidoscope logo (soft-elegance-final)
- SVG asset library (fragments, icons, patterns, evidence wall, spectrum viz)
- Product docs, brand guidelines, technical architecture, build phases
- Pitch deck and cost projections
- Logo mockup iterations and finalists

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matt
2026-02-22 14:55:22 +01:00
commit 38021c4633
168 changed files with 46724 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
initial mockups/screens/onboarding/08-first-turn.html Normal file
View File

@@ -0,0 +1,224 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=390, initial-scale=1">
<title>Kalei — Your First Turn</title>
<link rel="stylesheet" href="../../assets/design-system.css">
<style>
.screen-content {
padding: var(--space-6) var(--space-4) 120px;
position: relative;
}
.textarea-wrap {
position: relative;
margin-bottom: var(--space-4);
}
.textarea-aura {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 340px;
height: 240px;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(139,92,246,0.12) 0%, transparent 70%);
filter: blur(40px);
animation: breathing 6s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.thought-textarea {
position: relative;
z-index: 1;
width: 100%;
height: 200px;
background: var(--deep-glass);
border: 1px solid var(--twilight);
border-radius: var(--radius-xl);
padding: var(--space-5);
font-family: var(--font-primary);
font-size: 17px;
line-height: 1.6;
color: var(--pure-light);
outline: none;
resize: none;
transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}
.thought-textarea::placeholder { color: var(--faint-light); }
.thought-textarea:focus {
border-color: var(--amethyst);
box-shadow: 0 0 0 1px rgba(139,92,246,0.2), 0 0 20px rgba(139,92,246,0.3);
}
.fragment-hint {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-6);
}
.hint-icon {
flex-shrink: 0;
animation: hintIconPulse 2s ease-in-out infinite;
}
@keyframes hintIconPulse {
0%, 100% { opacity: 0.75; transform: scale(1); }
50% { opacity: 1; transform: scale(1.12); }
}
.prompts-label {
color: var(--faint-light);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--space-3);
}
.prompt-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.prompt-chip {
padding: var(--space-1) var(--space-3);
background: var(--deep-glass);
border: 1px solid var(--twilight);
border-radius: var(--radius-full);
color: var(--dim-light);
cursor: pointer;
transition: all 0.2s ease-out;
}
.prompt-chip:hover {
border-color: var(--amethyst);
background: rgba(139,92,246,0.08);
color: var(--amethyst-light);
}
.cta-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-4) var(--space-4) var(--space-6);
background: linear-gradient(to top, var(--void) 70%, transparent);
}
.btn-turn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
height: 56px;
width: 100%;
background: var(--amethyst);
color: var(--pure-light);
font-family: var(--font-primary);
font-size: 17px;
font-weight: 600;
border-radius: var(--radius-xl);
text-decoration: none;
box-shadow: 0 0 24px rgba(139,92,246,0.35);
transition: all 0.2s ease-out;
}
.btn-turn:hover {
background: var(--amethyst-light);
box-shadow: 0 0 32px rgba(139,92,246,0.5);
}
</style>
</head>
<body>
<div class="device-frame">
<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>
<div class="screen-content">
<h1 class="display-md text-pure" style="margin-bottom: var(--space-2);">What's the thought?</h1>
<p class="body text-dim" style="margin-bottom: var(--space-5);">Write it exactly as it sounds in your head — raw, unfiltered, even a little ugly. Kalei works better with the real version.</p>
<div class="textarea-wrap">
<div class="textarea-aura"></div>
<textarea class="thought-textarea" placeholder="The thought that keeps running on repeat..."></textarea>
</div>
<div class="fragment-hint">
<!--
Hint icon — extracted from fragment-icons.svg → Amethyst XS (radius 6)
Centred at 0,0 in 14×14 viewport (translate 7,7)
-->
<svg class="hint-icon" width="14" height="14" viewBox="0 0 14 14">
<defs>
<linearGradient id="s08-hintGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#C4B5FD"/>
<stop offset="100%" stop-color="#7C3AED"/>
</linearGradient>
</defs>
<g transform="translate(7,7)">
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#s08-hintGrad)" opacity="0.75"/>
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
<circle cx="-1.5" cy="-1.5" r="0.8" fill="#fff" opacity="0.3"/>
</g>
</svg>
<span class="body-sm text-faint" style="font-style: italic;">The Turn will show you new angles on this thought</span>
</div>
<div>
<p class="body-sm prompts-label">Try a prompt</p>
<div class="prompt-chips">
<div class="prompt-chip body-sm" onclick="usePrompt('work')">Something at work</div>
<div class="prompt-chip body-sm" onclick="usePrompt('relationship')">A relationship</div>
<div class="prompt-chip body-sm" onclick="usePrompt('self')">Something about myself</div>
<div class="prompt-chip body-sm" onclick="usePrompt('mistake')">A recent mistake</div>
</div>
</div>
</div>
<div class="cta-bar">
<a href="09-welcome-complete.html" class="btn-turn">
<!--
Button icon — extracted from fragment-icons.svg → Amethyst SM (radius 8)
Centred at 0,0 in 20×20 viewport (translate 10,10), white fill (on coloured button bg)
-->
<svg width="20" height="20" viewBox="0 0 20 20">
<g transform="translate(10,10)">
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="white" opacity="0.35"/>
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="white" opacity="0.2"/>
<line x1="0" y1="-8" x2="0" y2="8" stroke="#fff" stroke-width="0.5" opacity="0.3"/>
<circle cx="-2" cy="-2" r="1" fill="#fff" opacity="0.5"/>
</g>
</svg>
Turn the kaleidoscope
</a>
</div>
</div>
<script>
var prompts = {
work: "I feel like I'm constantly behind and my team is starting to notice how much I'm struggling to keep up.",
relationship: "I keep pulling away from people I care about — I don't know why I do it, but I always end up alone.",
self: "I don't deserve the things I've been given. It's only a matter of time before people figure out I'm not actually that capable.",
mistake: "I said something really hurtful and now I can't stop replaying the look on their face. I ruined everything."
};
function usePrompt(key) {
var textarea = document.querySelector('.thought-textarea');
textarea.value = prompts[key];
textarea.focus();
}
</script>
</body>
</html>