🎯 Design Goals

Safe for the mind

Like meditation, but smarter - creating a space for mental clarity

Elegant & effortless

Minimal cognitive load with maximum aesthetic appeal

Scientifically warm

Technology that feels human, not clinical or cold

Gradient-rich clarity

Vibrant halos that enhance focus without distraction

🌈 Color System & Usage Rules

Background Layers

Sky

Background Sky

#DFF1FF

White

Background White

#FFFFFF

Halo

Gradient Halo

Blurred gradients

Dark

Soft Dark (Optional)

#1C1C1C

🧠 Golden Rule: Dark text on light gradients, and white text on halo overlays or dark backgrounds. Never layer black on blur unless it's full white underneath.

Text Color Usage Rules

Text Color	Background Context	Contrast Rule
#111111 (dark grey-black)	On #FFFFFF or #DFF1FF	✔️ Default for all serif/body
#FFFFFF (pure white)	On any deep gradient or dark background	✔️ Hero text or modal overlay
#888888 (soft gray)	On white or pale blue	Use for captions, secondary text
#00000080 (black @ 50%)	Over light gradients or outlines	Used for microcopy or icons
#222222	On lightly blurred gradients	More depth while staying subtle

🔤 Typography

Hero Headline • Crimson Text • 64-80px • Color: #111111 on light

Your Mind's Companion

Subtext • Inter Regular • 16-18px • Color: #888888

A tranquil space where AI meets consciousness. Track thoughts, enhance memory, and find clarity.

Button Text • Inter Medium • 16px • Color: #FFFFFF on dark

Begin Journey

🖼 Gradient Rendering

Halo Effect

Blur: 120-180px • Opacity: 60%

.halo-bg {
  position: absolute;
  width: 1000px;
  height: 1000px;
  background: radial-gradient(
    circle at center,
    #FFA6A0 0%,
    #FCE96B 25%,
    #A0D2FF 50%,
    #E1B7FF 75%,
    transparent 100%
  );
  filter: blur(180px);
  opacity: 0.6;
  z-index: -1;
}

🔘 Components & Button Usage

On Sky Background

On White Background

On Dark Background

📱 Interface Examples

Light Mode - Memory Interface

MindHalo Assistant

Always listening, never judging

"I notice patterns in your thinking..."

Dark Mode - Deep Focus

When clarity matters most

✅ Best Practices

✓ Do

Use halos as ambient background elements
Keep UI black and white - let halos add feeling
Apply slow animations to gradients (drift, pulse)
Use white cards on sky backgrounds
Maintain high contrast for readability

✗ Don't

Place text directly on gradient halos
Mix multiple halos in one viewport
Use gradients for functional UI elements
Apply heavy blur that reduces clarity
Use bright colors for text

📲 Native Mobile Adaptation

Welcome back

Your thoughts await

SwiftUI Implementation

// MindHalo Colors
extension Color {
    static let mhSky = Color(hex: "DFF1FF")
    static let mhTextDark = Color(hex: "111111")
    static let mhTextGray = Color(hex: "888888")
    static let mhGradient1 = Color(hex: "FFA6A0")
    static let mhGradient2 = Color(hex: "FCE96B")
    static let mhGradient3 = Color(hex: "A0D2FF")
    static let mhGradient4 = Color(hex: "E1B7FF")
}

// Halo Background
struct MHHaloBackground: View {
    var body: some View {
        RadialGradient(
            colors: [.mhGradient1, .mhGradient2, .mhGradient3, .mhGradient4, .clear],
            center: .center,
            startRadius: 0,
            endRadius: 400
        )
        .blur(radius: 120)
        .opacity(0.6)
        .ignoresSafeArea()
    }
}

📋 Design Tokens

:root {
  /* Backgrounds */
  --bg-sky: #DFF1FF;
  --bg-white: #FFFFFF;
  --bg-soft-dark: #1C1C1C;
  
  /* Text Colors */
  --text-dark: #111111;
  --text-gray: #888888;
  --text-muted: rgba(0, 0, 0, 0.5);
  --text-light: #FFFFFF;
  
  /* Gradient Colors */
  --gradient-1: #FFA6A0;
  --gradient-2: #FCE96B;
  --gradient-3: #A0D2FF;
  --gradient-4: #E1B7FF;
  
  /* Buttons */
  --btn-bg-light: #FFFFFF;
  --btn-bg-dark: #111111;
  --btn-text-light: #111111;
  --btn-text-dark: #FFFFFF;
  
  /* Typography */
  --font-serif: 'Crimson Text', 'Georgia', serif;
  --font-sans: 'Inter', 'Helvetica Neue', sans-serif;
  
  /* Border Radius */
  --radius-pill: 9999px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 8px;
}

MindHalo™