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 John Bang

✅

The Floor · just show up

Open my habit tracking journal or app

🎯

The Ceiling · burst through it

Review my habits for the day and check off everything I successfully completed

best 🔥 1

📋 The Playbook why this habit works

🏆 What do I want to achieve?

Build long-term consistency across all areas of my life.

👤 Who do I want to become?

I am a person who values and maintains consistency.

❓ Checkin Question

What did you learn?

⏰ Cue / Trigger

Closing my laptop for the evening

💬 Mantra

Show up every day.

❤️ Why

I want to do this because tracking my efforts helps me see that my small daily actions are adding up to big changes over time and keeps me accountable to my long-term self.

Tags: Learning, Organization, Productivity