kalei/docs/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)

// 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)

// 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)

// 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.