feat: add color palette preview page and proposals
- Created /color-preview route with 4 palette options - Includes interactive color swatches, typography examples, buttons, cards, forms - Shows contrast ratios and semantic color usage - Added detailed proposal documentation explaining each palette - Recommended: Proposal 1 (Green IoT) for inventory domain alignment Preview page allows visual comparison before any implementation. No changes to existing color system yet.
This commit is contained in:
185
frontend/docs/COLOR_PALETTE_PROPOSALS.md
Normal file
185
frontend/docs/COLOR_PALETTE_PROPOSALS.md
Normal file
@@ -0,0 +1,185 @@
|
||||
# Color Palette Proposals for IT Inventory System
|
||||
|
||||
**Preview Page:** Visit `/color-preview` to see all palettes side-by-side
|
||||
|
||||
## Current Palette (Blue)
|
||||
**Status:** In use
|
||||
**Best for:** Professional, familiar, high contrast
|
||||
|
||||
```
|
||||
Background: #0A0E27 (Deep Navy)
|
||||
Surface: #1A1F3A (Slate)
|
||||
Foreground: #F0F4F8 (Almost White)
|
||||
Secondary: #C7D2E0 (Light Slate)
|
||||
Muted: #8B95AD (Gray Blue)
|
||||
Primary: #3B82F6 (Blue)
|
||||
Success: #10B981 (Green)
|
||||
Error: #EF4444 (Red)
|
||||
Warning: #F59E0B (Amber)
|
||||
Info: #3B82F6 (Blue)
|
||||
```
|
||||
|
||||
**Strengths:**
|
||||
- High contrast (WCAG AAA compliant)
|
||||
- Professional appearance
|
||||
- Familiar and proven in current use
|
||||
- Consistent with Fira typography
|
||||
|
||||
**Considerations:**
|
||||
- Blue can feel corporate/cold
|
||||
- Limited visual distinctiveness vs. competitors
|
||||
- Primary accent is same as info color (redundant)
|
||||
|
||||
---
|
||||
|
||||
## Proposal 1: Green IoT (Recommended for Inventory)
|
||||
**Status:** Proposed
|
||||
**Best for:** Technical/IoT systems, status indicators, operational tracking
|
||||
|
||||
```
|
||||
Background: #020617 (Almost Black)
|
||||
Surface: #0F172A (Deep Navy)
|
||||
Foreground: #F8FAFC (Bright White)
|
||||
Secondary: #CBD5E1 (Light Gray)
|
||||
Muted: #94A3B8 (Medium Gray)
|
||||
Primary: #1E293B (Dark Slate)
|
||||
Success: #22C55E (Bright Green)
|
||||
Error: #DC2626 (Deep Red)
|
||||
Warning: #F59E0B (Amber)
|
||||
Info: #06B6D4 (Cyan)
|
||||
```
|
||||
|
||||
**Why This Works for IT Inventory:**
|
||||
- **Green success color** - Excellent for "in stock", "operational" status
|
||||
- **Higher contrast** - Better visibility for status indicators
|
||||
- **Cyan info** - Distinct from success/error, good for informational content
|
||||
- **Technical feel** - Aligns with IoT/infrastructure aesthetic
|
||||
- **Inventory-friendly** - Green naturally suggests "ready" or "available"
|
||||
|
||||
**Strengths:**
|
||||
- Very high contrast (WCAG AAA++
|
||||
- Status colors are immediately recognizable
|
||||
- Professional technical appearance
|
||||
- Better visual hierarchy with green/red/cyan separation
|
||||
|
||||
**Considerations:**
|
||||
- Darker background might feel slightly less inviting initially
|
||||
- Green accent is bolder than current approach
|
||||
- Requires care with green/red for colorblind users (mitigated with icons)
|
||||
|
||||
---
|
||||
|
||||
## Proposal 2: Indigo Orange (Premium Tech)
|
||||
**Status:** Proposed
|
||||
**Best for:** Modern, distinctive, premium feel
|
||||
|
||||
```
|
||||
Background: #0F0F23 (Deep Indigo)
|
||||
Surface: #1E1B4B (Dark Indigo)
|
||||
Foreground: #F8FAFC (Bright White)
|
||||
Secondary: #C7D2E0 (Light Slate)
|
||||
Muted: #8B5CF6 (Purple)
|
||||
Primary: #312E81 (Deep Indigo)
|
||||
Success: #10B981 (Green)
|
||||
Error: #EF4444 (Red)
|
||||
Warning: #F97316 (Warm Orange)
|
||||
Info: #8B5CF6 (Purple)
|
||||
```
|
||||
|
||||
**Why This Works:**
|
||||
- **Distinctive aesthetic** - Sets it apart from typical tech interfaces
|
||||
- **Warm orange accent** - More inviting than cold blue/cyan
|
||||
- **Premium feel** - Indigo + orange is luxe aesthetic
|
||||
- **Personality** - Shows intentional design choice
|
||||
|
||||
**Strengths:**
|
||||
- Highly distinctive and memorable
|
||||
- Warm accent feels more approachable
|
||||
- Modern and sophisticated appearance
|
||||
- Good visual contrast
|
||||
|
||||
**Considerations:**
|
||||
- Less conservative than current approach
|
||||
- Indigo background might be harder to read in certain lighting
|
||||
- Orange for warnings might confuse with success in some contexts
|
||||
- Requires confident implementation
|
||||
|
||||
---
|
||||
|
||||
## Proposal 3: Slate Cyan (Modern Minimal)
|
||||
**Status:** Proposed
|
||||
**Best for:** Clean, minimal aesthetic with technical flair
|
||||
|
||||
```
|
||||
Background: #0F172A (Navy)
|
||||
Surface: #1E293B (Slate)
|
||||
Foreground: #F1F5F9 (Off White)
|
||||
Secondary: #CBD5E1 (Light Slate)
|
||||
Muted: #94A3B8 (Medium Slate)
|
||||
Primary: #334155 (Dark Slate)
|
||||
Success: #14B8A6 (Teal/Cyan)
|
||||
Error: #F87171 (Light Red)
|
||||
Warning: #FBBF24 (Golden Amber)
|
||||
Info: #06B6D4 (Bright Cyan)
|
||||
```
|
||||
|
||||
**Why This Works:**
|
||||
- **Minimal aesthetic** - Less color saturation, more subtle
|
||||
- **Cyan accents** - Modern tech feel without being too bold
|
||||
- **Teal success** - Soft but distinct
|
||||
- **Professional** - Balances between current and bolder proposals
|
||||
|
||||
**Strengths:**
|
||||
- Clean and contemporary
|
||||
- Cyan colors feel technical and modern
|
||||
- All-slate primary removes confusion
|
||||
- Safe but still distinctive
|
||||
|
||||
**Considerations:**
|
||||
- Teal success (cyan) might blend with cyan info
|
||||
- Less visual impact than Proposal 1
|
||||
- Warning and info colors somewhat similar
|
||||
- Between current and bold proposals
|
||||
|
||||
---
|
||||
|
||||
## Recommendation
|
||||
|
||||
**For an IT Inventory System, I recommend: Proposal 1 (Green IoT)**
|
||||
|
||||
**Reasons:**
|
||||
1. **Status colors align with domain** - Green = "in stock", "ready", "operational"
|
||||
2. **Better accessibility** - Higher contrast + clearer semantic meaning
|
||||
3. **Technical credibility** - IoT/infrastructure aesthetic fits inventory tracking
|
||||
4. **Inventory-specific UX** - Users will immediately understand status colors
|
||||
5. **Minimal implementation burden** - Only color token changes, no layout changes
|
||||
6. **WCAG AAA compliant** - Highest accessibility standard
|
||||
7. **Inventory psychology** - Green naturally suggests availability/supply
|
||||
|
||||
**Alternative if you prefer distinctiveness:**
|
||||
Proposal 2 (Indigo Orange) if you want a premium, memorable appearance that stands out.
|
||||
|
||||
---
|
||||
|
||||
## Implementation Plan (If Approved)
|
||||
|
||||
1. Update `tailwind.config.ts` color tokens
|
||||
2. Run bulk sed replacements (like before)
|
||||
3. Test on all pages (home, inventory, logs, admin)
|
||||
4. Verify accessibility with Lighthouse
|
||||
5. Commit: "refactor(design): implement new color palette"
|
||||
|
||||
**Estimated time:** 1-2 hours including testing
|
||||
|
||||
---
|
||||
|
||||
## Testing Checklist Before Final Approval
|
||||
|
||||
- [ ] View `/color-preview` page
|
||||
- [ ] Check text readability at different brightness levels
|
||||
- [ ] Review status colors in context (green for success, red for error)
|
||||
- [ ] Verify green/red distinction for colorblind users
|
||||
- [ ] Consider personal preference vs. inventory domain fit
|
||||
- [ ] Compare with competitors (if applicable)
|
||||
|
||||
**Next step:** Visit `/color-preview` to preview all options, then let me know which direction you prefer!
|
||||
Reference in New Issue
Block a user