๐จ 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
๐ฅ
๐ฅ
Athena Chan
โ
Practice organic chemistry for 30 minutes.
๐ฅ
๐ฅ
Bella Ryu
โ
Practice organic chemistry for 10 minutes.
๐ฅ
Effy Bo
โ
Practice organic chemistry for 10 minutes.
๐ฅ
๐ฅ
๐ฅ
Eva Bai
โ
Practice organic chemistry for 10 minutes.
๐ฅ
๐ฅ
๐ฅ
Joanne Kim
โ
Practice organic chemistry for 10 minutes.
๐ฅ
Justin C
โ
Practice organic chemistry for 10 minutes.
๐ฅ
Kristen Lee
โ
Practice organic chemistry for 10 minutes.
๐ฅ
๐ฅ
Lia Lai
โ
Practice organic chemistry for 10 minutes.
๐ฅ
๐ฅ
๐ฅ
๐ฅ
๐ฅ
๐ฅ
Natalie
โ
Practice organic chemistry for 10 minutes.
๐ฅ
Nicole Yang
โ
Practice organic chemistry for 10 minutes.
๐ฅ
๐ฅ
๐ฅ
T.J. Cagdan
โ
Practice organic chemistry for 10 minutes.
๐ฅ
Wenhao Li
โ
Practice organic chemistry for 10 minutes.
๐ฅ
xianyin
โ
Practice organic chemistry for 10 minutes.
๐ฅ
Xiao Wang
โ
Practice organic chemistry for 10 minutes.
๐ฅ
Zoelle Liu
โ
Practice organic chemistry for 10 minutes.
#30
#30
#30
#30
Alana Ho
โ
Practice organic chemistry for 10 minutes.
#30
Amy Lee
โ
Practice organic chemistry for 10 minutes.
#30
#30
Eden Wiebe
โ
Practice organic chemistry for 10 minutes.
#30
Hilary C
โ
Practice organic chemistry for 10 minutes.
#30
#30
#30
Mira Zhang
โ
Practice organic chemistry for 10 minutes.
#30
Selina
โ
Practice organic chemistry for 10 minutes.
Ranked by days showed up this season ยท ๐ฅ season streak ยท % of days since your start ยท green ring = checked in today