taskncoffee/taskncoffee-app/docs/COLOR_PALETTE.md

🎨 Task&Coffee Color Palette

Usage examples? See STYLE_GUIDE.md
Quick reference? See STYLES_CHEATSHEET.md
Back to main? See 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