Design System Audit
Color Usage Statistics
Total Unique Colors
248 classes
Exact count
Most Used Class
text-white
359 occurrences
Gray Family Uses
1,533 total
~65% of all colors
Background colors
860 uses
Text colors
1,492 uses
Border colors
268 uses
Ring/focus colors
56 uses
Current Color Inventory
Primary Colors (Most Used)
bg-black
Main background (11x)
bg-gray-800
Cards, containers (156x)
bg-gray-700
Inputs, buttons (195x)
bg-gray-900
Deep backgrounds (62x)
Lorem
text-white
Primary text (359x)
Lorem
text-gray-300
Secondary text (275x)
Lorem
text-gray-400
Muted text (240x)
border-gray-700
Primary borders (68x)
border-gray-600
Form borders (73x)
Interactive Elements
bg-blue-600
Primary buttons (33x)
bg-blue-700
Button hover states (25x)
Lorem
text-blue-400
Links, accents (73x)
Lorem
text-blue-300
Link hover states (33x)
border-blue-500
Focus states (38x)
ring-blue-500
Focus rings (48x)
Semantic Colors
bg-red-600
Danger buttons (12x)
Lorem
text-red-400
Error text (33x)
border-red-500
Error borders (4x)
bg-green-600
Success buttons (10x)
Lorem
text-green-400
Success text (48x)
border-green-500
Success borders (6x)
bg-yellow-600
Warning buttons (8x)
Lorem
text-yellow-400
Warning text (41x)
border-yellow-600
Warning borders (7x)
Special Use Cases
bg-orange-500
Special badges (5x)
Lorem
text-orange-400
Deficit categories (17x)
bg-purple-600
Special features (6x)
bg-purple-900/30
Queue widget (3x)
bg-teal-600
Rare buttons (4x)
bg-cyan-800
Month separators (2x)
border-cyan-800
Calendar dividers (2x)
Opacity Variants
bg-gray-800/30
Semi-transparent (4x)
bg-gray-700/50
50% opacity (6x)
bg-blue-900/20
Subtle blue (9x)
bg-red-900/20
Error backgrounds (5x)
bg-green-900/20
Success backgrounds (4x)
bg-amber-900/20
Warning backgrounds (4x)
Simplification Recommendations
Too Many Gray Shades
Current: Using gray-600, gray-700, gray-800, gray-900, gray-950
Suggestion: Consolidate to 3-4 main shades: gray-900 (darkest), gray-800 (primary), gray-700 (secondary)
Inconsistent Button Colors
Current: Blue-600/700, Red-600/700, Green-600/700, Yellow-600/800, Purple-600/800, Teal-600/800
Suggestion: Standardize to: Primary (blue-600), Danger (red-600), Success (green-600), Warning (amber-600)
Mixed Opacity Values
Current: Using /20, /30, /50, /80 opacity variants
Suggestion: Standardize to 2-3 opacity levels: /20 (subtle), /50 (medium), /80 (strong)
Special One-off Colors
Current: Orange, Purple, Teal used sparingly
Suggestion: Consider removing or replacing with semantic colors from main palette
Custom Hex Colors
Current: Using #121212, #111827 for backgrounds
Suggestion: Replace with Tailwind equivalents or add to config as custom colors
Proposed Simplified Palette
backgrounds
bg-blackbg-gray-900bg-gray-800bg-gray-700
text
text-whitetext-gray-100text-gray-300text-gray-500
borders
border-gray-700border-gray-600
primary
bg-blue-600text-blue-400border-blue-500
danger
bg-red-600text-red-400border-red-500
success
bg-green-600text-green-400border-green-500
warning
bg-amber-600text-amber-400border-amber-500
opacity
/20/50/80
Typography Scale
Heading 1 - text-3xl font-bold text-white
Heading 2 - text-2xl font-semibold text-gray-100
Heading 3 - text-xl font-semibold text-gray-100
Heading 4 - text-lg font-medium text-gray-300
Body text - text-base text-gray-300
Small text - text-sm text-gray-400
Extra small - text-xs text-gray-500
Emoji Usage Audit
Summary
Total Unique Emojis
47 emojis
Most Used Emoji
⭐ (83x)
Total Occurrences
~500 uses
Top 10 Most Used Emojis
⭐
83x
Favorites/PRs
❌
65x
Errors
✓
63x
Success
⚠️
47x
Warnings
✅
43x
Complete
📊
19x
DEXA/Data
⏱️
18x
Queue/Time
💪
12x
Workout
🤕
12x
Injury
🔥
11x
Hot/PRs
UI-Visible Emojis (User Facing)
Exercise & Workout
💪 - Add to Workout button (12x)
⭐️ - Starred/favorite exercises (83x)
🏋️ - Slack workout notifications (4x)
🔥 - Calorie calculator, Recent PRs (11x)
Medical & Injury
🤕 - Injury markers in calendar/history (12x)
💀 - Full body injury modifier (2x)
🤷🏻♂️ - Unknown body fat estimate (2x)
Data & Planning
📊 - DEXA scan indicators (19x)
📅 - Calendar/date pickers (6x)
📈 - Need work exercises (10x)
🎯 - Close to PR exercises (5x)
📋 - Plan workout button (3x)
🏆 - View records button (10x)
UI Actions
✏️ - Edit button (4x)
🗑 - Delete option (2x)
⏱️ - Add to queue (18x)
✓ - Success state (63x)
+💪 - Add to workout text (part of 12x)
+⏱️ - Add to queue text (part of 18x)
Developer-Only Emojis (Console/Build)
Status Indicators
✅ - Success/completion messages (43x)
❌ - Error messages (65x)
⚠️ - Warning messages (47x)
ℹ️ - Info messages (3x)
Build Process
🎟️ - Scoring configuration
🌟 - Bonus categories
📌 - Special cases
🏷️ - Category labels
🔗 - URL generation
🧪 - Test runs
Documentation
🤖 - Auto-generated docs
⚙️ - Build process info
🛠️ - Customization info
✨ - Feature highlights
Performance
⚡ - HOT_STREAK category
⏰ - TIME_TO_TRAIN category
👍 - GOOD category
⚖️ - Balance recommendations
➡️ - Stable performance
Recommendations
Inconsistent Usage
Issue: Mix of emoji styles (⭐ vs ⭐️, different skin tones)
Fix: Standardize to single style, remove skin tone modifiers
Overuse in Console
Issue: Heavy emoji use in build scripts and console logs
Fix: Consider plain text for professional logging
Limited UI Usage
Issue: Only ~15 emojis used in actual UI
Fix: This is good - keep UI emoji usage minimal and functional
Semantic Consistency
Good: Consistent use of 🤕 for injuries, ⭐ for favorites, 💪 for workouts
Maintain: Keep this semantic consistency across the app
Component Examples
Buttons
Form Elements
Cards
Standard Card
This is a standard card with gray-700 background.
Dark Card
This is a dark card with gray-800 background.
Darker Card
This is a darker card with gray-900 background.
Alerts
Info Alert
Success Alert
Warning Alert
Error Alert