# 🎨 Task&Coffee Color Palette **Usage examples?** See [STYLE_GUIDE.md](./STYLE_GUIDE.md) **Quick reference?** See [STYLES_CHEATSHEET.md](./STYLES_CHEATSHEET.md) **Back to main?** See [README.md](../README.md) --- ## Mirage Palette - Visual Guide ``` ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MIRAGE COLOR SCALE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 50 ░░░░░░░░░ #f4f6fb Lightest - heading text on dark bg 100 ▒▒▒▒▒▒▒▒▒ #e7edf7 Card foreground text 200 ▓▓▓▓▓▓▓▓▓ #cbd9ec Main foreground text 300 ▓▓▓▓▓▓▓▓▓ #9db8dc Muted foreground text ──────────────────────────────────────────────────────────── 400 ████████ #6893c8 PRIMARY ACCENT ⭐ 500 ████████ #4474b3 Accent hover state ──────────────────────────────────────────────────────────── 600 ████████ #335b96 Secondary, elevated cards 700 ████████ #2a4a7a Dark cards alternative 800 ████████ #264066 Muted elements, popovers 900 ████████ #243756 CARDS ⭐ 950 ████████ #111928 BACKGROUND (darkest) ⭐ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ``` --- ## 🌟 Semantic Color Mapping ### Background & Surfaces ``` --background #111928 (mirage-950) Main app background --card #243756 (mirage-900) Card surfaces --popover #264066 (mirage-800) Floating elements --muted #264066 (mirage-800) Subtle backgrounds --sidebar #111928 (mirage-950) Navigation rail ``` ### Foreground & Text ``` --foreground #cbd9ec (mirage-200) Primary text --card-foreground #e7edf7 (mirage-100) Text on cards --muted-foreground #9db8dc (mirage-300) Secondary text --popover-foreground #e7edf7 (mirage-100) Text in popovers ``` ### Interactive Elements ``` --primary #6893c8 (mirage-400) Primary actions, links --primary-foreground #111928 (mirage-950) Text on primary --secondary #2a4a7a (mirage-700) Secondary actions --accent #4474b3 (mirage-500) Hover states ``` ### Borders & Inputs ``` --border rgba(157, 184, 220, 0.15) Subtle borders --input rgba(157, 184, 220, 0.2) Input borders --ring #6893c8 (mirage-400) Focus ring ``` --- ## 💫 Neon Accent Colors ``` ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ NEON ACCENTS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔵 Neon Blue #c6e2ff Light blue with glow effect Glow color: rgba(30, 132, 242, 0.6) 💗 Neon Pink #ffc5ec Light pink with glow effect Glow color: rgba(255, 20, 147, 0.6) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ``` --- ## 🎯 Usage by Element Type ### Text Colors ``` Headings: mirage-200 (#cbd9ec) Body text: mirage-200 (#cbd9ec) Secondary text: mirage-300 (#9db8dc) Disabled text: mirage-300 (#9db8dc) with opacity ``` ### Backgrounds ``` Page background: mirage-950 (#111928) Card background: mirage-900 (#243756) Hover background: mirage-800 (#264066) Active background: mirage-700 (#2a4a7a) ``` ### Buttons ``` Primary: mirage-400 (#6893c8) bg Primary hover: mirage-500 (#4474b3) bg Secondary: mirage-700 (#2a4a7a) bg Secondary hover: mirage-600 (#335b96) bg Ghost hover: mirage-800 (#264066) bg ``` ### Borders ``` Default: mirage-300 with 15% opacity Input: mirage-300 with 20% opacity Focus: mirage-400 (#6893c8) solid Divider: mirage-800 (#264066) ``` --- ## 🌈 Color Relationships ``` LIGHT ↑ ┌─────────────────────────────────┐ │ mirage-50 │ Lightest text │ │ mirage-100 │ Card text │ │ mirage-200 │ Main text │ │ mirage-300 │ Muted text │ ├─────────────────────────────────┤ │ mirage-400 │ PRIMARY ⭐ │ ← Interactive │ mirage-500 │ Hover state │ ├─────────────────────────────────┤ │ mirage-600 │ Secondary │ │ mirage-700 │ Alt cards │ │ mirage-800 │ Muted bg │ │ mirage-900 │ CARDS ⭐ │ ← Surfaces │ mirage-950 │ BACKGROUND ⭐ │ └─────────────────────────────────┘ DARK ↓ ``` --- ## 📊 Contrast Ratios (WCAG) ``` Background (950) + Text (200): AAA ✓ (14.2:1) Card (900) + Card Text (100): AAA ✓ (12.8:1) Primary (400) + Primary FG (950): AA ✓ (5.2:1) Muted (800) + Muted Text (300): AA ✓ (4.8:1) ``` All color combinations meet WCAG AA standards minimum! 🎉 --- ## 🎨 Example Compositions ### Card with Neon Accent ``` ┌────────────────────────────────┐ │ mirage-900 background │ │ ┌──────────────────────────┐ │ │ │ mirage-100 text │ │ │ │ mirage-300 muted text │ │ │ │ │ │ │ │ [mirage-400 button] │ │ │ │ + neon blue glow │ │ │ └──────────────────────────┘ │ └────────────────────────────────┘ ``` ### Primary Button ``` ┌──────────────────────┐ │ mirage-400 bg │ ← Background │ mirage-950 text │ ← Text │ + subtle shadow │ │ hover: neon glow │ ← Neon effect on hover └──────────────────────┘ ``` ### Today's Task Column ``` ┌────────────────────────────────┐ │ mirage-400/10 background │ ← 10% opacity │ + mirage-400 border (2px) │ ← Solid border │ + neon-blue glow │ ← Glow effect │ │ │ Tasks: mirage-900 cards │ └────────────────────────────────┘ ``` --- ## 🔄 Dark Mode Toggle When dark mode is active (`.dark` class): ``` Background: mirage-900 → mirage-950 Cards: mirage-700 → mirage-900 Primary: mirage-300 → mirage-400 Text: mirage-100 → mirage-200 ``` Currently configured for dark-first design. --- ## 💡 Best Practices 1. **Depth hierarchy:** - Background: mirage-950 - Elevated: mirage-900 - More elevated: mirage-800 2. **Text contrast:** - Always use mirage-100/200 for text on dark backgrounds - Use mirage-300 for less important text 3. **Neon sparingly:** - Use neon effects only for: - Brand elements (logo, headers) - Important CTAs - Today's tasks/current items - Don't overuse - it should feel special 4. **Accessible focus states:** - Always use mirage-400 for focus rings - Add 3px ring with 50% opacity --- ## 🚀 Quick Reference | Element | Light Value | Dark Value | Usage | |---------|-------------|------------|-------| | Page BG | `mirage-950` | `mirage-900` | Main background | | Card BG | `mirage-900` | `mirage-700` | Surface | | Text | `mirage-200` | `mirage-100` | Primary text | | Primary | `mirage-400` | `mirage-300` | CTA buttons | | Border | `mirage-300/15%` | `mirage-300/20%` | Dividers | --- **See also:** - `STYLE_GUIDE.md` - Complete style documentation - `STYLES_CHEATSHEET.md` - Quick usage examples - `src/lib/styles.js` - Tailwind class presets