# Perfect LHD — Company Design Policy
**Version:** 3.0 | **Date:** 2026-04-25
**Owner:** Dr. Gaurav Varma | **Applies to:** All Perfect LHD digital products
**Source assets:** Google Drive `PLHD Website` folder (ID: 1-tUoLPoZbuI3NFDyvZsXsKL0oq5K6UmZ)
**Local copies:** `website/public/plhd-assets/`

---

## §0. Asset Inventory

| Asset | File | Dimensions | Usage |
|---|---|---|---|
| Primary Logo (gradient) | `plhd-logo-gradient.png` | 1958×1958 | Main logo on light/dark sections |
| Logo (no background) | `plhd-logo-nobg.png` | 2000×2000 | Transparent bg needed |
| Full Name Banner | `plhd-name-banner.png` | 6000×2400 | Header/top of pages |
| WhatsApp Cover | `plhd-whatsapp-cover.png` | 851×315 | Social/share images |

**Brand statement:** "Perfect Lab Healthcare & Diagnostics — An Undertaking of Sparcs Biotech Private Limited"

---

## §1. Brand Essence

**What we stand for:** Precision diagnostics. Trusted results. Established since 1999.

**Personality:** Professional, warm, established, trustworthy. Modern without being cold. Lab-precise.

**Voice:** Clear, confident, patient-first. No jargon on patient-facing pages. Medical precision on staff-facing pages.

**Emotional tone:** Clinical competence with human warmth — not sterile, not flashy.

---

## §2. Logo & Brand Assets

### Asset Locations (public folder)
```
website/public/plhd-assets/
  plhd-logo-gradient.png   — 1958×1958, red cross + gold circle
  plhd-logo-nobg.png      — 2000×2000, transparent
  plhd-name-banner.png     — 6000×2400, full company name
  plhd-whatsapp-cover.png — 851×315, yellow bg, social
```

### Logo Anatomy
The primary logo has two elements:
1. **Red cross** on the left (pharmaceutical/medical cross symbol)
2. **Gold/yellow circle** on the right containing the cross
3. The combination represents: medical precision + warmth/trust

### Logo Usage Rules
- **Short form:** "Perfect LHD" only after full name shown once on the page
- **Dark backgrounds:** Use `plhd-logo-nobg.png` (transparent)
- **Light backgrounds:** Use `plhd-logo-gradient.png`
- **Never:** Stretch, add shadow/blur, recolor, or use old leaf-icon logo
- **Minimum size:** 32×32px for icon-only, full banner scales proportionally
- **Name banner:** Used for page headers and brand reinforcement

---

## §3. Color Palette

All colors verified against brand assets (2026-04-25) using pixel extraction from `plhd-logo-gradient.png`, `plhd-name-banner.png`, and `plhd-whatsapp-cover.png`.

### Brand Primary Colors

| Name | Hex | Verified From | Usage |
|---|---|---|---|
| **Gold** | `#f0d010` | `plhd-logo-gradient.png` (#F0D20F quantized) | Logo circle, brand mark, hero CTAs, active nav highlight |
| **Gold Bright** | `#f0e040` | `plhd-whatsapp-cover.png` | Social covers, highlight fills |
| **Gold Light** | `#fdf4dc` | `plhd-logo-gradient.png` | Notice/pending backgrounds |
| **Gold Hover** | `#d4bc0e` | Derived | Gold hover state |
| **Red** | `#d02010` | `plhd-logo-gradient.png` (#D21E0F quantized) | Logo cross, primary accent, CTAs, links, active states |
| **Red Dark** | `#b01a0c` | Derived | Red hover state |
| **Red Tint** | `rgba(208,32,16,0.12)` | Derived | Subtle red backgrounds |

### Navy (Secondary Brand)

| Name | Hex | Verified From | Usage |
|---|---|---|---|
| **Navy** | `#2d1e78` | `plhd-name-banner.png` | "LAB / HEALTHCARE / DIAGNOSTICS" text in name banner |

### Neutral Palette

| Name | Hex | Usage |
|---|---|---|
| **Black** | `#000000` | Name banner background, logo text |
| **Charcoal** | `#1a1a1a` | UI dark surfaces: navbar, sidebar, hero sections |
| **Charcoal Light** | `#2a2a2a` | Hover states on charcoal surfaces |
| **White** | `#ffffff` | Card backgrounds, text on dark sections |
| **Off White** | `#f5f4ef` | Page background |
| **Border** | `#e8e4dc` | Card borders, dividers |

### Text Colors

| Usage | Hex | Token |
|---|---|---|
| Primary text on light bg | `#1a1a1a` | `--plhd-text-dark` |
| Secondary text | `#4a4a4a` | `--plhd-text-mid` |
| Tertiary text / metadata | `#6a6a6a` | `--plhd-text-muted` |
| Primary text on charcoal/dark | `rgba(255,255,255,0.9)` | `--plhd-text-white` |
| Muted text on dark | `rgba(255,255,255,0.45)` | `--plhd-text-white-muted` |

### Semantic Colors (status only — never primary accent)

| Status | Color | Background | Usage |
|---|---|---|---|
| Success | `#15803d` | `#dcfce7` | QC pass, completed |
| Critical/Fail | `#991b1b` | `#fee2e2` | QC fail, errors |
| Warning | `#854d0e` | `#fdf4dc` | Pending, QC warning |
| Info | `#1e40af` | `#dbeafe` | Processing, informational |

---

## §4. Typography

**Font:** `Arial, Helvetica, sans-serif` (system stack — no Google Fonts dependency)
**Note:** Name banner uses a modified/custom bold sans-serif. System stack is the closest web equivalent.

### Type Scale

| Element | Size | Weight | Line Height | Color |
|---|---|---|---|---|
| H1 (Page title) | 38–48px | 800 (Extra Bold) | 1.1 | `#1a1a1a` or white |
| H2 (Section title) | 24–28px | 800 (Extra Bold) | 1.2 | `#1a1a1a` |
| H3 (Card title) | 16–18px | 700 (Bold) | 1.2 | `#1a1a1a` |
| Body text | 14px | 400 (Regular) | 1.5–1.6 | `#1a1a1a` |
| Small text | 12px | 400/500 | 1.4 | `#4a4a4a` |
| Label / Caption | 11px | 700 | 1.0 | `#4a4a4a` — ALL CAPS, `letter-spacing: 0.06em` |
| Button text | 13px | 700 | 1.0 | white or `#1a1a1a` |

---

## §5. Spacing System

**Base unit:** 4px

| Token | Value | Usage |
|---|---|---|
| `--plhd-space-xs` | 4px | Icon padding, tight gaps |
| `--plhd-space-sm` | 8px | Between related elements |
| `--plhd-space-md` | 12px | Card padding, nav item padding |
| `--plhd-space-lg` | 16px | Section internal padding |
| `--plhd-space-xl` | 20px | Card gap, section padding |
| `--plhd-space-2xl` | 24px | Page section margins |
| `--plhd-space-3xl` | 32px | Mobile section padding |
| `--plhd-space-4xl` | 48px | Desktop section padding |

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

---

## §6. Border Radius

| Element | Radius |
|---|---|
| Buttons | `8px` |
| Inputs | `8px` |
| Cards | `12px` |
| Badges / pills | `9999px` (full round) |
| KPI icons | `10px` |
| Large cards / modals | `16px` |
| Sidebar | `0px` (full-bleed) |

---

## §7. Shadows

**Standard card shadow** — lab precise, NOT floating:
```css
box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
```

**Elevated / modal shadow:**
```css
box-shadow: 0 10px 25px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.06);
```

**No shadow on:** sidebar, hero sections, full-bleed backgrounds.

---

## §8. Component Standards

### Primary Button (Red fill)
```css
background: #d02010;
color: #ffffff;
font-weight: 700;
border-radius: 8px;
padding: 9px 22px;
font-size: 13px;
border: none;
```
Hover: `background: #b01a0c`

### Gold CTA (hero sections only)
```css
background: #f0d010;
color: #1a1a1a;
font-weight: 700;
border-radius: 8px;
padding: 9px 22px;
font-size: 13px;
```
Use sparingly — hero sections, major CTAs only.

### Secondary Button (light surface)
```css
background: transparent;
border: 1px solid #e8e4dc;
color: #1a1a1a;
border-radius: 8px;
```
Hover: `background: #f5f4ef`

### Ghost Button (dark surface)
```css
background: transparent;
border: 1px solid rgba(255,255,255,0.3);
color: rgba(255,255,255,0.9);
```
Hover: `background: rgba(255,255,255,0.06)`

### Sidebar (dark charcoal)
```css
background: #1a1a1a;
color: rgba(255,255,255,0.9);
```
- Nav item default: `rgba(255,255,255,0.45)` muted text
- Nav item hover: `rgba(255,255,255,0.9)` text, `rgba(255,255,255,0.06)` bg
- Nav item active: `rgba(208,32,16,0.15)` bg, `#d02010` text

### KPI Card
- White card, `12px` radius, standard card shadow
- **3px red strip at top** (`#d02010`)

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

### Table
```css
thead th {
  background: #f5f4ef;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a4a4a;
  border-bottom: 1px solid #e8e4dc;
}
tbody tr { border-bottom: 1px solid #f0ede8; }
tbody tr:hover { background: #faf9f6; }
```

---

## §9. Page Structure Patterns

### Marketing / Public Pages (Website)
- **Navbar:** Dark charcoal (`#1a1a1a`) sticky header, PLHD logo + nav links center, CTAs right
- **Hero:** Dark charcoal bg, white headline, red or gold CTA buttons
- **Stats Bar:** Off-white bg with cards
- **Services:** White bg, 3-col grid
- **Alt Sections:** Off-white (`#f5f4ef`) bg for variety sections
- **CTA Section:** Dark charcoal bg, white text, red or gold CTA
- **Footer:** Dark charcoal bg, PLHD logo, links, contact

### Staff App / Dashboard Pages
- **Sidebar:** Fixed left, charcoal (`#1a1a1a`), PLHD logo at top, nav sections grouped, NABL badge
- **Topbar:** White, sticky, page title + breadcrumb + user avatar + notifications
- **Content:** Off-white (`#f5f4ef`) page bg, white cards
- **Tables:** White card container, off-white header strip
- **No hero** — dashboards start directly with KPI row

---

## §10. Logo Usage Checklist

- [ ] Navbar: PLHD logo gradient file (`plhd-logo-gradient.png`) left-aligned
- [ ] Footer: PLHD logo + "Perfect Lab Healthcare & Diagnostics" + "Since 1999"
- [ ] Favicon: Red cross on yellow/gold background (from logo)
- [ ] Dashboard sidebar: PLHD logo at top
- [ ] Login pages: PLHD logo centered at top
- [ ] OG/share image: `plhd-whatsapp-cover.png` or equivalent branded image
- [ ] Never use the old leaf-icon logo

---

## §11. Anti-Patterns (Never Do)

- ❌ Green as primary accent (keep for semantic/status only)
- ❌ Blue as primary accent (too generic/corporate)
- ❌ Navy (#2d1e78) used without brand context — it's a secondary brand color
- ❌ Rounded corners > 16px (except pill badges)
- ❌ Heavy shadows (lab = precise, not floating)
- ❌ Emoji as primary iconography (use SVG icons)
- ❌ Gradient backgrounds on large areas
- ❌ "Lorem ipsum" — always use realistic content
- ❌ Mixing border styles — keep borders subtle and consistent
- ❌ Using old leaf-icon logo

---

## §12. NABL Branding Requirement

Every page that references lab quality must include the NABL badge (see §8 for styling).

---

## Version History

| Version | Date | Changes |
|---|---|---|
| v1.0 | 2026-04-19 | Initial policy — Gold + Charcoal |
| v2.0 | 2026-04-20 | Updated with verified brand assets — Red (#d02010) + Gold (#f0d010) + Charcoal palette |
| v3.0 | 2026-04-25 | Full extraction from brand assets. Added Navy (#2d1e78), 3-tier token system, pure black vs charcoal distinction, Tier 3 component tokens. Verified all colors against pixel data. |