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 Its me!!

✅

The Floor · just show up

Sit in my meditation chair and take three deep breaths

🎯

The Ceiling · burst through it

Meditate for 15 minutes using a guided session

best 🔥 1

📋 The Playbook why this habit works

🏆 What do I want to achieve?

More control and awareness about my thought patterns. To be better able to stop rumination

👤 Who do I want to become?

Somebody who is present and doesn't waste their energy on time on others.

❓ Checkin Question

What did you accomplish?

⏰ Cue / Trigger

Sitting down in my floor meditation spot.

❤️ Why

To reduce my CONSTANT rumination that plagues me every fucking hour and does nothing to make me happy. To stop having so many thoughts that mildly annoy me and bring me down.

Tags: Creativity, Resilience, Skills