# Perfect LHD Design System — Claude Code Context

**Org:** Perfect Lab Healthcare & Diagnostics (Perfect LHD)
**Purpose:** Central shared design system for all PLHD digital products
**Source of truth:** `DESIGN_POLICY.md` and `tokens.css`

---

## What This Repo Is

This is the single source of truth for all PLHD brand decisions:
- Color palette (brand gold, red, charcoal, surfaces)
- Typography (Arial system stack)
- Spacing system (4px base unit)
- Component patterns (buttons, cards, sidebar, KPI, NABL badge)
- Anti-patterns (what NOT to do)

---

## Projects That Use This Design System

| Project | Path |
|---|---|
| Website (marketing) | `../website/` |
| Webapp (staff ops) | `../webapp/` |
| LIS | `../lis/` |

---

## How to Use These Tokens

### CSS Custom Properties
```css
@import "../../perfect-lhd/design-system/tokens.css";

/* Use tokens directly */
color: var(--plhd-gold);
background: var(--plhd-charcoal);
```

### Tailwind (webapp, website)
The HSL scales in `tokens.css` (HSL format) are mirrored as Tailwind HSL values in each project's `tailwind.config.ts`. Hex values are authoritative.

---

## Making Changes

1. **Read DESIGN_POLICY.md first** — it is the authoritative narrative document
2. **Update tokens.css** — all token values defined here
3. **For Tailwind projects** — update the project's `tailwind.config.ts` HSL scales to match
4. **Run migration scripts** if needed (see `scripts/`)

---

## When Starting a New PLHD Project

Use the bootstrap process:
1. Import `tokens.css` into the new project's `globals.css`
2. Set up Tailwind config using the HSL scales from this system
3. Copy/shadcn UI components from webapp if needed
4. Create the project's AGENTS.md pointing to `../../design-system/DESIGN_POLICY.md`

---

## Design Contacts

- **Owner:** Dr. Gaurav Varma
- **Interior Architect:** Namita Srivastava (building interiors)
- **Brand Assets:** Google Drive `PLHD Website` folder (ID: 1-tUoLPoZbuI3NFDyvZsXsKL0oq5K6UmZ)