HadadaHealth Brand Style Guide

Complete implementation of the HadadaHealth brand system for healthcare practice management. This demo shows all components, interactions, and design patterns as specified in the brand style guide.

Brand Overview

Core Values

  • Clinical accuracy: Evidence-based, clear, editable AI assistance
  • Efficiency: Reduce admin overhead, fast flows
  • Trust & privacy: POPIA compliance, audit trails
  • Collaboration: Multi-disciplinary workflows

Voice & Tone

  • Professional: Clinical, precise, no slang
  • Empathetic: Patient-centered wording
  • Clear: Short sentences, scannable structure
  • Compliant: Avoid absolute medical claims

Target Users

Physiotherapists
Occupational Therapists
Speech-Language Pathologists
Clinical Psychologists
Social Workers

Color System

Primary Palette

Primary (Hadada Green)
#2D6356
Sole brand anchor for CTAs/focus
Secondary (Deep Blue)
#32517A
Links, secondary CTAs, progress

Neutrals

Text
#1F2937
Muted
#6B7280
Borders
#E5E7EB
Surface
#F9FAFB

Destructive Actions

Destructive (Deep Rose)
#96364C
Delete buttons, cancel actions

Typography

UI Typography (System Sans)

Heading 1 - 2.5rem

Heading 2 - 1.75rem

Heading 3 - 1.25rem

Body text - 1rem with 1.6 line height for optimal readability in clinical interfaces.

Muted text for secondary information and metadata.

Print Typography (Serif - Export Only)

Clinical Report Title

Patient: Jane Smith

Date: August 30, 2025

This serif typography is reserved exclusively for PDF export and print previews. It should never be used in the main application interface.

Usage Rule: Serif fonts are only for exported documents and print previews, never in-app UI.

Button System

Primary Button Variants

Button Rules

  • Primary: Main actions (Save, Create, Submit)
  • Secondary: Alternative actions (Cancel, Edit)
  • Tertiary: Text links and minimal actions
  • Danger: Destructive actions (Delete, Remove)

Form Controls

Focus States

All form elements implement the standardized focus ring:

Tab to focus this element - Shows 2px outline in primary color with 2px offset

Clinical Interface Components

person

Sarah Johnson

ID: HH-2025-0847

healingPhysiotherapy
Age: 34
Next Appointment: Sept 2, 2025
Active Treatment Insurance Approved
description
Treatment Note

August 30, 2025 - Dr. M. Patel

warningReview Required

Session Focus: Lower back mobility and core strengthening

Interventions: Manual therapy, therapeutic exercises, patient education on postural awareness.

Progress: Patient reports 40% reduction in pain since initial assessment.

POPIA Compliance: This note contains patient health information and requires secure handling per South African data protection regulations.

Status Indicators

check_circleTreatment Complete pendingAwaiting Approval warningReview Required cancelCancelled

Progress & Navigation

Updated wizard colors per brand style guide: Secondary (#32517A) for active, Primary (#2D6356) for completed steps.

1
2
3
4

Patient Registration → Clinical Assessment → Treatment Planning → Documentation

Implementation Rules

Completed Steps

Use Primary color (#2D6356) to indicate successfully completed workflow steps.

Active Step

Use Secondary color (#32517A) with scale animation to show current active step.

Upcoming Steps

Use neutral border color to show remaining steps in the workflow.

Logo Integration Examples

Clinical Document Header

Treatment Assessment

Patient ID: HH-2025-0847

Uses: Monogram Green.svg - Subtle branding for clinical documents

Email Signature

Hadada Health

Dr. Sarah Johnson

Physiotherapist

Uses: Wordmark Green.svg

Mobile App Icon

HadadaHealth
Size: 512x512px
Format: SVG/PNG
Radius: 20% (iOS style)

Uses: Mobile Icon.svg

Emergency Alert

System Alert

Emergency maintenance required

Uses: Logo Red.svg - Emergency only

Iconography System

Healthcare Icons

medical_services medical_services
healing healing
psychology psychology
accessibility accessibility

Navigation & Actions

dashboard dashboard
person person
event event
description description

Icon Sizes

star 16px - Small
star 20px - Form
star 24px - Default
star 32px - Large

Layout & Component Standards

Border Radius

Single standard: 8px across all components (buttons, cards, inputs)

Shadows

Card shadow: 0 4px 12px rgba(0,0,0,.08)

Modal shadow: 0 8px 24px rgba(0,0,0,.12)

Spacing System

4px grid system:

--space-1: 4px
--space-2: 8px
--space-4: 16px
--space-6: 24px
--space-8: 32px

Loading States

Page Loading (Login Screen)

Full-screen gradient background with logo draw/undraw animation - used for initial app loading and login screens.

Data Loading (Blur Overlay)

Blur overlay with centered logo animation - used for page transitions, saving data, and loading content.

Loading State Rules

Page Loading

  • Full-screen gradient overlay
  • White logo on colored background
  • Draw + undraw animation sequence
  • Used for: Login, app initialization

Data Loading

  • Blur background overlay
  • Logo color adapts to theme
  • Draw + undraw animation (looped)
  • Used for: Saving, API calls, transitions

Theme Adaptation

  • Light mode: Green logo (#2D6356)
  • Dark mode: White logo
  • Maintains brand consistency
  • Ensures proper contrast

Clinical Documentation Modal

This modal demonstrates the exact shadow specification from the brand style guide (0 8px 24px rgba(0,0,0,.12)) and standardized 8px border radius.

Compliance Check: Ensure all clinical documentation follows POPIA guidelines before saving.

HadadaHealth

Loading login screen...

Saving patient data...