106 lines
3.8 KiB
Markdown
106 lines
3.8 KiB
Markdown
# 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)
|