# IMC Project Dashboard — Design Brief

Hand this file to Claude (paste it, or attach it) so the dashboard it builds matches the IMC look-and-feel.
It is a **single-screen, read-only portfolio dashboard**: a top bar, a row of KPI numbers, and one projects table.
Build it as **one self-contained HTML file** (inline CSS, no build step, no external frameworks). Light theme only.

---

## 1. Typography
- **Body / UI:** `Plus Jakarta Sans` (weights 400–800), fallback `system-ui, sans-serif`.
- **Numbers, labels, dates, IDs:** `IBM Plex Mono` (weights 400–600).
- Base size **13px**, line-height **1.45**, `-webkit-font-smoothing: antialiased`.
- Micro-labels (KPI captions, table headers, filter labels): **uppercase**, 11px, letter-spacing ~0.06em, in a muted ink.
- Load both from Google Fonts.

## 2. Colour tokens (use these exact hex values)
**Surface & ink**
| Token | Hex | Use |
|---|---|---|
| bg | `#f3f1ec` | page background (warm off-white) |
| card | `#ffffff` | cards, table surface |
| card-2 | `#fbfaf7` | subtle alt rows / hover |
| border | `#e6e1d4` | hairline borders |
| border-strong | `#d4cdb9` | chip / control borders |
| ink | `#1a1d24` | primary text |
| ink-2 | `#4b5163` | secondary text |
| ink-3 | `#8a8f9e` | muted labels |
| ink-4 | `#b4b7c0` | faint / disabled |

**Department badges** — pill, coloured text on a tinted background:
| Dept | Text | Background |
|---|---|---|
| BD (Business Dev) | `#2563eb` | `#eaf1ff` |
| R&D | `#7c3aed` | `#f1ebff` |
| Production | `#c2410c` | `#fdebd9` |
| Int'l Market Dev | `#0f766e` | `#d9f0ed` |

**RAG status pills** — coloured text on a tinted background:
| Status | Text | Background |
|---|---|---|
| Green (on track) | `#15803d` | `#dcf3e1` |
| Amber (at risk) | `#b45309` | `#fdebc9` |
| Red (blocked) | `#b91c1c` | `#fbdcdc` |

## 3. Layout
- Centered frame, **max-width 1440px**, padding ~24–28px.
- **Top bar:** left = a 36px rounded-8px logo tile (background linear-gradient `#1a1d24 → #3a3f4d`, white bold initials "IMC") + brand text (line 1: 14px / weight 700 "IMC"; line 2: 11px / ink-3 "Project Portfolio"). Then a breadcrumb (12px, ink-3, bold last crumb). Push to the right: department **filter chips** — pill `border-radius:999px`, 1px border-strong, white background; the active chip is ink background, white text, with a small coloured dot for its department.
- **KPI strip:** a row of 4 small white cards, each = a big number (mono) + an uppercase micro-label under it.
- **Projects table:** white surface, 1px borders, comfortable row height; header row uses uppercase mono micro-labels; row hover = card-2 background.

## 4. Component rules
- Pills (badges, status, chips) everywhere — never plain coloured text.
- Quiet borders, **no heavy drop shadows**. Flat, calm, "operations console" feel.
- Dates and IDs always in mono.
- Whole thing fits on one screen at 1440px; the table scrolls if needed.

---

## 5. Sample data — 8 IMC projects (use these to build, then swap in real ones)

| ID | Project | Dept | Phase | RAG | Owner | Next milestone | Decision needed |
|---|---|---|---|---|---|---|---|
| P-104 | Collagen Serum — New Product Line A | R&D | Formulation | Amber | Linh Nguyễn | Stability test results (May 25) | — |
| P-098 | Factory Expansion Phase 2 — Bắc Ninh | Production | Construction | Green | Hùng Trần | Equipment delivery wk 23 | — |
| P-117 | Export Market Entry — Singapore | Int'l Market | Registration | Red | Mai Phạm | HSA dossier resubmit (May 30) | Approve dossier rework budget |
| P-122 | Vitamin C OEM (BD → R&D handoff) | BD | Cross-dept handoff | Red | Anh Lê | R&D kick-off — gated (Jun 13) | Escalate R&D capacity to leadership |
| P-089 | Probiotic Capsules — Reformulation | R&D | Pilot batch | Green | Thảo Vũ | Pilot batch on Line 3 (May 28) | — |
| P-131 | Cosmetic Line Rebrand — Skincare | BD | Concept | Amber | Quân Đỗ | Creative agency proposal (May 27) | Choose creative agency |
| P-110 | Halal Certification — UAE Export | Int'l Market | Audit prep | Amber | Hà Nguyễn | Auditor site visit (Jun 10) | — |
| P-125 | Packaging Line Automation | Production | Vendor evaluation | Green | Tuấn Bùi | Vendor decision (Jun 2) | Select automation vendor |

KPI strip from this data: **8 projects · 2 red · 3 amber · 4 decisions needed**.