27192dd69f
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.
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
- Status colors are reserved for target adherence; never decorative.
- A family's
worstStatus(lowest-severity variant) drives card border + ribbon — one bad variant turns the whole family red. - 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.
- SeenBadge escalates slate (1×) → amber (2–3×) → red (4×+).