| name | brand-guidelines |
| description | Unified brand identity for Clue Symptom Tracker. Combines visual design (Podia-inspired warmth) with voice/tone (Compassionate Analyst). Use when ensuring brand consistency across UI, copy, marketing, or any user-facing content. Essential reference for maintaining the energy-conscious, validation-first experience Spoonies need. |
| license | Complete terms in LICENSE.txt |
Clue Brand Guidelines
This skill defines the unified brand identity for Clue Symptom Tracker — a prediction-first app for people with chronic, energy-limiting conditions.
Brand Essence
Taglines:
"Track symptoms without draining your energy"
"Low-effort, non-judgmental, flexible symptom tracking that works on bad days and doesn’t create guilt"
"Predict your next flare before it hits."
Persona: The Compassionate Analyst — warm and understanding, but also capable and trustworthy. Not a taskmaster. Not toxic positivity. Data-driven empathy.
Target Audience: "Spoonies" — people with ME/CFS, Fibromyalgia, POTS, Long COVID, Endometriosis, etc. who have limited cognitive and physical reserves.
Visual Identity
Color Palette
Primary Colors
──────────────────────────────────────────
primary: #20132E // Dark navy - text, buttons, user chat bubbles
primary-light: #F3F0FA // Very light purple - hover states
Backgrounds
──────────────────────────────────────────
background-light: #FDFBF9 // Warm cream - main background (NEVER pure white)
card-light: #FFFFFF // White - card surfaces
surface-light: #FFFFFF // White - elevated surfaces
Pastel Accents (decorative + functional)
──────────────────────────────────────────
accent-peach: #E8974F // Orange - energy, digestive, warmth
accent-blue: #A4C8D8 // Blue - sleep, calm, decorative blobs
accent-purple: #D0BDF4 // Purple - selected states, progress
accent-mint: #B8E3D6 // Teal - positive states, Focus badge
Selection States
──────────────────────────────────────────
pill-hover: #F3EFFF // Light purple hover
pill-selected: #E0D4FC // Purple selected background
Text
──────────────────────────────────────────
text-main: #20132E // Dark navy
text-muted: #554B66 // Muted purple-gray
Typography
| Role | Font | Weights | Usage |
|---|
| Display | Fraunces (serif) | 300, 600 | Headlines, emotional moments |
| Body | Inter / DM Sans | 400, 500, 600, 700 | UI text, buttons, body copy |
Sizing:
- Display headlines: 34-40px, Fraunces semibold, tight leading
- Body text: 16-18px, Inter/DM Sans, relaxed leading
- Labels: 12-14px, Inter, uppercase tracking for section labels
Spacing & Radius
Border Radius
──────────────────────────────────────────
DEFAULT: 12px // Standard elements
xl: 16px // Cards
2xl: 24px // Large cards
3xl: 32px // Chat bubbles
pill: 9999px // Pills, buttons
Shadows
──────────────────────────────────────────
soft: 0 4px 20px -2px rgba(0, 0, 0, 0.05)
card: 0 2px 12px -2px rgba(32, 20, 69, 0.05)
Visual Elements
Decorative Blobs: Soft, positioned absolutely, pointer-events-none. Create warmth without distraction.
No Emojis: Icons only. Emojis feel juvenile and inconsistent across platforms.
Neutral Intensity: Never color-code judgment (red = bad). Use neutral indicators for symptom scales.
Voice & Tone
Five Core Principles
1. Reduce Cognitive Load
Brain fog makes processing exhausting. Every word earns its place.
| ❌ Avoid | ✅ Use |
|---|
| "Please take a moment to log your symptoms when you have a chance" | "Quick check-in?" |
| "Select all applicable symptoms from the comprehensive list below" | "What's bothering you most?" |
Rules: Simple language. One question per screen. 30-second max check-ins.
2. Validate, Don't Dismiss
Users have been told "it's all in your head." Every interaction signals: we believe you.
| ❌ Avoid | ✅ Use |
|---|
| "Try to stay positive!" | "That sounds incredibly challenging." |
| "It's probably just..." | "I hear you." |
Rules: Acknowledge difficulty explicitly. Never minimize or reframe their experience.
3. Permission, Not Restriction
Empower choice, don't impose limitations. Users already feel restricted by their conditions.
| ❌ Avoid | ✅ Use |
|---|
| "You should rest" | "Rest might help today" |
| "You need to track this" | "You might want to note this" |
Rules: Frame as suggestions. Use "might", "could", "when you're ready".
4. Neutral, Not Judgmental
The app must never make users feel worse about bad days.
| ❌ Avoid | ✅ Use |
|---|
| "Bad day" | "High intensity day" |
| "You only logged 2 days" | "You logged 2 days" |
| Pain: 😢 | Pain: ● (neutral indicator) |
Rules: No sad emojis. No streak gamification. 6/10 might be a victory — don't assume.
5. Personalize for Connection
Generic messages feel cold. Reference their specific context.
| ❌ Avoid | ✅ Use |
|---|
| "Track your symptoms" | "How's the fatigue today?" |
| "Check your insights" | "Your sleep patterns are ready to explore" |
Word Swaps (Quick Reference)
| Clinical/Cold | Warm/Human |
|---|
| Symptom severity | How intense |
| Log your data | Quick check-in |
| Submit | Save |
| Patient | You |
| Chronic illness | What you're managing |
| Compliance | Consistency |
| Baseline assessment | Starting point |
| Track | Note / Capture |
| Analyze | Understand |
| Data visualization | Your patterns |
Tone Adaptation (Traffic Light)
🟢 Good Day
User seems energetic. Can use slightly longer copy, offer more options.
- "Want to explore your patterns? We found something interesting."
🟡 Moderate
User shows fatigue signs. Simplify, shorten.
- "Quick check-in?"
- "Just the basics today?"
🔴 Flare/Crisis
User is struggling. Minimal words, maximum support.
- "Got it."
- "Rest up."
- "We're here."
Anti-Patterns (NEVER Use)
Visual
- ❌ Pure white backgrounds (use warm cream #FDFBF9)
- ❌ Sharp corners on cards (always round 16px+)
- ❌ Heavy drop shadows
- ❌ Emojis (use icons from design system)
- ❌ Judgmental iconography (sad faces, red = bad)
- ❌ Small touch targets (minimum 48px)
Copy
- ❌ "You broke your streak!"
- ❌ "You haven't logged in X days"
- ❌ "Stay positive!"
- ❌ "Mind over matter"
- ❌ "It's probably nothing"
- ❌ "Submit symptom log" (clinical coldness)
UX
- ❌ Streak gamification
- ❌ Points/badges/leaderboards
- ❌ Required daily logging
- ❌ Multiple text inputs per screen
- ❌ Dense forms
- ❌ Aggressive animations
Brand Application Examples
Insight Message
✅ "Noticed something: your migraines often follow poor sleep by 48 hours."
❌ "Data analysis shows a 73% correlation between sleep deficit and migraine onset."
Flare Mode Entry
✅ "Got it. Rest up. Logging basics only."
❌ "Flare mode activated. Required metrics will still be tracked."
Error State
✅ "Couldn't save that one. It's stored locally — we'll sync when we can."
❌ "Error: Network request failed. Retry?"
Doctor Pack Export
✅ "Your report is ready. Show your doctor what your days really look like."
❌ "PDF export complete. 47 data points included."
Design System References
- Full visual patterns:
.claude-skills/frontend-design/SKILL.md
- Full copy guidelines:
.claude-skills/spoonie-copywriter/SKILL.md
- Design source images:
all-ui-images-and-code/
- Design philosophy:
context/design-inspiration-overview.md
