Habit Huddle

🎨 Habit Huddle UI System

A simple, consistent design system: Emerald = Action, Grey = Info, Red = Danger

CLICKABLE TEXT:

Emerald Link Bold Link

PRIMARY (Most Important Action):

White text + Emerald gradient + White border • Use for: Checkin, Save, Submit

SECONDARY (Standard Actions):

Emerald text + Transparent emerald BG + White border • Use for: Reply, Invite, Edit, most actions

INFO (View/Read-Only):

Grey text + Grey BG + White border • Use for: View, Details, Manage, Info

FILTER/TOGGLE (Navigation):

White text + White border • Use for: Filters, tabs, toggles with chevrons

DESTRUCTIVE (Dangerous):

Red text + Red BG + White border • Use for: Delete, Leave, Remove

✨ KEY IMPROVEMENTS:

• ONE border color: All buttons use white/20 border (not emerald/red borders that blend in)
• Simpler hierarchy: Primary → Secondary → Info → Filter → Destructive
• No sky-blue: "Manage" is now grey (info) not blue
• Consistent sizing: All use px-3 py-1.5 for regular, px-4 py-2 for large
• Clear purpose: Each type has a specific use case

by Karenny Eusebio

✅

The Floor · just show up

Take one sip of water

🎯

The Ceiling · burst through it

Drink a full 16-ounce glass of water

best 🔥 2

📋 The Playbook why this habit works

🏆 What do I want to achieve?

Have more energy throughout the day

👤 Who do I want to become?

I am a person who prioritizes my physical health and vitality

❓ Checkin Question

What did you accomplish?

⏰ Cue / Trigger

Walk into the kitchen after waking up

💬 Mantra

Hydrate to vibrate

❤️ Why

I want to do this because being hydrated first thing in the morning wakes up my system, boosts my metabolism, and helps me feel more alert and energized without relying solely on caffeine.

Tags: Nutrition, Self-Care