diff --git a/frontend/app/color-preview/page.tsx b/frontend/app/color-preview/page.tsx new file mode 100644 index 00000000..b937fb15 --- /dev/null +++ b/frontend/app/color-preview/page.tsx @@ -0,0 +1,354 @@ +'use client'; + +import { useState } from 'react'; +import { AlertCircle, CheckCircle, AlertTriangle, Info, Package, Zap, Lock } from 'lucide-react'; + +const palettes = { + current: { + name: 'Current (Blue)', + description: 'Current OLED palette - High contrast, professional', + colors: { + background: '#0A0E27', + surface: '#1A1F3A', + foreground: '#F0F4F8', + secondary: '#C7D2E0', + muted: '#8B95AD', + primary: '#3B82F6', + success: '#10B981', + error: '#EF4444', + warning: '#F59E0B', + info: '#3B82F6', + } + }, + proposal1: { + name: 'Proposal 1: Green IoT', + description: 'Technical/IoT style - Dark with green status indicators', + colors: { + background: '#020617', + surface: '#0F172A', + foreground: '#F8FAFC', + secondary: '#CBD5E1', + muted: '#94A3B8', + primary: '#1E293B', + success: '#22C55E', + error: '#DC2626', + warning: '#F59E0B', + info: '#06B6D4', + } + }, + proposal2: { + name: 'Proposal 2: Indigo Orange', + description: 'Premium tech - Deep indigo with warm orange accents', + colors: { + background: '#0F0F23', + surface: '#1E1B4B', + foreground: '#F8FAFC', + secondary: '#C7D2E0', + muted: '#8B5CF6', + primary: '#312E81', + success: '#10B981', + error: '#EF4444', + warning: '#F97316', + info: '#8B5CF6', + } + }, + proposal3: { + name: 'Proposal 3: Slate Cyan', + description: 'Modern minimal - Slate with cyan tech accent', + colors: { + background: '#0F172A', + surface: '#1E293B', + foreground: '#F1F5F9', + secondary: '#CBD5E1', + muted: '#94A3B8', + primary: '#334155', + success: '#14B8A6', + error: '#F87171', + warning: '#FBBF24', + info: '#06B6D4', + } + } +}; + +export default function ColorPreview() { + const [selected, setSelected] = useState('current'); + const palette = palettes[selected]; + + return ( +
+
+ {/* Header */} +
+

+ Color Palette Preview +

+

+ IT Inventory System - Compare color schemes +

+
+ + {/* Palette Selector */} +
+ {Object.entries(palettes).map(([key, p]) => ( + + ))} +
+ + {/* Color Swatches */} +
+

+ Color System +

+
+ {Object.entries(palette.colors).map(([name, color]) => ( +
+
+
+
+ {name} +
+
+ {color} +
+
+
+ ))} +
+
+ + {/* Text Examples */} +
+

+ Typography & Text Colors +

+
+
+
+ Primary Text - Headlines, main content +
+
+ Secondary Text - Supporting information, descriptions +
+
+ Muted Text - Labels, captions, subtle information +
+
+
+
+ + {/* Buttons */} +
+

+ Interactive Elements +

+
+ {/* Primary Button */} + + + {/* Secondary Button */} + + + {/* Ghost Button */} + +
+
+ + {/* Cards */} +
+

+ Cards & Containers +

+
+ {/* Standard Card */} +
+
+ + Storage Device +
+
+ 1.6TB NVMe SSD • U.3 Connector +
+
+ Part #: p66093-002 • Status: In Stock +
+
+ + {/* Status Card */} +
+
+ + Operational +
+
+ System Status Normal +
+
+ Last Updated: 2 minutes ago +
+
+
+
+ + {/* Status Badges */} +
+

+ Status Indicators & Semantic Colors +

+
+ {/* Success */} +
+ + + Success / Active + +
+ + {/* Error */} +
+ + + Error / Critical + +
+ + {/* Warning */} +
+ + + Warning / Caution + +
+ + {/* Info */} +
+ + + Info / Notice + +
+
+
+ + {/* Form Elements */} +
+

+ Form Elements +

+
+
+ + +
+ +
+ + +
+
+
+ + {/* Contrast Info */} +
+

+ Contrast Ratios +

+
+
+
Foreground on Background
+
+ Verified WCAG AAA +
+
+
+
Secondary on Background
+
+ Verified WCAG AA +
+
+
+
Muted on Background
+
+ Verified WCAG AA +
+
+
+
+ + {/* Footer */} +
+

+ This is a preview page for color palette comparison. Select a palette above to see how it looks across the entire UI. +

+

+ URL: /color-preview — Not in main navigation. Visit this page directly to compare palettes. +

+
+
+
+ ); +} diff --git a/frontend/docs/COLOR_PALETTE_PROPOSALS.md b/frontend/docs/COLOR_PALETTE_PROPOSALS.md new file mode 100644 index 00000000..1363dadc --- /dev/null +++ b/frontend/docs/COLOR_PALETTE_PROPOSALS.md @@ -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!