[DESIGN] Fix Spacing Inconsistencies in dashboard.html

[Lexicoding-systems]

Priority: HIGH

Severity: Design System Consistency
Identified in: Design QA Review (2026-01-10)
Location: dashboard.html (multiple locations)

Description

The main dashboard uses ad-hoc spacing values (2px, 10px) that break the 8px-based spacing scale defined in the design system. This creates visual rhythm inconsistencies and maintenance difficulties.

Design System Specification

8px-based spacing scale:

• 4px (0.5 units)
• 8px (1 unit)
• 12px (1.5 units)
• 16px (2 units)
• 20px (2.5 units)
• 24px (3 units)
• 32px (4 units)
• 40px (5 units)
• 48px (6 units)
• 64px (8 units)

Current Issues

Issue 1: Non-standard padding (10px)

dashboard.html:1159

.legal-ref {
    padding: 4px 10px;  /* ❌ 10px not in scale */
}

Fix:

.legal-ref {
    padding: 4px 12px;  /* ✅ Uses 12px from scale */
}

Issue 2: Non-standard padding (2px)

dashboard.html:1239

.signature-status.verified {
    padding: 2px 8px;  /* ❌ 2px not in scale */
}

Fix:

.signature-status.verified {
    padding: 4px 8px;  /* ✅ Uses 4px minimum from scale */
}

Additional Violations to Audit

Search for all non-standard spacing:

grep -n "padding:\|margin:" dashboard.html | grep -E "(1px|2px|3px|5px|6px|7px|9px|10px|11px)"

Impact

1. Visual Rhythm: Inconsistent spacing creates subtle misalignment
2. Maintenance: Developers unsure which values to use
3. Design System Violation: Undermines systematic approach
4. Scaling Difficulty: Hard to maintain consistent feel at different screen sizes

Recommended Solution

1. Audit All Spacing Values

Create comprehensive list of all spacing in dashboard.html:

grep -n "padding:\|margin:\|gap:" dashboard.html > spacing-audit.txt

2. Replace Non-Standard Values

Current	Replace With	Reasoning
2px	4px	Minimum scale unit
10px	8px or 12px	Closest scale values
14px	12px or 16px	Closest scale values
18px	16px or 20px	Closest scale values

3. Consider Using CSS Variables

For maintainability:

:root {
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
}

.legal-ref {
    padding: var(--space-1) var(--space-3);  /* 4px 12px */
}

Implementation Steps

1. Run spacing audit script on dashboard.html
2. Document all non-standard spacing values found
3. Map each to nearest design system value
4. Update all spacing to use design system scale
5. Consider implementing CSS spacing variables
6. Visual regression test to verify no breaking changes
7. Update style guide with spacing examples

Acceptance Criteria

• All spacing values use 8px-based scale
• No usage of 2px, 10px, or other non-standard values
• Visual appearance unchanged (or improved)
• CSS variables implemented (optional but recommended)
• Changes documented in commit message

Files to Update

• dashboard.html (CSS section, multiple locations)
• Potentially: governance_dashboard.html (audit for similar issues)
• Potentially: login.html (audit for similar issues)

Testing Checklist

• Visual appearance unchanged across all dashboard sections
• No layout breaks at different screen sizes
• Spacing feels consistent and intentional
• Hover states still work correctly
• Modal spacing unchanged

Related Issues

• Design QA Report Issue chore(deps): bump codecov/codecov-action from 4 to 5 #5
• Related to: Color System Standardization
• Related to: Design System Documentation Updates

Example: Before & After

Before:

.badge {
    padding: 4px 10px;  /* ❌ 10px not in scale */
    border-radius: 4px;
    font-size: 11px;
}

After:

.badge {
    padding: 4px 12px;  /* ✅ Uses 4px and 12px from scale */
    border-radius: 4px;
    font-size: 11px;     /* Note: font-size also non-standard, separate issue */
}

Labels

design-system, high-priority, consistency, refactoring, css

[Lexicoding-systems]

Implementation Complete ✅

Fixed all spacing inconsistencies in dashboard.html and established an 8px-based spacing scale for both dashboards.

Established Spacing Scale

Added CSS variables for consistent spacing across the application:

--spacing-1: 4px;   /* 0.5× base (rare, small gaps) */
--spacing-2: 8px;   /* 1× base (standard) */
--spacing-3: 12px;  /* 1.5× base (comfortable) */
--spacing-4: 16px;  /* 2× base (section padding) */
--spacing-5: 20px;  /* 2.5× base */
--spacing-6: 24px;  /* 3× base (card padding) */
--spacing-8: 32px;  /* 4× base (large sections) */
--spacing-10: 40px; /* 5× base (major sections) */

Fixed Violations in dashboard.html

Padding fixes:

• Line 141: padding: 10px 20px; → padding: 12px 20px; ✅
• Lines 281, 315: padding: 4px 10px; → padding: 4px 12px; ✅
• Line 351: padding: 2px 6px; → padding: 4px 8px; ✅
• Line 484: padding: 10px 12px; → padding: 12px; ✅
• Lines 1768-1771: padding: 6px 12px; → padding: 8px 12px; ✅ (inline styles)

Margin fixes:

• Line 809: margin: 6px 0; → margin: 8px 0; ✅

Added Spacing Scale

Both dashboards now include the spacing scale in their CSS variables for future use.

Spacing Guidelines

✅ Use (multiples of 8px):

• 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px

❌ Avoid (breaks scale):

• 2px, 6px, 10px, 14px, 18px, 22px, 26px, 30px

Impact

• ✅ Consistent spacing - All values follow 8px rhythm
• ✅ Predictable layout - Visual harmony across UI
• ✅ Touch-friendly - Proper target sizes (minimum 44px)
• ✅ Easy maintenance - Clear spacing system to reference

Pull Request

PR #26 includes this fix along with color system standardization (#19).

Next Steps

• Gradually migrate hardcoded spacing values to CSS variables
• Apply spacing scale to new components
• Document spacing usage guidelines
• Consider using spacing scale for border-radius values