.kiro/specs/dashboard-redesign/tasks.md

# Implementation Plan: Dashboard Redesign

## Overview

This plan migrates the STEAM Security Dashboard frontend to the refined design system defined in `docs/design-system-redesign/`. The migration is purely presentational — no behavior, routing, state management, or API changes. Each phase is independently verifiable with `npm run build` in `frontend/`. The 10-phase order ensures tokens and global styles land first, then pages migrate one at a time without breaking unmigrated components.

Key references:
- Design tokens source: `docs/design-system-redesign/colors_and_type.css`
- UI kit primitives: `docs/design-system-redesign/ui_kits/cve-dashboard/Primitives.jsx`, `AppShell.jsx`
- Home primitives: `docs/design-system-redesign/ui_kits/home/HomePrimitives.jsx`
- Reporting primitives: `docs/design-system-redesign/ui_kits/reporting/ReportPrimitives.jsx`
- Compliance primitives: `docs/design-system-redesign/ui_kits/compliance/CompPrimitives.jsx`

## Tasks

- [x] 1. Phase 1 — Port design tokens to App.css
  - [x] 1.1 Add all new CSS custom properties to the `:root` block in `frontend/src/App.css`
    - Merge every token from `docs/design-system-redesign/colors_and_type.css` into the existing `:root` block
    - Add surface aliases (`--bg-page`, `--bg-surface`, `--bg-elevated`, `--bg-hover`, `--bg-input`, `--bg-overlay`)
    - Add foreground aliases (`--fg-1`, `--fg-2`, `--fg-muted`, `--fg-disabled`, `--fg-3`, `--fg-on-accent`)
    - Add border tokens (`--border-subtle`, `--border-default`, `--border-strong`, `--border-focus`, `--border-1`, `--border-2`, `--border-3`)
    - Add brand accent variants (`--intel-accent-bright`, `--intel-accent-soft`, `--intel-accent-15`, `--intel-accent-08`, `--accent`, `--accent-bright`, `--accent-soft`, `--accent-wash`, `--accent-hover`)
    - Add severity semantic tokens (`--sev-critical`, `--sev-high`, `--sev-medium`, `--sev-low`), severity text tokens (`--sev-critical-text`, `--sev-high-text`, `--sev-medium-text`, `--sev-low-text`), and severity fill tokens (`--sev-critical-bg`, `--sev-high-bg`, `--sev-medium-bg`, `--sev-low-bg`)
    - Add group badge tokens (`--group-admin`, `--group-standard`, `--group-leadership`, `--group-readonly`)
    - Add font family tokens (`--font-ui`, `--font-mono`)
    - Add type scale tokens (`--fs-display` through `--fs-tiny`), line height tokens (`--lh-tight`, `--lh-normal`, `--lh-loose`), font weight tokens (`--fw-regular` through `--fw-bold`), and letter spacing tokens (`--tracking-wide`, `--tracking-wider`)
    - Add spacing scale tokens (`--sp-1` through `--sp-12`)
    - Add radii tokens (`--r-xs` through `--r-pill`)
    - Add elevation tokens (`--shadow-rest`, `--shadow-card`, `--shadow-card-hover`, `--shadow-popover`, `--shadow-modal`, `--shadow-focus`)
    - Add severity glow tokens (`--glow-danger`, `--glow-warning`, `--glow-info`, `--glow-success`) and heading glow (`--glow-heading`)
    - Add motion tokens (`--ease-out`, `--ease-in-out`, `--dur-fast`, `--dur-med`, `--dur-slow`)
    - Add layout tokens (`--topbar-h`, `--drawer-w`, `--panel-w`, `--content-max`, `--z-topbar`, `--z-drawer`, `--z-modal`, `--z-tooltip`)
    - Preserve all existing CSS custom properties that are not superseded
    - Update the universal selector `*` to use `font-family: var(--font-ui)`
    - _Requirements: 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9_

- [x] 2. Phase 2 — Load fonts via Google Fonts CDN
  - [x] 2.1 Update the Google Fonts `<link>` tag in `frontend/public/index.html`
    - Ensure Outfit loads weights 300, 400, 500, 600, 700, 800
    - Ensure JetBrains Mono loads weights 400, 500, 600, 700
    - Ensure `display=swap` is present to prevent invisible text during font loading
    - _Requirements: 2.1, 2.3_

- [x] 3. Phase 3 — Update global CSS classes and animations in App.css
  - [x] 3.1 Update existing component classes to reference new design tokens
    - Update `.intel-card` to use `var(--shadow-card)` and `var(--shadow-card-hover)` elevation tokens, 8px border-radius, and the shimmer sweep on hover over 500ms
    - Update `.status-badge` to use `var(--font-mono)`, 0.75rem size, 700 weight, uppercase, 0.5px letter spacing, 6px border-radius, 2px solid border, and `pulse-glow` animation at 2s interval
    - Update `.intel-button` to use `var(--font-mono)`, 600 weight, uppercase, 0.5px letter spacing, 6px border-radius, and the circular ripple hover effect expanding to 300px
    - Update `.intel-input` to use `var(--bg-input)` background, `var(--border-subtle)` border, 6px border-radius, and on focus apply `var(--border-focus)` border color with `var(--shadow-focus)` ring
    - Update `.stat-card` to use the diagonal gradient, 8px border-radius, 2px top-edge gradient rail, and `var(--shadow-card)` elevation
    - Update `.modal-overlay` to use `var(--bg-overlay)` background and `backdrop-filter: blur(12px)`
    - _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7_
  - [x] 3.2 Update keyframe animations to match design token definitions
    - Update `pulse-glow`, `spin`, `fade-in`, and `scan` keyframes to match `colors_and_type.css` definitions
    - _Requirements: 3.8_
  - [x] 3.3 Add semantic type utility classes
    - Add `.t-display`, `.t-h1`, `.t-h2`, `.t-h3`, `.t-body`, `.t-sm`, `.t-meta`, `.t-label`, `.t-mono`, `.t-mono-sm`, `.t-code` classes matching the `colors_and_type.css` definitions
    - _Requirements: 3.9_
  - [x] 3.4 Add `*:focus-visible` rule and update scrollbar styling
    - Add `*:focus-visible` rule applying `var(--border-focus)` border color and `var(--shadow-focus)` box-shadow with no outline
    - Update webkit scrollbar styling to use `var(--intel-dark)` track, `rgba(14,165,233,0.3)` thumb with 4px border-radius, and `rgba(14,165,233,0.5)` on hover
    - _Requirements: 3.10, 16.1, 16.2_

- [x] 4. Checkpoint — Verify token migration and global CSS
  - Run `npm run build` in `frontend/` to confirm zero errors
  - Verify all existing pages still render correctly with both old and new token names available
  - Ensure all tests pass, ask the user if questions arise.
  - _Requirements: 13.1_

- [x] 5. Phase 4 — Redesign the App Shell
  - [x] 5.1 Update the top bar styles in `frontend/src/App.js`
    - Set top bar to `var(--topbar-h)` height (64px), `var(--bg-surface)` background, `var(--border-subtle)` bottom border, `var(--z-topbar)` z-index
    - Replace the brand mark with a typographic stack: "STEAM" in Outfit 700 at 15px, "SECURITY" in Outfit 500 at 9px with 0.18em letter spacing, Shield icon in `var(--accent)` color — matching `AppShell.jsx` reference
    - Update navigation tabs to Outfit 13px, 500 weight (600 active), active state uses `var(--accent)` text + `var(--accent-soft)` background — matching `NavTab` in `AppShell.jsx`
    - _Requirements: 4.1, 4.2, 4.3, 4.4, 15.1_
  - [x] 5.2 Update `frontend/src/components/NavDrawer.js` inline styles
    - Set drawer to `var(--drawer-w)` width (240px), `var(--bg-surface)` background, `var(--border-subtle)` right border, `var(--z-drawer)` z-index
    - Set overlay to `var(--bg-overlay)` background with `backdrop-filter: blur(4px)` — matching `NavDrawer` in `AppShell.jsx`
    - Update drawer items to match `DrawerItem` pattern: Outfit font, 13px, 500 weight (600 active), active uses `var(--accent)` text + `var(--accent-soft)` background
    - _Requirements: 4.5, 4.6_
  - [x] 5.3 Update `frontend/src/components/UserMenu.js` inline styles
    - Update avatar to circular with initials in `var(--accent)` on `var(--accent-soft)` background — matching `UserMenu` in `AppShell.jsx`
    - Update dropdown to `var(--bg-surface)` background, `var(--border-subtle)` border, `var(--shadow-popover)` elevation, `var(--z-drawer)` z-index
    - Include user name, email, group badge, and menu items in dropdown — matching `AppShell.jsx` reference
    - _Requirements: 4.7, 4.8_

- [x] 6. Phase 5 — Redesign the Home Page
  - [x] 6.1 Update stat card styles in `frontend/src/App.js`
    - Apply Card_Surface treatment with 2px top-edge gradient rail
    - Color-code borders: sky for neutral, amber for attention, red for critical
    - Apply `var(--shadow-card)` elevation with severity-tinted glow — matching `StatCard` in `HomePrimitives.jsx`
    - _Requirements: 5.1_
  - [x] 6.2 Update page title and CVE row styles in `frontend/src/App.js`
    - Set page title to JetBrains Mono, 24px, 700 weight, sky-blue, uppercase, 0.1em letter spacing, heading glow text-shadow
    - Update CVE row cards to Card_Surface treatment with 1.5px sky-blue border at 0.12 alpha, 8px border-radius, chevron toggle rotating from -90deg to 0deg — matching `CVERow` in `HomePrimitives.jsx`
    - Update expanded CVE row content: severity badge with pulse-glow dot, vendor count, doc count, status labels
    - Update vendor entry sub-cards to nested Card_Surface gradient — matching `VendorEntry` in `HomePrimitives.jsx`
    - _Requirements: 5.2, 5.3, 5.4_
  - [x] 6.3 Update Quick Lookup section styles in `frontend/src/App.js`
    - Apply Card_Surface with sky-blue identity
    - Update search input with icon, filter controls — matching `HomeInput` in `HomePrimitives.jsx`
    - Update result banners with tone-coded backgrounds (success green, warning amber, error red) — matching `ResultBanner` in `HomePrimitives.jsx`
    - _Requirements: 5.5_
  - [x] 6.4 Update calendar widget and right-rail panel styles in `frontend/src/App.js`
    - Update calendar to JetBrains Mono font, sky-blue current-day highlight, severity-colored dots, navigation buttons with sky-blue borders — matching `CalendarMini` in `HomePrimitives.jsx`
    - Update right-rail panels (Open Tickets, Archer, Ivanti) as Card_Surface containers with left-rail color accents (amber, purple, teal), BigStat centered counts, scrollable MiniTicket lists — matching `HomeCard`, `BigStat`, `MiniTicket` in `HomePrimitives.jsx`
    - _Requirements: 5.6, 5.7_
  - [x] 6.5 Update filter control styles in `frontend/src/App.js`
    - Update inputs and selects to `var(--bg-input)` background, sky-blue focus borders, JetBrains Mono font — matching `HomeInput`, `HomeSelect` in `HomePrimitives.jsx`
    - _Requirements: 5.8_

- [x] 7. Checkpoint — Verify App Shell and Home Page
  - Run `npm run build` in `frontend/` to confirm zero errors
  - Ensure all tests pass, ask the user if questions arise.
  - _Requirements: 13.2_

- [x] 8. Phase 6 — Redesign the Reporting Page
  - [x] 8.1 Update page header and button styles in `frontend/src/components/pages/ReportingPage.js`
    - Set header to "REPORTING" in JetBrains Mono, 24px, 700 weight, green (#10B981), uppercase, 0.1em letter spacing, green glow text-shadow — matching `PageHeader` in `ReportPrimitives.jsx`
    - Update Sync button to green tinted-fill primary variant — matching `RptButton` primary in `ReportPrimitives.jsx`
    - Update secondary buttons (Atlas, Export, Queue, Column manager) to sky-blue outlined or tinted-fill variants — matching `RptButton` neutral/subtle in `ReportPrimitives.jsx`
    - _Requirements: 6.1, 6.2_
  - [x] 8.2 Update findings table panel and toolbar styles in `frontend/src/components/pages/ReportingPage.js`
    - Apply Card_Surface with sky-blue border at 0.12 alpha — matching `KbCard` in `ReportPrimitives.jsx`
    - Update toolbar with mono uppercase labels, filter chips in amber, pill tabs for Ivanti/Atlas views — matching `ToolbarLabel`, `FilterChip`, `PillTab` in `ReportPrimitives.jsx`
    - _Requirements: 6.3_
  - [x] 8.3 Update table row and cell styles in `frontend/src/components/pages/ReportingPage.js`
    - Update rows with `var(--border-subtle)` bottom borders
    - Update severity dots to 7px diameter with colored glow — matching `SeverityDot` in `ReportPrimitives.jsx`
    - Update SLA pills with pill-radius and tinted backgrounds — matching `SlaPill` in `ReportPrimitives.jsx`
    - Update workflow badges with 4px radius and tinted borders — matching `WorkflowBadge` in `ReportPrimitives.jsx`
    - Apply hover state: `rgba(0,217,255,0.06)` background wash and `0 2px 8px rgba(0,217,255,0.10)` sub-shadow
    - _Requirements: 6.4, 6.5_
  - [x] 8.4 Update chart panels and error banner styles in `frontend/src/components/pages/ReportingPage.js`
    - Update chart panels to Card_Surface with sky-blue borders, mono uppercase title labels — matching `KbCard` in `ReportPrimitives.jsx`
    - Update donut charts to use severity color palette
    - Update error status banner to red-tinted background, red border, AlertCircle icon, mono font — matching `StatusBanner` in `ReportPrimitives.jsx`
    - _Requirements: 6.6, 6.7_

- [x] 9. Phase 7 — Redesign the Compliance Page
  - [x] 9.1 Update page header and team tabs in `frontend/src/components/pages/CompliancePage.js`
    - Set header to "AEO COMPLIANCE" in JetBrains Mono, 24px, 700 weight, teal (#14B8A6), uppercase, 0.1em letter spacing, teal glow text-shadow — matching `CompPageHeader` in `CompPrimitives.jsx`
    - Update team tabs (STEAM, ACCESS-ENG) with teal-tinted active state, mono uppercase labels, 6px border-radius — matching `TeamTabs` in `CompPrimitives.jsx`
    - _Requirements: 7.1, 7.2_
  - [x] 9.2 Update metric health cards in `frontend/src/components/pages/CompliancePage.js`
    - Apply Card_Surface with status-colored borders (green for meeting, amber for within 15%, red for below 15%)
    - Add variant pills showing compliance percentages — matching `MetricHealthCard`, `VariantPill` in `CompPrimitives.jsx`
    - Add status ribbon at bottom — matching `StatusRibbon` in `CompPrimitives.jsx`
    - Highlight active card with status-colored background fill at 0.15 alpha and solid border
    - _Requirements: 7.3, 7.4_
  - [x] 9.3 Update device table styles in `frontend/src/components/pages/CompliancePage.js`
    - Apply teal-tinted borders at 0.15 alpha
    - Update column headers to mono uppercase
    - Update hostname/IP to JetBrains Mono
    - Add category-colored metric badges — matching `MetricBadge` in `CompPrimitives.jsx`
    - Add escalating seen-count badges (slate for 1, amber for 2–3, red for 4+) — matching `SeenBadge` in `CompPrimitives.jsx`
    - Add teal-accented search input — matching `CompSearchInput` in `CompPrimitives.jsx`
    - Apply hover state with white-alpha background wash and selected row with 2px teal left border — matching `DeviceRow` in `CompPrimitives.jsx`
    - _Requirements: 7.5, 7.6_
  - [x] 9.4 Update chart cards in `frontend/src/components/pages/CompliancePage.js`
    - Apply teal-tinted borders, mono uppercase titles, Card_Surface gradient background — matching `ChartCard` in `CompPrimitives.jsx`
    - _Requirements: 7.7_
  - [x] 9.5 Update `frontend/src/components/pages/ComplianceUploadModal.js` styles
    - Update modal overlay, card, and buttons to match design system tokens
    - _Requirements: 9.2_
  - [x] 9.6 Update `frontend/src/components/pages/ComplianceDetailPanel.js` styles
    - Update panel chrome and data rows to use design tokens
    - _Requirements: 7.5_
  - [x] 9.7 Update `frontend/src/components/pages/ComplianceChartsPanel.js` styles
    - Update chart card wrappers and teal borders to use design tokens
    - _Requirements: 7.7_
  - [x] 9.8 Update rollback modal in `frontend/src/components/pages/CompliancePage.js`
    - Apply centered modal with red-tinted border, red mono uppercase title, dark recessed file label, danger-styled confirm button — matching `RollbackDialog` in `CompPrimitives.jsx`
    - _Requirements: 7.8_

- [x] 10. Checkpoint — Verify Reporting and Compliance Pages
  - Run `npm run build` in `frontend/` to confirm zero errors
  - Ensure all tests pass, ask the user if questions arise.

- [x] 11. Phase 8 — Redesign the Knowledge Base Page
  - [x] 11.1 Update `frontend/src/components/pages/KnowledgeBasePage.js` styles
    - Set page header to mono uppercase glow pattern with sky-blue or green identity color
    - Update document list items to recessed Card_Surface treatment with `inset 0 2px 4px rgba(0,0,0,0.3)` shadow, sky-blue borders at 0.20 alpha, hover state increasing border opacity to 0.35
    - Update action buttons (upload, create, view) to redesigned button variants with mono uppercase labels and tinted-fill backgrounds
    - _Requirements: 8.1, 8.2, 8.4_
  - [x] 11.2 Update `frontend/src/components/KnowledgeBaseModal.js` styles
    - Update modal chrome and form inputs to use design tokens
    - Apply `var(--bg-overlay)` overlay, `var(--shadow-modal)` elevation, 12px border-radius
    - _Requirements: 9.2_
  - [x] 11.3 Update `frontend/src/components/KnowledgeBaseViewer.js` styles
    - Update viewer chrome and markdown content area
    - Ensure `.markdown-content` rules in App.css are consistent: h1 sky-blue, h2 emerald, h3 amber, code blocks with dark recessed background, blockquotes with sky-blue left border
    - _Requirements: 8.3_

- [x] 12. Phase 9 — Redesign the Exports Page
  - [x] 12.1 Update `frontend/src/components/pages/ExportsPage.js` styles
    - Set page header to mono uppercase glow pattern with appropriate identity color
    - Update export action cards to Card_Surface treatment with sky-blue borders
    - Update buttons to redesigned button variants
    - _Requirements: 10.1, 10.2_

- [x] 13. Phase 10 — Redesign Shared Components
  - [x] 13.1 Update `frontend/src/components/LoginForm.js` styles
    - Apply Card_Surface treatment to login form
    - Update input fields to `var(--bg-input)` background with sky-blue focus rings
    - Update primary button to redesigned variant
    - _Requirements: 9.1_
  - [x] 13.2 Update `frontend/src/components/CalendarWidget.js` styles
    - Apply JetBrains Mono font throughout
    - Set sky-blue current-day highlight with 1px border
    - Add severity-colored date markers
    - Update navigation buttons with sky-blue borders — matching `CalendarMini` in `HomePrimitives.jsx`
    - _Requirements: 9.6_
  - [x] 13.3 Update `frontend/src/components/UserManagement.js` styles
    - Apply group badges using token-based group colors (`--group-admin` red, `--group-standard` sky-blue, `--group-leadership` amber, `--group-readonly` grey) with pill-radius and tinted backgrounds — matching `GroupBadge` in `Primitives.jsx`
    - Update table rows and buttons to use design tokens
    - _Requirements: 9.3_
  - [x] 13.4 Update `frontend/src/components/AuditLog.js` styles
    - Apply data-row treatment with `var(--border-subtle)` bottom borders
    - Update timestamps and action types to mono font
    - Apply hover state with sky-blue background wash
    - _Requirements: 9.4_
  - [x] 13.5 Update `frontend/src/components/NvdSyncModal.js` styles
    - Apply Card_Surface treatment with standard modal elevation
    - Update buttons to redesigned variants
    - Apply `var(--bg-overlay)` overlay and `var(--shadow-modal)` elevation
    - _Requirements: 9.5_

- [x] 14. Final checkpoint — Verify all pages and shared components
  - Run `npm run build` in `frontend/` to confirm zero errors
  - Verify no new console warnings related to styling
  - Ensure all tests pass, ask the user if questions arise.
  - _Requirements: 11.1, 11.2, 11.3, 11.4, 11.5, 12.1, 12.2, 14.1, 14.2, 14.3, 14.4_

## Notes

- This is a pure visual redesign. No behavior, routing, state management, or API changes.
- No new dependencies are added. Fonts load from Google Fonts CDN only.
- Each phase is independently verifiable — run `npm run build` after each to confirm no breakage.
- Severity colors are immutable: Critical (#EF4444), High (#F59E0B), Medium (#0EA5E9), Low (#10B981).
- All existing CSS custom properties are preserved alongside new tokens for backward compatibility.
- UI kit reference files in `docs/design-system-redesign/ui_kits/` are the visual source of truth for each component's target styling.
- Property-based testing does not apply to this feature — it is a pure CSS/style migration with no testable pure functions or data transformations.
-												WIP: Dashboard redesign — design system overhaul and component updates

Frontend redesign in progress: updated styles, layout, and components
across all pages to align with new design system. Includes Jira API
compliance specs, property tests, and load test script.

											
										
										
											2026-04-29 14:20:23 +00:00
+								# Implementation Plan: Dashboard Redesign
 								## Overview
 								This plan migrates the STEAM Security Dashboard frontend to the refined design system defined in `docs/design-system-redesign/`. The migration is purely presentational — no behavior, routing, state management, or API changes. Each phase is independently verifiable with `npm run build` in `frontend/`. The 10-phase order ensures tokens and global styles land first, then pages migrate one at a time without breaking unmigrated components.
 								Key references:
 								- Design tokens source: `docs/design-system-redesign/colors_and_type.css`
 								- UI kit primitives: `docs/design-system-redesign/ui_kits/cve-dashboard/Primitives.jsx`, `AppShell.jsx`
 								- Home primitives: `docs/design-system-redesign/ui_kits/home/HomePrimitives.jsx`
 								- Reporting primitives: `docs/design-system-redesign/ui_kits/reporting/ReportPrimitives.jsx`
 								- Compliance primitives: `docs/design-system-redesign/ui_kits/compliance/CompPrimitives.jsx`
 								## Tasks
 								- [x] 1. Phase 1 — Port design tokens to App.css
 								  - [x] 1.1 Add all new CSS custom properties to the `:root` block in `frontend/src/App.css`
 								    - Merge every token from `docs/design-system-redesign/colors_and_type.css` into the existing `:root` block
 								    - Add surface aliases (`--bg-page`, `--bg-surface`, `--bg-elevated`, `--bg-hover`, `--bg-input`, `--bg-overlay`)
 								    - Add foreground aliases (`--fg-1`, `--fg-2`, `--fg-muted`, `--fg-disabled`, `--fg-3`, `--fg-on-accent`)
 								    - Add border tokens (`--border-subtle`, `--border-default`, `--border-strong`, `--border-focus`, `--border-1`, `--border-2`, `--border-3`)
 								    - Add brand accent variants (`--intel-accent-bright`, `--intel-accent-soft`, `--intel-accent-15`, `--intel-accent-08`, `--accent`, `--accent-bright`, `--accent-soft`, `--accent-wash`, `--accent-hover`)
 								    - Add severity semantic tokens (`--sev-critical`, `--sev-high`, `--sev-medium`, `--sev-low`), severity text tokens (`--sev-critical-text`, `--sev-high-text`, `--sev-medium-text`, `--sev-low-text`), and severity fill tokens (`--sev-critical-bg`, `--sev-high-bg`, `--sev-medium-bg`, `--sev-low-bg`)
 								    - Add group badge tokens (`--group-admin`, `--group-standard`, `--group-leadership`, `--group-readonly`)
 								    - Add font family tokens (`--font-ui`, `--font-mono`)
 								    - Add type scale tokens (`--fs-display` through `--fs-tiny`), line height tokens (`--lh-tight`, `--lh-normal`, `--lh-loose`), font weight tokens (`--fw-regular` through `--fw-bold`), and letter spacing tokens (`--tracking-wide`, `--tracking-wider`)
 								    - Add spacing scale tokens (`--sp-1` through `--sp-12`)
 								    - Add radii tokens (`--r-xs` through `--r-pill`)
 								    - Add elevation tokens (`--shadow-rest`, `--shadow-card`, `--shadow-card-hover`, `--shadow-popover`, `--shadow-modal`, `--shadow-focus`)
 								    - Add severity glow tokens (`--glow-danger`, `--glow-warning`, `--glow-info`, `--glow-success`) and heading glow (`--glow-heading`)
 								    - Add motion tokens (`--ease-out`, `--ease-in-out`, `--dur-fast`, `--dur-med`, `--dur-slow`)
 								    - Add layout tokens (`--topbar-h`, `--drawer-w`, `--panel-w`, `--content-max`, `--z-topbar`, `--z-drawer`, `--z-modal`, `--z-tooltip`)
 								    - Preserve all existing CSS custom properties that are not superseded
 								    - Update the universal selector `*` to use `font-family: var(--font-ui)`
 								    - _Requirements: 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9_
 								- [x] 2. Phase 2 — Load fonts via Google Fonts CDN
 								  - [x] 2.1 Update the Google Fonts `<link>` tag in `frontend/public/index.html`
 								    - Ensure Outfit loads weights 300, 400, 500, 600, 700, 800
 								    - Ensure JetBrains Mono loads weights 400, 500, 600, 700
 								    - Ensure `display=swap` is present to prevent invisible text during font loading
 								    - _Requirements: 2.1, 2.3_
 								- [x] 3. Phase 3 — Update global CSS classes and animations in App.css
 								  - [x] 3.1 Update existing component classes to reference new design tokens
 								    - Update `.intel-card` to use `var(--shadow-card)` and `var(--shadow-card-hover)` elevation tokens, 8px border-radius, and the shimmer sweep on hover over 500ms
 								    - Update `.status-badge` to use `var(--font-mono)`, 0.75rem size, 700 weight, uppercase, 0.5px letter spacing, 6px border-radius, 2px solid border, and `pulse-glow` animation at 2s interval
 								    - Update `.intel-button` to use `var(--font-mono)`, 600 weight, uppercase, 0.5px letter spacing, 6px border-radius, and the circular ripple hover effect expanding to 300px
 								    - Update `.intel-input` to use `var(--bg-input)` background, `var(--border-subtle)` border, 6px border-radius, and on focus apply `var(--border-focus)` border color with `var(--shadow-focus)` ring
 								    - Update `.stat-card` to use the diagonal gradient, 8px border-radius, 2px top-edge gradient rail, and `var(--shadow-card)` elevation
 								    - Update `.modal-overlay` to use `var(--bg-overlay)` background and `backdrop-filter: blur(12px)`
 								    - _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7_
 								  - [x] 3.2 Update keyframe animations to match design token definitions
 								    - Update `pulse-glow`, `spin`, `fade-in`, and `scan` keyframes to match `colors_and_type.css` definitions
 								    - _Requirements: 3.8_
 								  - [x] 3.3 Add semantic type utility classes
 								    - Add `.t-display`, `.t-h1`, `.t-h2`, `.t-h3`, `.t-body`, `.t-sm`, `.t-meta`, `.t-label`, `.t-mono`, `.t-mono-sm`, `.t-code` classes matching the `colors_and_type.css` definitions
 								    - _Requirements: 3.9_
 								  - [x] 3.4 Add `*:focus-visible` rule and update scrollbar styling
 								    - Add `*:focus-visible` rule applying `var(--border-focus)` border color and `var(--shadow-focus)` box-shadow with no outline
 								    - Update webkit scrollbar styling to use `var(--intel-dark)` track, `rgba(14,165,233,0.3)` thumb with 4px border-radius, and `rgba(14,165,233,0.5)` on hover
 								    - _Requirements: 3.10, 16.1, 16.2_
 								- [x] 4. Checkpoint — Verify token migration and global CSS
 								  - Run `npm run build` in `frontend/` to confirm zero errors
 								  - Verify all existing pages still render correctly with both old and new token names available
 								  - Ensure all tests pass, ask the user if questions arise.
 								  - _Requirements: 13.1_
 								- [x] 5. Phase 4 — Redesign the App Shell
 								  - [x] 5.1 Update the top bar styles in `frontend/src/App.js`
 								    - Set top bar to `var(--topbar-h)` height (64px), `var(--bg-surface)` background, `var(--border-subtle)` bottom border, `var(--z-topbar)` z-index
 								    - Replace the brand mark with a typographic stack: "STEAM" in Outfit 700 at 15px, "SECURITY" in Outfit 500 at 9px with 0.18em letter spacing, Shield icon in `var(--accent)` color — matching `AppShell.jsx` reference
 								    - Update navigation tabs to Outfit 13px, 500 weight (600 active), active state uses `var(--accent)` text + `var(--accent-soft)` background — matching `NavTab` in `AppShell.jsx`
 								    - _Requirements: 4.1, 4.2, 4.3, 4.4, 15.1_
 								  - [x] 5.2 Update `frontend/src/components/NavDrawer.js` inline styles
 								    - Set drawer to `var(--drawer-w)` width (240px), `var(--bg-surface)` background, `var(--border-subtle)` right border, `var(--z-drawer)` z-index
 								    - Set overlay to `var(--bg-overlay)` background with `backdrop-filter: blur(4px)` — matching `NavDrawer` in `AppShell.jsx`
 								    - Update drawer items to match `DrawerItem` pattern: Outfit font, 13px, 500 weight (600 active), active uses `var(--accent)` text + `var(--accent-soft)` background
 								    - _Requirements: 4.5, 4.6_
 								  - [x] 5.3 Update `frontend/src/components/UserMenu.js` inline styles
 								    - Update avatar to circular with initials in `var(--accent)` on `var(--accent-soft)` background — matching `UserMenu` in `AppShell.jsx`
 								    - Update dropdown to `var(--bg-surface)` background, `var(--border-subtle)` border, `var(--shadow-popover)` elevation, `var(--z-drawer)` z-index
 								    - Include user name, email, group badge, and menu items in dropdown — matching `AppShell.jsx` reference
 								    - _Requirements: 4.7, 4.8_
 								- [x] 6. Phase 5 — Redesign the Home Page
 								  - [x] 6.1 Update stat card styles in `frontend/src/App.js`
 								    - Apply Card_Surface treatment with 2px top-edge gradient rail
 								    - Color-code borders: sky for neutral, amber for attention, red for critical
 								    - Apply `var(--shadow-card)` elevation with severity-tinted glow — matching `StatCard` in `HomePrimitives.jsx`
 								    - _Requirements: 5.1_
 								  - [x] 6.2 Update page title and CVE row styles in `frontend/src/App.js`
 								    - Set page title to JetBrains Mono, 24px, 700 weight, sky-blue, uppercase, 0.1em letter spacing, heading glow text-shadow
 								    - Update CVE row cards to Card_Surface treatment with 1.5px sky-blue border at 0.12 alpha, 8px border-radius, chevron toggle rotating from -90deg to 0deg — matching `CVERow` in `HomePrimitives.jsx`
 								    - Update expanded CVE row content: severity badge with pulse-glow dot, vendor count, doc count, status labels
 								    - Update vendor entry sub-cards to nested Card_Surface gradient — matching `VendorEntry` in `HomePrimitives.jsx`
 								    - _Requirements: 5.2, 5.3, 5.4_
 								  - [x] 6.3 Update Quick Lookup section styles in `frontend/src/App.js`
 								    - Apply Card_Surface with sky-blue identity
 								    - Update search input with icon, filter controls — matching `HomeInput` in `HomePrimitives.jsx`
 								    - Update result banners with tone-coded backgrounds (success green, warning amber, error red) — matching `ResultBanner` in `HomePrimitives.jsx`
 								    - _Requirements: 5.5_
 								  - [x] 6.4 Update calendar widget and right-rail panel styles in `frontend/src/App.js`
 								    - Update calendar to JetBrains Mono font, sky-blue current-day highlight, severity-colored dots, navigation buttons with sky-blue borders — matching `CalendarMini` in `HomePrimitives.jsx`
 								    - Update right-rail panels (Open Tickets, Archer, Ivanti) as Card_Surface containers with left-rail color accents (amber, purple, teal), BigStat centered counts, scrollable MiniTicket lists — matching `HomeCard`, `BigStat`, `MiniTicket` in `HomePrimitives.jsx`
 								    - _Requirements: 5.6, 5.7_
 								  - [x] 6.5 Update filter control styles in `frontend/src/App.js`
 								    - Update inputs and selects to `var(--bg-input)` background, sky-blue focus borders, JetBrains Mono font — matching `HomeInput`, `HomeSelect` in `HomePrimitives.jsx`
 								    - _Requirements: 5.8_
 								- [x] 7. Checkpoint — Verify App Shell and Home Page
 								  - Run `npm run build` in `frontend/` to confirm zero errors
 								  - Ensure all tests pass, ask the user if questions arise.
 								  - _Requirements: 13.2_
 								- [x] 8. Phase 6 — Redesign the Reporting Page
 								  - [x] 8.1 Update page header and button styles in `frontend/src/components/pages/ReportingPage.js`
 								    - Set header to "REPORTING" in JetBrains Mono, 24px, 700 weight, green (#10B981), uppercase, 0.1em letter spacing, green glow text-shadow — matching `PageHeader` in `ReportPrimitives.jsx`
 								    - Update Sync button to green tinted-fill primary variant — matching `RptButton` primary in `ReportPrimitives.jsx`
 								    - Update secondary buttons (Atlas, Export, Queue, Column manager) to sky-blue outlined or tinted-fill variants — matching `RptButton` neutral/subtle in `ReportPrimitives.jsx`
 								    - _Requirements: 6.1, 6.2_
 								  - [x] 8.2 Update findings table panel and toolbar styles in `frontend/src/components/pages/ReportingPage.js`
 								    - Apply Card_Surface with sky-blue border at 0.12 alpha — matching `KbCard` in `ReportPrimitives.jsx`
 								    - Update toolbar with mono uppercase labels, filter chips in amber, pill tabs for Ivanti/Atlas views — matching `ToolbarLabel`, `FilterChip`, `PillTab` in `ReportPrimitives.jsx`
 								    - _Requirements: 6.3_
 								  - [x] 8.3 Update table row and cell styles in `frontend/src/components/pages/ReportingPage.js`
 								    - Update rows with `var(--border-subtle)` bottom borders
 								    - Update severity dots to 7px diameter with colored glow — matching `SeverityDot` in `ReportPrimitives.jsx`
 								    - Update SLA pills with pill-radius and tinted backgrounds — matching `SlaPill` in `ReportPrimitives.jsx`
 								    - Update workflow badges with 4px radius and tinted borders — matching `WorkflowBadge` in `ReportPrimitives.jsx`
 								    - Apply hover state: `rgba(0,217,255,0.06)` background wash and `0 2px 8px rgba(0,217,255,0.10)` sub-shadow
 								    - _Requirements: 6.4, 6.5_
 								  - [x] 8.4 Update chart panels and error banner styles in `frontend/src/components/pages/ReportingPage.js`
 								    - Update chart panels to Card_Surface with sky-blue borders, mono uppercase title labels — matching `KbCard` in `ReportPrimitives.jsx`
 								    - Update donut charts to use severity color palette
 								    - Update error status banner to red-tinted background, red border, AlertCircle icon, mono font — matching `StatusBanner` in `ReportPrimitives.jsx`
 								    - _Requirements: 6.6, 6.7_
 								- [x] 9. Phase 7 — Redesign the Compliance Page
 								  - [x] 9.1 Update page header and team tabs in `frontend/src/components/pages/CompliancePage.js`
 								    - Set header to "AEO COMPLIANCE" in JetBrains Mono, 24px, 700 weight, teal (#14B8A6), uppercase, 0.1em letter spacing, teal glow text-shadow — matching `CompPageHeader` in `CompPrimitives.jsx`
 								    - Update team tabs (STEAM, ACCESS-ENG) with teal-tinted active state, mono uppercase labels, 6px border-radius — matching `TeamTabs` in `CompPrimitives.jsx`
 								    - _Requirements: 7.1, 7.2_
 								  - [x] 9.2 Update metric health cards in `frontend/src/components/pages/CompliancePage.js`
 								    - Apply Card_Surface with status-colored borders (green for meeting, amber for within 15%, red for below 15%)
 								    - Add variant pills showing compliance percentages — matching `MetricHealthCard`, `VariantPill` in `CompPrimitives.jsx`
 								    - Add status ribbon at bottom — matching `StatusRibbon` in `CompPrimitives.jsx`
 								    - Highlight active card with status-colored background fill at 0.15 alpha and solid border
 								    - _Requirements: 7.3, 7.4_
 								  - [x] 9.3 Update device table styles in `frontend/src/components/pages/CompliancePage.js`
 								    - Apply teal-tinted borders at 0.15 alpha
 								    - Update column headers to mono uppercase
 								    - Update hostname/IP to JetBrains Mono
 								    - Add category-colored metric badges — matching `MetricBadge` in `CompPrimitives.jsx`
 								    - Add escalating seen-count badges (slate for 1, amber for 2–3, red for 4+) — matching `SeenBadge` in `CompPrimitives.jsx`
 								    - Add teal-accented search input — matching `CompSearchInput` in `CompPrimitives.jsx`
 								    - Apply hover state with white-alpha background wash and selected row with 2px teal left border — matching `DeviceRow` in `CompPrimitives.jsx`
 								    - _Requirements: 7.5, 7.6_
 								  - [x] 9.4 Update chart cards in `frontend/src/components/pages/CompliancePage.js`
 								    - Apply teal-tinted borders, mono uppercase titles, Card_Surface gradient background — matching `ChartCard` in `CompPrimitives.jsx`
 								    - _Requirements: 7.7_
 								  - [x] 9.5 Update `frontend/src/components/pages/ComplianceUploadModal.js` styles
 								    - Update modal overlay, card, and buttons to match design system tokens
 								    - _Requirements: 9.2_
 								  - [x] 9.6 Update `frontend/src/components/pages/ComplianceDetailPanel.js` styles
 								    - Update panel chrome and data rows to use design tokens
 								    - _Requirements: 7.5_
 								  - [x] 9.7 Update `frontend/src/components/pages/ComplianceChartsPanel.js` styles
 								    - Update chart card wrappers and teal borders to use design tokens
 								    - _Requirements: 7.7_
 								  - [x] 9.8 Update rollback modal in `frontend/src/components/pages/CompliancePage.js`
 								    - Apply centered modal with red-tinted border, red mono uppercase title, dark recessed file label, danger-styled confirm button — matching `RollbackDialog` in `CompPrimitives.jsx`
 								    - _Requirements: 7.8_
 								- [x] 10. Checkpoint — Verify Reporting and Compliance Pages
 								  - Run `npm run build` in `frontend/` to confirm zero errors
 								  - Ensure all tests pass, ask the user if questions arise.
 								- [x] 11. Phase 8 — Redesign the Knowledge Base Page
 								  - [x] 11.1 Update `frontend/src/components/pages/KnowledgeBasePage.js` styles
 								    - Set page header to mono uppercase glow pattern with sky-blue or green identity color
 								    - Update document list items to recessed Card_Surface treatment with `inset 0 2px 4px rgba(0,0,0,0.3)` shadow, sky-blue borders at 0.20 alpha, hover state increasing border opacity to 0.35
 								    - Update action buttons (upload, create, view) to redesigned button variants with mono uppercase labels and tinted-fill backgrounds
 								    - _Requirements: 8.1, 8.2, 8.4_
 								  - [x] 11.2 Update `frontend/src/components/KnowledgeBaseModal.js` styles
 								    - Update modal chrome and form inputs to use design tokens
 								    - Apply `var(--bg-overlay)` overlay, `var(--shadow-modal)` elevation, 12px border-radius
 								    - _Requirements: 9.2_
 								  - [x] 11.3 Update `frontend/src/components/KnowledgeBaseViewer.js` styles
 								    - Update viewer chrome and markdown content area
 								    - Ensure `.markdown-content` rules in App.css are consistent: h1 sky-blue, h2 emerald, h3 amber, code blocks with dark recessed background, blockquotes with sky-blue left border
 								    - _Requirements: 8.3_
 								- [x] 12. Phase 9 — Redesign the Exports Page
 								  - [x] 12.1 Update `frontend/src/components/pages/ExportsPage.js` styles
 								    - Set page header to mono uppercase glow pattern with appropriate identity color
 								    - Update export action cards to Card_Surface treatment with sky-blue borders
 								    - Update buttons to redesigned button variants
 								    - _Requirements: 10.1, 10.2_
 								- [x] 13. Phase 10 — Redesign Shared Components
 								  - [x] 13.1 Update `frontend/src/components/LoginForm.js` styles
 								    - Apply Card_Surface treatment to login form
 								    - Update input fields to `var(--bg-input)` background with sky-blue focus rings
 								    - Update primary button to redesigned variant
 								    - _Requirements: 9.1_
 								  - [x] 13.2 Update `frontend/src/components/CalendarWidget.js` styles
 								    - Apply JetBrains Mono font throughout
 								    - Set sky-blue current-day highlight with 1px border
 								    - Add severity-colored date markers
 								    - Update navigation buttons with sky-blue borders — matching `CalendarMini` in `HomePrimitives.jsx`
 								    - _Requirements: 9.6_
 								  - [x] 13.3 Update `frontend/src/components/UserManagement.js` styles
 								    - Apply group badges using token-based group colors (`--group-admin` red, `--group-standard` sky-blue, `--group-leadership` amber, `--group-readonly` grey) with pill-radius and tinted backgrounds — matching `GroupBadge` in `Primitives.jsx`
 								    - Update table rows and buttons to use design tokens
 								    - _Requirements: 9.3_
 								  - [x] 13.4 Update `frontend/src/components/AuditLog.js` styles
 								    - Apply data-row treatment with `var(--border-subtle)` bottom borders
 								    - Update timestamps and action types to mono font
 								    - Apply hover state with sky-blue background wash
 								    - _Requirements: 9.4_
 								  - [x] 13.5 Update `frontend/src/components/NvdSyncModal.js` styles
 								    - Apply Card_Surface treatment with standard modal elevation
 								    - Update buttons to redesigned variants
 								    - Apply `var(--bg-overlay)` overlay and `var(--shadow-modal)` elevation
 								    - _Requirements: 9.5_
 								- [x] 14. Final checkpoint — Verify all pages and shared components
 								  - Run `npm run build` in `frontend/` to confirm zero errors
 								  - Verify no new console warnings related to styling
 								  - Ensure all tests pass, ask the user if questions arise.
 								  - _Requirements: 11.1, 11.2, 11.3, 11.4, 11.5, 12.1, 12.2, 14.1, 14.2, 14.3, 14.4_
 								## Notes
 								- This is a pure visual redesign. No behavior, routing, state management, or API changes.
 								- No new dependencies are added. Fonts load from Google Fonts CDN only.
 								- Each phase is independently verifiable — run `npm run build` after each to confirm no breakage.
 								- Severity colors are immutable: Critical (#EF4444), High (#F59E0B), Medium (#0EA5E9), Low (#10B981).
 								- All existing CSS custom properties are preserved alongside new tokens for backward compatibility.
 								- UI kit reference files in `docs/design-system-redesign/ui_kits/` are the visual source of truth for each component's target styling.
 								- Property-based testing does not apply to this feature — it is a pure CSS/style migration with no testable pure functions or data transformations.