# Healthbridge.co.za Design System

> A clean, clinical canvas energized by geometric primary-color accents and soft-radius information blocks.

**Source:** https://healthbridge.co.za | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Healthbridge utilizes a high-contrast monochrome foundation (#ffffff canvas with #000000 and #333333 ink) to maintain a professional medical atmosphere. The system is punctuated by a vibrant secondary palette of purple (#7757ec), mint (#75eb9e), and orange (#f7941d), used primarily for iconography and decorative geometric motifs. Layouts rely on the Figtree typeface, utilizing semi-bold weights (600) for large display headers and regular weights (400) for legible body copy. Information is organized into distinct cards with soft radii (15px to 21px), often set against subtle tinted backgrounds to create a clear content hierarchy without heavy shadows.

## Signature DNA
1. **Geometric Color Blocking** (The use of overlapping circles and semi-circles in #7757ec, #75eb9e, and #f7941d as a hero graphic motif to humanize the clinical data focus).
2. **Soft-Radius Content Containers** (Information is consistently grouped in containers with 15px-21px radii, softening the high-contrast typography).
3. **Figtree Display Hierarchy** (Large 60px+ headers in Figtree 600 provide a modern, accessible entry point to dense medical software descriptions).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, primary button text, card surfaces | 19 | 1.0 | `--wp--preset--color--white` |
| `{color.black}` | `#000000` | Primary text, button backgrounds, logo | 5 | 1.0 | `--wp--preset--color--black` |
| `{color.ink.dark}` | `#333333` | Secondary text, borders, button text | 67 | 0.8 | Computed style |
| `{color.ink.medium}` | `#1c1c1d` | Body text, subtle borders | 50 | 0.8 | Computed style |
| `{color.canvas.muted}` | `#f3f5f8` | Section backgrounds, secondary text | 28 | 0.8 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.purple}` | `#7757ec` | Decorative icons, text accents | 41 | 0.8 | Computed style |
| `{color.accent.mint}` | `#75eb9e` | Decorative motifs, surface backgrounds | 29 | 0.8 | Computed style |
| `{color.accent.orange}` | `#f7941d` | CTA highlights, text accents | 18 | 0.8 | Computed style |
| `{color.accent.purple.light}` | `#ccc4ec` | Feature card backgrounds | 4 | 0.6 | Computed style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Figtree | 400, 500, 600, 700 | All headers, body, and UI | Figtree (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.xl}` | 65px | 78px | normal | 600 | Hero display headers | `h2.elementor-heading-title` |
| `{type.display.lg}` | 60px | 72px | normal | 600 | Section headers | `h2.elementor-heading-title` |
| `{type.heading.sm}` | 24px | 62px | normal | 400 | Navigation controls | `button.owl-prev` |
| `{type.heading.xs}` | 22px | 26.4px | normal | 600 | Card titles | `h4.elementor-image-box-title` |
| `{type.body.lg}` | 16px | 25.6px | normal | 400 | Primary body copy | `p.elementor-image-box-description` |
| `{type.body.bold}` | 16px | 25.6px | normal | 700 | Emphasis in prose | `strong` |
| `{type.body.md}` | 16px | 24px | normal | 400 | UI labels, arrows | `sr7-arrow` |
| `{type.body.sm}` | 14px | 21px | normal | 400 | Carousel/Footer text | `div.ue-item` |

### Principles
1. **Generous Leading:** Body text maintains a 1.6x line-height (25.6px for 16px font) to ensure readability of technical medical content.
2. **Semi-Bold Hierarchy:** Display titles never exceed weight 600, maintaining a friendly rather than aggressive authority.
3. **Achromatic Text:** All functional text is kept to #000000, #1c1c1d, or #333333; color is reserved for decoration and specific highlights.

## Spacing
**Base unit:** Custom (Variable)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 4 |
| `{space.sm}` | 15px | 3 |
| `{space.md}` | 30px | 20 |
| `{space.lg}` | 48px | 4 |
| `{space.section}` | 114px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default sections, sharp surfaces | 177 occurrences |
| `{radius.md}` | 15px | Standard content cards | `Card` component |
| `{radius.lg}` | 21px | Feature panels, dark cards | `Card` component |
| `{radius.pill}` | 50px | Large buttons, decorative pills | 7 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | All cards and surfaces | `shadow: none` across all components |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary page actions and navigation triggers.
**Pages observed:** https://healthbridge.co.za
**Spec:** Background: #ffffff / Text: #000000 / Border: #000000 (0px) / Radius: 22px / Typography: Figtree 24px (400)
**States observed:** Default: captured | Hover: not captured

#### Surface
**Role:** Structural dividers and horizontal rules.
**Pages observed:** https://healthbridge.co.za
**Spec:** Background: transparent / Border: #333333 (1px) / Radius: 0px / Padding: 30px 0px 0px
**States observed:** Default: captured

### Tier 2: Patterns

#### Card (Standard)
**Role:** Service and solution overviews.
**Pages observed:** https://healthbridge.co.za
**Spec:** Background: #ffffff / Text: #333333 / Radius: 15px / Typography: Figtree 16px
**States observed:** Default: captured

#### Card (Feature)
**Role:** Highlighting specific value propositions (e.g., "Unrestricted access").
**Pages observed:** https://healthbridge.co.za
**Spec:** Background: #ccc4ec / Text: #333333 / Radius: 20px / Padding: 36px 48px
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Dark Panel Card
**Role:** Specialized content blocks (e.g., "Specialities" section).
**Pages observed:** https://healthbridge.co.za
**Spec:** Background: #4b4b4c / Text: #333333 / Radius: 21px / Typography: Figtree 14px
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1140px (implied by section padding) |
| Section Gap | 114px |
| Card Grid | 3-up (Solutions), 4-up (Value props) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Desktop | 1440px | Full horizontal navigation, multi-column grids |
| Mobile | 390px | Stacked cards, hamburger menu, reduced display type |

## Imagery & decoration
- **Geometric Abstraction:** Overlapping circles, semi-circles, and quarter-circles in brand colors.
- **Photography:** High-quality medical/professional imagery (stethoscopes, doctors, laptops) often placed within rounded containers.
- **Avoidance:** No drop shadows, no gradients on UI elements (only on decorative graphics).

## Do's
- Use **Figtree 600** for all primary section headers.
- Apply **21px radius** to cards sitting on dark or tinted backgrounds.
- Maintain **#ffffff** as the primary canvas color for clinical clarity.
- Use **#7757ec** (purple) as the lead decorative accent color.
- Ensure body copy has at least **25.6px line-height** for accessibility.

## Don'ts
- **Don't use drop shadows**; depth is achieved through color-blocking and borders.
- **Don't use saturated colors for text**; keep copy in the #000000 - #333333 range.
- **Don't mix radii** within a single grid; use either 15px or 21px consistently.
- **Wrong:** Using #7757ec as a primary button background. **Right:** Use #000000 or #ffffff. **Reason:** The brand maintains a monochrome functional layer with color reserved for decoration.

## Similar brands
- Oscar Health
- Zocdoc
- Headspace (geometric motifs)
- Modern Health

## Quick start

### CSS Custom Properties
```css
:root {
  --hb-color-black: #000000;
  --hb-color-white: #ffffff;
  --hb-color-ink-dark: #333333;
  --hb-color-purple: #7757ec;
  --hb-color-mint: #75eb9e;
  --hb-color-orange: #f7941d;
  --hb-radius-card: 15px;
  --hb-radius-panel: 21px;
  --hb-font-main: 'Figtree', sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #000000;
  --color-accent-purple: #7757ec;
  --color-accent-mint: #75eb9e;
  --font-figtree: "Figtree";
  --radius-hb-card: 15px;
  --radius-hb-panel: 21px;
}
```

## Known gaps
- **Hover States:** Interactive states for buttons and cards were not explicitly captured in the static evidence.
- **Shadow Tokens:** Although shadows are declared in CSS variables (`--wp--preset--shadow--natural`), they are not applied to observed components in the current viewport.
- **Sub-brand logic:** No sub-brands were detected; the system currently operates as a single-brand monochrome parent.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://healthbridge.co.za | 1440x900 | 2026-06-06 |