๐จ 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
Melissa's huddle
1 member
Join Melissa's huddle
Start building habits with this community today!
The habit you get when you join
or you can create your own
โ
Do a 5 minute workout
๐ฏ
Complete a full workout session
best ๐ฅ 1
Not your style? You can swap in a habit of your own after you join.
๐ The Playbook
why this habit works
โ Checkin Question
What did you accomplish?
โฐ Cue / Trigger
Put on my workout clothes
๐ค Identity
I am someone who moves my body every day.
๐ Long-term Goal
To build consistent exercise habits for lifelong health and energy.
๐ฌ Mantra
Stronger and healthier every day.
โค๏ธ Why
Movement is medicine. Daily exercise boosts my energy, improves my mood, and builds long-term health. Start small and build up.
๐
Season 1
day 21 of 31
ends Aug 1
๐
Calendar
Cell = members checked in that day
everyone โจ
๐ฌ Huddle Feed
Recent Checkins, replies, and applause