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 _emo097

✅ Say one thing I am hopeful for out loud

🎯 Write down three specific positive outcomes I am looking forward to in the coming week

best 🔥 2

📋 The Playbook why this habit works

❓ Checkin Question

What did you accomplish?

⏰ Cue / Trigger

Placing my phone on the charger at night

👤 Identity

I am a person who looks for the light in every situation

🏆 Long-term Goal

Develop a consistently optimistic and resilient mindset

💬 Mantra

I expect good things to happen

❤️ Why

I want to do this to rewire my brain to notice positive possibilities and build my resilience during challenging times, allowing me to approach each day with anticipation rather than dread.

Tags: Mindfulness, Resilience, Self-Care