---
name: perfect-lhd-design-system
description: Design tokens and brand guidelines for Perfect LHD (Perfect Lab Healthcare & Diagnostics). Auto-loaded when working on any perfect-lhd project. Do not invent colors/fonts outside this system.
tags: [design, brand, perfect-lhd, css, tokens]
last_reviewed: 2026-04-25
org: Perfect LHD (Perfect Lab Healthcare & Diagnostics)
projects: [perfect-lhd/website, perfect-lhd/webapp, perfect-lhd/lis]
---

# Perfect LHD — Design System Skill

## Source of Truth

- **Design Policy:** `/home/leo/projects/perfect-lhd/design-system/DESIGN_POLICY.md`
- **Tokens (CSS):** `/home/leo/projects/perfect-lhd/design-system/tokens.css`
- **Assets:** `website/public/plhd-assets/` (logo, banner, covers)

**Rule:** Never invent colors, fonts, spacing, or component styles outside what is defined in these files.

---

## Brand Colors (hex — verified from pixel extraction 2026-04-25)

| Token | Hex | Usage |
|---|---|---|
| `--plhd-gold` | `#f0d010` | **PRIMARY** — logo circle, brand mark, hero CTAs |
| `--plhd-gold-bright` | `#f0e040` | WhatsApp/social covers |
| `--plhd-gold-light` | `#fdf4dc` | Notice/pending backgrounds |
| `--plhd-gold-hover` | `#d4bc0e` | Gold hover |
| `--plhd-red` | `#d02010` | **PRIMARY ACCENT** — logo cross, CTAs, links, active states |
| `--plhd-red-dark` | `#b01a0c` | Red hover |
| `--plhd-red-tint` | `rgba(208,32,16,0.12)` | Subtle red backgrounds |
| `--plhd-navy` | `#2d1e78` | Secondary brand — "LAB/HEALTHCARE/DIAGNOSTICS" text |
| `--plhd-black` | `#000000` | Name banner bg (NOT charcoal) |
| `--plhd-charcoal` | `#1a1a1a` | UI dark surfaces — sidebar, navbar, hero |
| `--plhd-charcoal-light` | `#2a2a2a` | Hover states on charcoal |
| `--plhd-white` | `#ffffff` | Card backgrounds |
| `--plhd-off-white` | `#f5f4ef` | Page background |
| `--plhd-border` | `#e8e4dc` | Card borders, dividers |

**Text on light bg:** `#1a1a1a` primary, `#4a4a4a` secondary, `#6a6a6a` muted
**Text on charcoal:** `rgba(255,255,255,0.9)` primary, `rgba(255,255,255,0.45)` muted
**Text in navy:** `#2d1e78` (on light backgrounds)

**Semantic (status only — NEVER primary accent):**
- Success: `#15803d` / `#dcfce7` bg
- Critical: `#991b1b` / `#fee2e2` bg
- Warning: `#854d0e` / `#fdf4dc` bg
- Info: `#1e40af` / `#dbeafe` bg

---

## Typography

- **Font:** `Arial, Helvetica, sans-serif` (system stack — no Google Fonts)
- **Mono:** `'JetBrains Mono', 'Courier New', monospace`

| Element | Size | Weight | Leading |
|---|---|---|---|
| H1 | 38–48px | 800 | 1.1 |
| H2 | 24–28px | 800 | 1.2 |
| H3 | 16–18px | 700 | 1.2 |
| Body | 14px | 400 | 1.5–1.6 |
| Small | 12px | 400/500 | 1.4 |
| Label | 11px | 700 | 1.0 — ALL CAPS, `letter-spacing: 0.06em` |

---

## Spacing (4px base)

| Token | Value | Token | Value |
|---|---|---|---|
| `--plhd-space-xs` | 4px | `--plhd-space-2xl` | 24px |
| `--plhd-space-sm` | 8px | `--plhd-space-3xl` | 32px |
| `--plhd-space-md` | 12px | `--plhd-space-4xl` | 48px |
| `--plhd-space-lg` | 16px | | |
| `--plhd-space-xl` | 20px | | |

**Card padding:** 20px horizontal, 18px vertical
**Section padding:** 48px desktop, 32px mobile

---

## Border Radius

| Token | Value | Element |
|---|---|---|
| `--plhd-radius-sm` | 4px | Small elements |
| `--plhd-radius` | 8px | Buttons, inputs |
| `--plhd-radius-md` | 10px | KPI icons |
| `--plhd-radius-lg` | 12px | Cards |
| `--plhd-radius-xl` | 16px | Large cards, modals |
| `--plhd-radius-pill` | 9999px | Badges, pills |
| `--plhd-radius` | 0px | Sidebar (full-bleed) |

---

## Shadows

**Card:** `0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)`
**Modal:** `0 10px 25px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.06)`
**No shadow:** sidebar, hero sections, full-bleed backgrounds

---

## Component Quick Reference

### Buttons
```css
/* Red primary */
background: var(--plhd-btn-primary-bg);   /* #d02010 */
color: white; padding: 9px 22px; border-radius: 8px; font-size: 13px; font-weight: 700;

/* Gold CTA — hero only */
background: var(--plhd-btn-gold-bg);      /* #f0d010 */
color: var(--plhd-text-dark); padding: 9px 22px; border-radius: 8px;

/* Secondary — light */
border: 1px solid var(--plhd-border-color); color: var(--plhd-text-dark);

/* Ghost — dark */
border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.9);
```

### Sidebar
```css
background: var(--plhd-charcoal);         /* #1a1a1a */
.nav-item { color: var(--plhd-sidebar-muted); }  /* rgba(255,255,255,0.45) */
.nav-item:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.06); }
.nav-item.active { background: rgba(208,32,16,0.15); color: var(--plhd-red); }
```

### KPI Card
```css
background: var(--plhd-white); border-radius: 12px; box-shadow: card;
border-top: 3px solid var(--plhd-red);   /* 3px red strip at top */
```

### NABL Badge
```css
background: var(--plhd-badge-nabl-bg);    /* rgba(208,32,16,0.1) */
color: var(--plhd-badge-nabl-text);       /* #991b1b */
padding: 3px 12px; border-radius: 9999px; font-size: 11px;
letter-spacing: 0.06em; text-transform: uppercase;
border: 1px solid var(--plhd-badge-nabl-border);  /* rgba(208,32,16,0.25) */
```

---

## Anti-Patterns (Never Do)

- ❌ Green as primary accent (semantic/status only)
- ❌ Blue as primary accent
- ❌ Navy (`#2d1e78`) outside brand context
- ❌ Rounded corners > 16px (except pill badges)
- ❌ Heavy shadows (lab = precise)
- ❌ Emoji in nav (use SVG icons)
- ❌ Gradient backgrounds on large areas
- ❌ Old leaf-icon logo
- ❌ Hardcoded hex colors — always use CSS variables

---

## 3-Tier Token Architecture

```
TIER 1: Raw Brand Tokens (never use directly in components)
  --plhd-gold:     #f0d010
  --plhd-red:      #d02010

TIER 2: Semantic Tokens (use in component CSS)
  --plhd-color-primary:   var(--plhd-gold)
  --plhd-color-accent:   var(--plhd-red)

TIER 3: Component Tokens (for specific components)
  --plhd-btn-primary-bg: var(--plhd-color-accent)
```

---

## Projects Using This Design System

| Project | Path | Stack |
|---|---|---|
| Website | `/home/leo/projects/perfect-lhd/website/` | Next.js 15, Tailwind |
| Webapp | `/home/leo/projects/perfect-lhd/webapp/` | Next.js 15, Tailwind, shadcn/ui |
| LIS | `/home/leo/projects/perfect-lhd/lis/` | Next.js 15, Tailwind |

---

## Color Extraction Tool

To re-run color extraction on brand assets:
```bash
python3 /home/leo/projects/perfect-lhd/design-system/scripts/extract-colors.py \
  website/public/plhd-assets/plhd-logo-gradient.png \
  website/public/plhd-assets/plhd-whatsapp-cover.png \
  12
```