# Home UI Kit

Visual vocabulary for the CVE Dashboard home view (`currentPage === 'home'` in `frontend/src/App.js`).

## Files
- `index.html` — entry point.
- `HomePrimitives.jsx` — `StatCard`, `HomeCard`, `CardTitle`, `HomeButton`, `SeverityBadge`, `StatusBadge`, `HomeInput`, `HomeSelect`, `FieldLabel`, `ResultBanner`, `BigStat`, `MiniTicket`, `CVERow`, `VendorEntry`, `CalendarMini`, `ArchiveSummary`, `ScrollList`, `EmptyState`, `HomeIcon`.
- `HomePage.jsx` — full-page assembly (`HomePage`).
- `KitDocs.jsx` — browseable docs (Overview · Tokens · Components · Assemblies · Reference).

## Right-rail identity colors
Each right-side panel owns one color, applied consistently to four surfaces:

| Panel             | Color    | Hex       | Used for                                     |
|-------------------|----------|-----------|----------------------------------------------|
| Calendar          | sky      | `#0EA5E9` | left-rail, title glow, today cell, day dots  |
| Open Tickets      | amber    | `#F59E0B` | left-rail, title glow, big stat, mini badges |
| Archer Risk       | purple   | `#8B5CF6` | left-rail, title glow, big stat, mini badges |
| Ivanti Workflows  | teal     | `#0D9488` | left-rail, title glow, big stat, mini badges |

## Layout
- **Top:** 4-up stat strip (sky · neutral · amber · red).
- **Body:** 12-col grid. Left 9 = Quick Lookup → Search/Filter → Results summary → CVE feed. Right 3 = vertical stack of right-rail panels.

## Card chrome (matches Reporting + KB)
```
background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%)
border:     1.5px solid rgba(14,165,233,0.12)   /* 0.35 on hover */
left-rail:  3px solid <identity-color>          /* right-rail panels only */
radius:     8px
```

## Page-level rules
1. Green appears in **one** place: the page title in the chrome (and as the lone primary CTA when present, e.g. "Scan").
2. The four StatCard tones (sky/neutral/amber/red) map to (volume / inventory / attention / urgent). Don't reassign.
3. Severity uses the heavy 2px-border SeverityBadge; ticket statuses use the 1px-border StatusBadge.
4. Right-rail panels always lead with a BigStat. The number IS the headline.