# AGNET Dashboard — Design System Master

> **Authority:** `specs/UI_UX_LIBRARY_PLAN.md` §4 **overrides** any auto-generated tokens.
> **Supersedes:** gold/purple fintech palette from legacy auto-generation.

> **LOGIC:** When building a specific dashboard page, first check `design-system/agnet-dashboard/pages/[page-name].md`.
> If that file exists, its rules **override** this Master file.

**Project:** AGNET Dashboard  
**Version:** 1.0.0  
**Reference mockups:** `public/agnet-assets/agnet-identity-dashboard.png`, `agnet-finance-dashboard.png`, `agnet-inputs-dashboard.png`

---

## Global Rules

### Color Palette

| Token | Hex | CSS Variable | Usage |
|-------|-----|--------------|-------|
| Sidebar | `#004D40` | `--sidebar-bg` | Left nav rail |
| Sidebar deep | `#003328` | `--sidebar-bg-deep` | Sidebar hover/active |
| Brand green | `#08733a` | `--brand-green` | Headings, primary actions (maps to `--green-deep`) |
| Success green | `#22C55E` | `--success-green` | Verified badges, chart bars, checkmarks |
| Success background | `#ECFDF5` | `--success-bg` | Success banners (eKYC verified, Compliant) |
| Page background | `#F5F7F2` | `--page-bg` | Main workspace background |
| Surface | `#FFFFFF` | `--surface` | Card backgrounds |
| Ink | `#102018` | `--ink` | Primary text |
| Muted | `#66766E` | `--muted` | Secondary labels |
| Warning amber | `#F59E0B` | `--warning-amber` | Equipment KPI, pending SLA |
| Border | `rgba(32, 96, 70, 0.12)` | `--border` | Card borders |

### Typography

| Role | Font | Weight | Size |
|------|------|--------|------|
| App title | Onest | 600–700 | 24–28px |
| Card title | Onest | 600 | 16–18px |
| Body | Inter | 400–500 | 14–16px |
| KPI value | Onest | 700 | 28–32px |
| Badge | Inter | 500 | 12px |

Keep existing Geist/Onest/Inter stack from `app/layout.tsx` — no font migration in v1.

### Spacing & Shape

| Token | Value | CSS Variable | Notes |
|-------|-------|--------------|-------|
| Card radius | `12px` | `--radius-card` | Dashboard cards (not marketing 28px) |
| Pill radius | `9999px` | `--radius-pill` | Badges, nav pills |
| Card shadow | `0 1px 3px rgba(0,0,0,0.08)` | `--shadow-card` | Subtle elevation |
| Grid gap (tight) | `16px` | — | 4-col KPI row |
| Grid gap (wide) | `24px` | — | 3-col detail row |

### Component Specs

#### Card

```css
.dashboard-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px 20px;
}
```

#### Badge

- Pill shape (`--radius-pill`)
- Success: `--success-green` on `--success-bg`
- Warning: `--warning-amber` on amber-50
- Always pair color with icon + text (verification-first)

#### Interactive elements

- Minimum touch target: **44×44px**
- Focus: `ring-2 ring-green-deep ring-offset-2`
- `cursor: pointer` on all clickable elements
- Transitions: 150–300ms; respect `prefers-reduced-motion`

---

## Layout

| Zone | Behavior |
|------|----------|
| Sidebar | Fixed 64–72px green rail; icon nav |
| Header | Module title + subtitle; optional verified pill |
| Main | Scrollable workspace on `--page-bg` |

---

## Anti-Patterns (Do NOT Use)

- ❌ Gold/purple fintech palette from `agnet-global` auto-generation
- ❌ Emojis as icons — Lucide SVG only
- ❌ Color-only verification signals
- ❌ Missing `cursor:pointer` on interactive elements
- ❌ Invisible focus states
- ❌ Layout-shifting hover scales
- ❌ Instant state changes without transitions

---

## Pre-Delivery Checklist

- [ ] Tokens from §4 (not legacy MASTER)
- [ ] Lucide icons only
- [ ] 44×44px touch targets on interactive controls
- [ ] Focus rings visible (`ring-green-deep`)
- [ ] `prefers-reduced-motion` respected
- [ ] 4.5:1 text contrast minimum
- [ ] Responsive: 375px, 768px, 1024px, 1280px+