The commission-only sales talent marketplace
© 2026 Lem Studio
| Context | ❌ Don't | ✅ Do |
|---|---|---|
| Button Text | Submit | Let's Do This! 🚀 |
| Empty State | No tasks found | Your task list is so clean, Marie Kondo would be jealous 🧹 |
| Error Message | An error occurred | Oops! Our hamsters took a coffee break. Try again? ☕ |
| Success Toast | Task completed | Boom! Another one bites the dust 💥 |
| Loading State | Loading... | Brewing productivity... ☕ |
| Streak Lost | Streak reset to 0 | Your streak yeeted itself into the void 💀 But hey, fresh start! |
Primary (Pearl Lemon Yellow)
HSL: 45 95% 49%
HEX: #FFD93D
CTAs, highlights, key actions
Primary Hover
HSL: 45 95% 42%
HEX: #D4B52E
Button hover states
Primary Foreground
HSL: 0 0% 0%
HEX: #000000
Text on primary backgrounds
Pearl Lemon Green
HSL: 142 76% 36%
HEX: #16A34A
Success states, accents
Background
HSL: 0 0% 100%
HEX: #FFFFFF
Main background (light mode)
Background Dark
HSL: 0 0% 7%
HEX: #121212
Main background (dark mode)
Foreground
HSL: 0 0% 9%
HEX: #171717
Primary text (light mode)
Foreground Dark
HSL: 0 0% 98%
HEX: #FAFAFA
Primary text (dark mode)
Muted
HSL: 0 0% 96%
HEX: #F5F5F5
Secondary backgrounds
Muted Foreground
HSL: 0 0% 45%
HEX: #737373
Secondary text, placeholders
Destructive
HSL: 0 84% 60%
HEX: #EF4444
Errors, destructive actions
Warning
HSL: 38 92% 50%
HEX: #F59E0B
Warnings, attention states
Aa Bb Cc
Headings & Titles
Body text for paragraphs and descriptions. The quick brown fox jumps over the lazy dog.
Small text for captions and metadata
Aa Bb Cc
Code & Numbers
const productivity = 100;
Time: 25:00 | XP: 1,250
Users can select their preferred motivation style. All copy adapts accordingly.
Tough love motivation
"Drop and give me 20... tasks!"
Enthusiastic encouragement
"You're CRUSHING it! Go go go!"
Calm, mindful guidance
"One task at a time. Breathe."
Achievement-focused
"Achievement unlocked: Productivity God!"
Pure entertainment
"Your to-do list called. It's crying."
Used for highlighted elements
className="pearl-glow"Satisfying completion feedback
className="animate-task-complete"Intensity based on streak length
animate-flame-soft/medium/intenseFor achievements and milestones
useConfetti() hookInter (UI)
JetBrains Mono (Code)
#FFD93D
HSL: 45 95% 49%
Default: 0.5rem
Buttons: 0.5rem