37 lines
1.8 KiB
Markdown
37 lines
1.8 KiB
Markdown
|
# 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×+).
|