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.

docs/design-system-redesign/ui_kits/compliance/README.md

@@ -0,0 +1,36 @@
+# Compliance UI Kit
+
+Visual vocabulary for the AEO Compliance view (`CompliancePage.js`).
+
+## Files
+- `index.html` — entry point.
+- `CompPrimitives.jsx` — `CompPageHeader`, `CompButton`, `TeamTabs`, `MetricHealthCard`, `VariantPill`, `StatusRibbon`, `MetricBadge`, `SeenBadge`, `DeviceTable`/`DeviceRow`, `ChartCard`, `DefinitionTooltip`, `RollbackDialog`, `RollbackToast`, `CompIcon`.
+- `CompliancePage.jsx` — full-page assembly.
+- `KitDocs.jsx` — Overview · Tokens · Components · Assemblies · Reference.
+
+## Identity
+| Surface              | Color  | Hex       |
+|----------------------|--------|-----------|
+| Page title + glow    | teal   | `#14B8A6` |
+| Active team tab      | teal   | `#14B8A6` |
+| Upload Report CTA    | teal   | `#14B8A6` |
+| Selected device row  | teal   | `#14B8A6` |
+
+## Status colors (target adherence)
+| Status                  | Color  | Hex       |
+|-------------------------|--------|-----------|
+| Meets/Exceeds Target    | green  | `#10B981` |
+| Within 15% of Target    | amber  | `#F59E0B` |
+| Below 15% of Target     | red    | `#EF4444` |
+
+## Category colors (badge tinting)
+red · Vulnerability Management — amber · Access & MFA — purple · Logging & Monitoring — orange · End-of-Life OS / Endpoint Protection — sky · Application Security — slate · Asset Data Quality / Decommissioned
+
+## Layout
+Page header → team tabs → metric health row → 3×2 chart grid → device table.
+
+## Page-level rules
+1. Status colors are reserved for target adherence; never decorative.
+2. A family's `worstStatus` (lowest-severity variant) drives card border + ribbon — one bad variant turns the whole family red.
+3. Clicking a metric card filters the device table to its IDs; an "× clear filter" button is the only escape hatch shown inline in the section label.
+4. SeenBadge escalates slate (1×) → amber (2–3×) → red (4×+).