🎨 Habit Huddle UI System
A simple, consistent design system: Emerald = Action, Grey = Info, Red = Danger
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
Xwater's Pool Party's Huddle
10 members
Join Xwater's Pool Party's Huddle
Start building habits with this community today!
The habit you get when you join
or you can create your own
Habit Huddle starter habit
✅
Do 10 Squats
🎯
20 Squats
34 people run this
Not your style? You can swap in a habit of your own after you join.
📋 The Playbook
why this habit works
⏰ Cue / Trigger
Xwater goes live
👤 Identity
I am physically fit
🏆 Long-term Goal
Increase the strength in my body and legs for the longevity of my life
💬 Mantra
I will take care of myself as I grow older
❤️ Why
Our bodies are just as important as our minds, and both should be taken care of. I want to retain mobility and strength as I age.
🏁
Season 5
day 30 of 31
ends Aug 1
📅 Calendar
Cell = members checked in that day
everyone ✨
💬 Huddle Feed
Recent Checkins, replies, and applause
Huddle Message
General announcement
🔄 JelloMellow is now working on:
✅ Do 10 pull ups +10 triceps dips