[DESIGN] Standardize Color System Across All Dashboards

[Lexicoding-systems]

Priority: HIGH

Severity: Design System Consistency
Identified in: Design QA Review (2026-01-10)
Location: All dashboard files

Description

Three dashboards use different color values and approaches despite having comprehensive design token documentation. The governance dashboard introduces ad-hoc colors not defined in the design system, creating maintenance burden and potential visual inconsistency.

Current State

Design Tokens (Source of Truth)

Located in: /frontend/src/design-system/lexecon-design-tokens.js

• Primary: #0891b2 ✅ (consistent)
• Background dark: #0f172a ✅ (consistent)
• Background card: #1e293b ✅ (consistent)
• Text primary: #f1f5f9 ✅ (consistent)
• Text secondary: #94a3b8 ✅ (consistent)
• Border: #334155 ✅ (consistent)

Problem: Ad-hoc Colors in Governance Dashboard

governance_dashboard.html:20

:root {
    --bg-card-hover: #2d3b52;  /* ❌ Not in design tokens */
    --risk-critical: #dc2626;
    --risk-high: #f59e0b;
    --risk-medium: #eab308;
    --risk-low: #84cc16;
}

Impact

1. Design System Fragmentation: Creates parallel color system
2. Maintenance Burden: Changes must be made in multiple places
3. Future Inconsistency: Risk of colors drifting apart
4. Onboarding Difficulty: New developers unsure which colors to use

Recommended Solution

1. Add Missing Colors to Design Tokens

Update /frontend/src/design-system/lexecon-design-tokens.js:

export const colors = {
  // ... existing colors ...
  
  // Interactive states
  'bg-card-hover': '#2d3b52',
  
  // Risk levels (standardized)
  'risk-critical': '#dc2626',
  'risk-high': '#f59e0b', 
  'risk-medium': '#eab308',
  'risk-low': '#84cc16',
  
  // Alternatively, use semantic naming:
  'state-danger': '#dc2626',
  'state-warning': '#f59e0b',
  'state-caution': '#eab308', 
  'state-success': '#84cc16',
};

2. Update Governance Dashboard

Replace custom CSS variables with design token imports:

import { colors } from '/frontend/src/design-system/lexecon-design-tokens.js';

// Use design tokens
const styles = `
  :root {
    --bg-card-hover: ${colors['bg-card-hover']};
    --risk-critical: ${colors['state-danger']};
    --risk-high: ${colors['state-warning']};
    /* etc */
  }
`;

3. Audit All Color Usage

Search for color hex values not in design tokens:

grep -r "#[0-9a-fA-F]\{6\}" *.html --color

Replace with design token references.

Implementation Steps

1. Review and approve color additions to design system
2. Update lexecon-design-tokens.js with missing colors
3. Update design system documentation with new colors
4. Refactor governance_dashboard.html to use design tokens
5. Audit dashboard.html for any ad-hoc colors
6. Audit login.html for any ad-hoc colors
7. Update component guide with risk level color usage
8. Create linting rule to prevent hardcoded colors (optional)

Acceptance Criteria

• All colors defined in design tokens
• No ad-hoc hex colors in any dashboard
• Consistent risk level colors across all interfaces
• Documentation updated with new color tokens
• Visual regression test passes

Files to Update

• /frontend/src/design-system/lexecon-design-tokens.js
• governance_dashboard.html
• dashboard.html (audit only)
• login.html (audit only)
• /docs/design-system/lexecon-design-system.md
• /docs/design-system/lexecon-component-guide.md

Related Issues

• Design QA Report Issue Welcome to Lexecon Discussions! #1
• See: Design System Specification Improvements

Labels

design-system, high-priority, consistency, refactoring

[Lexicoding-systems]

Implementation Complete ✅

Standardized color system across both dashboard files by removing ad-hoc colors and establishing consistent design tokens.

Changes Made

governance_dashboard.html (governance_dashboard.html:14-41):

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

dashboard.html (dashboard.html:14-41):

• ✅ Added risk-level colors for consistency with governance dashboard
• ✅ Added --hover-overlay for standardized hover states

Design Token System

Both dashboards now share the same complete color system:

/* Base colors */
--primary: #0891b2;
--secondary: #64748b;
--success: #059669;
--warning: #d97706;
--danger: #dc2626;

/* Backgrounds */
--bg-dark: #0f172a;
--bg-card: #1e293b;

/* Text */
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;

/* UI Elements */
--border: #334155;
--verified: #10b981;

/* Risk Levels */
--risk-critical: #dc2626;
--risk-high: #f59e0b;
--risk-medium: #eab308;
--risk-low: #84cc16;

/* State modifiers */
--hover-overlay: rgba(255, 255, 255, 0.05);

Impact

• ✅ Zero ad-hoc colors - All colors use design tokens
• ✅ Consistent branding - Same colors across all dashboards
• ✅ Easy maintenance - Change colors globally via CSS variables
• ✅ Ready for theming - Foundation for dark/light mode

Pull Request

PR #26 includes this fix along with spacing standardization (#21).

Next Steps

• Validate colors in both light and dark mode (if applicable)
• Test with accessibility tools for contrast compliance
• Document color usage guidelines