# PX360 · Brand Spec — Presentation Theme
> Collected: 2026-04-27
> Theme: Healthcare Modern — Warm & Approachable
> Asset completeness: Complete

## Core Assets

### Logo
- Primary horizontal: `static/img/HH_R_H_Logo.png` (used in app sidebar)
- Icon only: `static/img/HH_R_ICON.png` (used in collapsed sidebar)
- Patient-facing horizontal: `static/img/HH_P_H_Logo.png`
- Patient-facing vertical: `static/img/HH_P_V_Logo.png`
- Patient-facing icon: `static/img/HH_P_ICON.png`
- Legacy logo: `static/img/hh-logo.png` (used in public pages, login, PDFs)
- Footer email URL: `http://127.0.0.1:8000/static/img/HH_R_H_Logo.png`

### Logo Usage in Slides
| Slide Type | Logo File | Placement | Size |
|---|---|---|---|
| Cover | `HH_P_V_Logo.png` | Top center, prominent | h-16 |
| Section Divider | `HH_R_ICON.png` | Top-right corner | h-8 |
| KPI/Chart/Table | `HH_R_H_Logo.png` | Bottom-right footer | h-6, opacity 0.4 |
| Two-Column/Content | `HH_R_ICON.png` | Bottom-right corner | h-6 |
| Quote/Callout | `HH_R_ICON.png` | Bottom-left | h-6 |
| Closing | `HH_P_V_Logo.png` | Center, hero | h-20 |

## Color Palette

### Primary
- Navy: `#005696` — headings, active states, primary buttons, sidebar
- Blue: `#007bbd` — secondary, gradients, hover states
- Teal Accent: `#0EA5E9` — fresh, modern healthcare accent (new for presentations)
- Light Background: `#eef6fb` — hover states, soft panels

### Warm Accents (Healthcare Modern)
- Warm Teal: `#14B8A6` — success/positive indicators
- Soft Amber: `#F59E0B` — warnings, highlights
- Warm Coral: `#FB7185` — critical alerts, emphasis
- Soft Sage: `#86EFAC` — positive trends

### Neutrals
- Ink: `#1e293b` — primary text
- Body: `#334155` — body text
- Muted: `#64748b` — labels, metadata
- Light Muted: `#94a3b8` — placeholders, disabled
- Border: `#e2e8f0` — borders, dividers
- Surface: `#f8fafc` — card backgrounds
- Background: `#f1f5f9` — page background
- White: `#ffffff` — cards, content areas

### Slide-Specific Colors
- Cover gradient: `linear-gradient(135deg, #005696 0%, #007bbd 50%, #0EA5E9 100%)`
- Section divider gradient: `linear-gradient(135deg, #005696 0%, #0EA5E9 100%)`
- Warm overlay: `linear-gradient(135deg, #f0f7ff 0%, #eef6fb 50%, #f0fdfa 100%)`
- KPI card accent bar: `linear-gradient(to right, #005696, #0EA5E9)`
- Chart palette: `['#005696', '#0EA5E9', '#14B8A6', '#F59E0B', '#FB7185', '#8B5CF6']`

## Typography

- Display/Heading: Inter 700-900
- Body: Inter 400-500
- Caption: Inter 300-400
- Mono (data): 'Inter', tabular-nums

### Slide Type Scale
- Hero title: 64-80px, weight 800
- Slide title: 40-56px, weight 700
- Subtitle: 24-32px, weight 500
- Body: 18-22px, weight 400
- Caption: 14-16px, weight 400
- KPI number: 48-72px, weight 800
- Data label: 12-14px, weight 600, uppercase, tracking-wide

## Icon System
- Lucide Icons (via `data-lucide` attributes)
- Initialized with `lucide.createIcons()`

## Chart System
- ApexCharts v5.10.6
- fontFamily: 'Inter, sans-serif'
- Color palette matches brand spec

## Design Language
- Enterprise healthcare admin dashboard (Patient Experience Management)
- Card-based layouts with generous spacing
- Rounded corners: rounded-2xl (cards), rounded-xl (buttons), rounded-full (badges)
- Shadows: shadow-sm (cards), shadow-lg (hover), shadow-2xl (modals)
- RTL/LTR bilingual support (English + Arabic)
- Responsive design

## Decorative Elements (Healthcare Modern)
- Organic wave SVGs (soft, flowing curves)
- Subtle blob/circle decorations (low opacity background elements)
- Gradient accent bars on cards
- No harsh geometric patterns — soft, approachable feel
- `text-wrap: pretty` for body text
- CSS Grid for precise slide layouts

## Forbidden
- Purple gradients (AI slop)
- Emoji as icons
- SVG-drawn people/faces
- Overly saturated neon colors
- Generic tech-looking aesthetics
- Inter/Roboto as only identity (use weight variation for character)