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 Wendy Mekaptué

✅

The Floor · just show up

Drink 2L of water / Read 1 chapter of the Bible

🎯

The Ceiling · burst through it

Walk 10000 steps / Eat without sugar 5 days out of 7 / Don't eat after 8 pm / Write down the top 3 priority tasks for my business tomorrow.

best 🔥 1

📋 The Playbook why this habit works

🏆 What do I want to achieve?

Increasing focus and building a balanced life.

👤 Who do I want to become?

I am a disciplined, diligent, productive, and balanced business owner.

❓ Checkin Question

What did you accomplish?

⏰ Cue / Trigger

Before going to bed

💬 Mantra

Direction over speed.

❤️ Why

I want to do this because having a clear plan for my day reduces decision fatigue and helps me stay focused on what truly matters rather than getting lost in busy work. It will help me increase my focus during the day and be more diligent in my daily tasks so I can see growth in my activities.

Tags: Nutrition, Organization, Productivity