🔮 Core Principles

💗

Emotion First

Design makes you feel good before it makes you think

🌈

Radiant Energy

Gradients that inspire motion and positive change

🤝

Human Connection

Real faces, rounded frames, and personality

✨

Positive Flow

Language and layout designed to uplift

🌈 Color System

Gradient Palettes

Primary

Main Gradient

#FF0066 → #FF5C00 → #9900FF

Secondary

Card Gradient

#F9A8D4 → #FDE68A → #C084FC

Support Colors

Aa

White

#FFFFFF

Aa

Button Text

#8B5CF6

●

Avatar Pink

#FECACA

●

Avatar Yellow

#FDE68A

●

Lavender

#E9D5FF

💡 Color Usage:

Use gradients for backgrounds and hero sections
Keep buttons white with colored text for clarity
Avatar backgrounds should be soft pastels
Always use top-to-bottom or corner gradients

✍️ Typography

Hero Heading • Poppins Extra Bold • 64-72px

Self-Love Habits
That Work

Subhead/Body • Poppins Regular • 18-20px

Join thousands who are building healthier, happier lives – one small habit at a time

Button Text • Poppins Medium/Bold • 16px

Get early access

/* Typography Tokens */
--font-family: 'Poppins', sans-serif;
--size-hero: 64-72px;
--size-body: 18-20px;
--size-button: 16px;
--weight-extra-bold: 800;
--weight-regular: 400;
--weight-medium: 500;

🧩 UI Components

Primary Button

Avatar Styles

😊

🌟

💪

Decorative Elements

📋 Voice & Tone

Microcopy Guidelines

✓ Do: "Get early access", "Start today", "Let's go"

✗ Don't: "Submit", "Click here", "Sign up now"

✓ Do: Use dashes – not commas – for breathable rhythm

✗ Don't: Use formal, corporate language

✓ Do: Focus on benefits: "Self-Love Habits That Work"

✗ Don't: Focus on features: "Advanced Habit Tracking System"

📲 Native Mobile Translation

Onboarding Screen

Welcome! 👋

Let's build habits that make you smile

Habit Tracker

21

Day Streak! 🔥

Today's Mood

😔😐🙂😊🤩

SwiftUI Implementation

// GlowHabit Colors
extension Color {
    static let ghGradientColors = [
        Color(hex: "FF0066"),
        Color(hex: "FF5C00"),
        Color(hex: "9900FF")
    ]
    static let ghButtonText = Color(hex: "8B5CF6")
    static let ghAvatarPink = Color(hex: "FECACA")
    static let ghAvatarYellow = Color(hex: "FDE68A")
}

// Gradient Background
struct GHGradientBackground: View {
    var body: some View {
        LinearGradient(
            colors: Color.ghGradientColors,
            startPoint: .topLeading,
            endPoint: .bottomTrailing
        )
        .ignoresSafeArea()
    }
}

// Primary Button
struct GHButton: View {
    let title: String
    let emoji: String?
    let action: () -> Void
    
    var body: some View {
        Button(action: action) {
            HStack {
                Text(title)
                if let emoji = emoji {
                    Text(emoji)
                }
            }
            .font(.custom("Poppins-SemiBold", size: 16))
            .foregroundColor(.ghButtonText)
            .padding(.horizontal, 40)
            .padding(.vertical, 20)
            .background(Color.white)
            .cornerRadius(9999)
            .shadow(color: .black.opacity(0.1), radius: 16, y: 8)
        }
    }
}

💡 Extension Ideas

📊

Streak Tracker

🏆

Rewards

👥

Community

📅

Calendar

🔖 Design Tokens

:root {
  /* Gradients */
  --gradient-main: linear-gradient(135deg, #FF0066, #FF5C00, #9900FF);
  --gradient-secondary: linear-gradient(135deg, #F9A8D4, #FDE68A, #C084FC);
  
  /* Colors */
  --color-white: #FFFFFF;
  --color-text-dark: #1F2937;
  --color-highlight-yellow: #FDE68A;
  --color-highlight-pink: #FECACA;
  --color-button-text: #8B5CF6;
  --color-lavender: #E9D5FF;
  
  /* Typography */
  --font-family: 'Poppins', sans-serif;
  
  /* Border Radius */
  --radius-avatar: 24px;
  --radius-button: 9999px;
  --radius-card: 32px;
  
  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 96px;
  --space-2xl: 128px;
}

GlowHabit