marwan/HH
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
HH/docs/brand-spec.md
ismail c5f76b3855
Some checks are pending
Build and Push Docker Image / build (push) Waiting to run
Details
updates
2026-05-11 14:45:30 +03:00

3.8 KiB
Raw Blame History

PX360 · Brand Spec — Presentation Theme

Collected: 2026-04-27 Theme: Healthcare Modern — Warm & Approachable Asset completeness: Complete

Core Assets

  • 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)