fix(design): Standardize color system and spacing scale (Phase 2)

[Lexicoding-systems]

Summary

Implements consistent design system foundation across all dashboard files by standardizing the color system and establishing an 8px-based spacing scale.

Issues Fixed

• Closes [DESIGN] Standardize Color System Across All Dashboards #19: Standardize color system across dashboards
• Closes [DESIGN] Fix Spacing Inconsistencies in dashboard.html #21: Fix spacing inconsistencies in dashboard.html

Changes Made

Issue #19: Color System Standardization

governance_dashboard.html:

• ❌ Removed ad-hoc --bg-card-hover: #2d3b52;
• ✅ Added standardized --hover-overlay: rgba(255, 255, 255, 0.05);
• ✅ Added --verified: #10b981; for consistency
• ✅ Replaced all var(--bg-card-hover) with var(--hover-overlay)

dashboard.html:

• ✅ Added risk-level colors for consistency:
  • --risk-critical: #dc2626;
  • --risk-high: #f59e0b;
  • --risk-medium: #eab308;
  • --risk-low: #84cc16;
• ✅ Added --hover-overlay for consistent hover states

Issue #21: Spacing Consistency

Established 8px-based spacing scale:

--spacing-1: 4px;   /* 0.5× base */
--spacing-2: 8px;   /* 1× base */
--spacing-3: 12px;  /* 1.5× base */
--spacing-4: 16px;  /* 2× base */
--spacing-5: 20px;  /* 2.5× base */
--spacing-6: 24px;  /* 3× base */
--spacing-8: 32px;  /* 4× base */
--spacing-10: 40px; /* 5× base */

Fixed spacing violations in dashboard.html:

• padding: 10px 20px; → padding: 12px 20px;
• padding: 4px 10px; → padding: 4px 12px;
• padding: 2px 6px; → padding: 4px 8px;
• padding: 10px 12px; → padding: 12px;
• padding: 6px 12px; (inline) → padding: 8px 12px;
• margin: 6px 0; → margin: 8px 0;

Added spacing scale to governance_dashboard.html for consistency

Benefits

• ✅ No ad-hoc colors: All colors use design tokens
• ✅ Consistent spacing: All values follow 8px scale
• ✅ Design system foundation: Ready for component library
• ✅ Maintainability: Easy to update colors/spacing globally
• ✅ Accessibility: Predictable touch targets and spacing

Design System Documentation

The established design system now includes:

Colors:

• Primary actions: --primary
• Statuses: --success, --warning, --danger
• Risk levels: --risk-critical, --risk-high, --risk-medium, --risk-low
• Backgrounds: --bg-dark, --bg-card
• Text: --text-primary, --text-secondary
• States: --hover-overlay, --verified

Spacing Scale (8px base):

• Use --spacing-* variables or multiples of 8px (4, 8, 12, 16, 20, 24, 32, 40)
• Never use: 2px, 6px, 10px, 14px, 18px (breaks scale)

Testing Checklist

• Verify hover states work correctly
• Check spacing consistency across all dashboards
• Validate colors match design system
• Test responsive behavior
• Verify no visual regressions

Related

• Part of Phase 1 (Security & Foundation) from #25
• Follows fixes from [SECURITY] Remove Development Credentials from login.html #17 (credentials) and [CONFIG] Implement Environment Configuration System for API URLs #18 (environment config)
• Next: [DESIGN] Fix Login Page Typography to Match Design System #20 (typography), [UX] Implement Alert Batching Feature for Similar Escalations #22 (alert batching)

🤖 Generated with Claude Code