# Telstrahealth Design System

> A high-contrast clinical canvas defined by deep Telstra Blue accents and structured geometric containers.

**Source:** https://telstrahealth.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Telstrahealth utilizes a "monochrome-plus" system where a clinical white background (#ffffff) is punctuated by a primary Telstra Blue (#0064d2). The system relies on heavy typographic hierarchy using the custom **TelstraDisplay** and **TelstraText** families, often set in bold weights for headings. Visual structure is maintained through sharp-edged surfaces and large-radius pill buttons (50px), creating a balance between institutional authority and modern accessibility. Subtle light blue tints (#d8effe, #bee4f9) are used for card borders and section backgrounds to provide soft grouping without breaking the high-contrast aesthetic.

## Signature DNA
1. **The Blue Anchor** (#0064d2 is used consistently for primary CTAs, active text, and key borders across all analyzed pages, establishing a singular brand voltage).
2. **Pill-Form Interactivity** (All primary action buttons utilize a 50px radius, contrasting against the 0px or 8px radius of content containers).
3. **Clinical Grouping** (Use of #d8effe and #bee4f9 for hairlines and soft surfaces to organize complex health data and service categories).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Primary surface, button text | 81 | 1.0 | `--wp--preset--color--white` |
| `{color.black}` | `#000000` | Primary text, footer icons | 122 | 1.0 | `--wp--preset--color--black` |
| `{color.charcoal}` | `#151515` | Secondary text | 18 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#0064d2` | Primary CTA, active links | 89 | 0.8 | computed_style |
| `{color.navy}` | `#001e82` | Deep emphasis text | 65 | 0.8 | computed_style |
| `{color.sky-light}` | `#d8effe` | Card borders, soft backgrounds | 30 | 0.8 | computed_style |
| `{color.sky-medium}` | `#bee4f9` | Section dividers, borders | 12 | 0.8 | computed_style |
| `{color.sky-active}` | `#b2e0fd` | Decorative hover/active surfaces | 8 | 0.6 | decorative_only |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| TelstraDisplay-Bold | 700 | Primary Headings | Helvetica Bold | Proprietary |
| TelstraText-Bold | 700 | Subheadings, CTAs | Inter Bold | Proprietary |
| TelstraText-Regular | 400 | Body copy | Inter Regular | Proprietary |
| Akkurat-Bold | 700 | Hero Display | Roboto Bold | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 44px | normal | normal | 700 | Hero Section | `h2` |
| `{type.h1}` | 32px | 35.2px | normal | 700 | Page Titles | `h1` |
| `{type.h2}` | 32px | 35px | normal | 700 | Section Headers | `h2` |
| `{type.h3}` | 24px | 26.4px | normal | 700 | Card Titles | `h2` |
| `{type.h4}` | 20px | 22px | normal | 700 | Small Headers | `h3` |
| `{type.body}` | 16px | 24px | normal | 400 | Running Text | `section.banner_section` |
| `{type.button}` | 14px | 20.6px | normal | 400 | Pill Buttons | `a.primary_btn` |
| `{type.caption}` | 12px | normal | 0.84px | 400 | Category Tags | `span.category` |

### Principles
1. **Bold-First Hierarchy:** Headings almost exclusively use 700 weight to ensure readability against photographic backgrounds.
2. **Tight Leading on Display:** Large headers (32px+) use a tight 1.1x line-height (35px) to maintain visual density.
3. **Letter Spacing for Utility:** Small captions (12px) utilize expanded tracking (0.84px) for legibility in UI labels.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 4 |
| `{space.sm}` | 12px | 12 |
| `{space.md}` | 16px | 32 |
| `{space.lg}` | 24px | 4 |
| `{space.xl}` | 32px | 14 |
| `{space.section}` | 116px | 16 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Main content surfaces | 178 occurrences |
| `{radius.md}` | 8px | Feature cards | 38 occurrences |
| `{radius.pill}` | 50px | Primary and Secondary CTAs | 53 occurrences |

## Elevation
Not captured in source (System is primarily flat with 1px borders).

## Components
### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and secondary call to action.
**Pages observed:** Home, About.
**Spec:** Background `{color.primary}` (#0064d2) | Text `{color.white}` (#ffffff) | Border 1px `{color.primary}` | Radius `{radius.pill}` (50px) | Padding 13px 15px | Typography `{type.button}` (14px).
**States observed:** Default: Captured | Hover: Not captured.

#### Surface
**Role:** Standard content container.
**Pages observed:** Home, About.
**Spec:** Background `{color.white}` (#ffffff) | Text `{color.black}` (#000000) | Border 1px `{color.sky-medium}` (#bee4f9) | Radius `{radius.sharp}` (0px) | Padding 25px 32px.
**States observed:** Default: Captured.

### Tier 2: Patterns

#### Feature Card
**Role:** Service and solution highlighting.
**Pages observed:** Home.
**Spec:** Background `{color.white}` (#ffffff) | Border 1px `{color.sky-light}` (#d8effe) | Radius `{radius.md}` (8px) | Padding 0px 0px 116px.
**States observed:** Default: Captured.

#### Category Tag
**Role:** Metadata labeling for news and cards.
**Pages observed:** Home.
**Spec:** Typography `{type.caption}` (12px) | Letter-spacing 0.84px | Text `{color.charcoal}` (#151515).
**States observed:** Default: Captured.

### Tier 3: Surface-specific

#### Banner Section
**Role:** Hero and high-impact messaging.
**Pages observed:** Home, About.
**Spec:** Background `{color.white}` (#ffffff) | Typography `{type.body}` (16px) | Padding 25px.
**States observed:** Default: Captured.

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1440px (Desktop) |
| Grid | 12-column (inferred from card 3-up/4-up patterns) |
| Section Gap | 116px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Desktop | 1440px | Standard multi-column layout |
| Mobile | 390px | Single column stack; menu collapses to hamburger |

## Imagery & decoration
The brand uses high-quality photography of healthcare professionals and patients, often overlaid with blue geometric patterns or circular "bubble" motifs. It avoids heavy drop shadows, preferring 1px borders in light blue (#d8effe) to define depth.

## Do's
- Use `{color.primary}` (#0064d2) for all primary user actions.
- Apply `{radius.pill}` (50px) to all interactive buttons.
- Set all main headings in `{type.h1}` or `{type.h2}` using Bold weights (700).
- Use `{color.sky-light}` (#d8effe) for subtle container borders on white backgrounds.
- Maintain high contrast between text (#000000) and canvas (#ffffff).

## Don'ts
- Do not use a radius other than 50px for buttons; avoid sharp corners on CTAs.
- Do not use `{color.navy}` (#001e82) for button backgrounds; it is reserved for text emphasis.
- Do not use drop shadows to define cards; use 1px borders in `{color.sky-light}`.
- **Wrong:** Using a generic blue (#0693e3) for a primary button. **Right:** Use #0064d2. **Reason:** #0693e3 is a WordPress preset, not the Telstrahealth brand primary.

## Similar brands
- Telstra (Parent brand)
- Ramsay Health Care
- Sonic Healthcare
- Healthdirect Australia

## Quick start

### CSS Custom Properties
```css
:root {
  --th-color-primary: #0064d2;
  --th-color-navy: #001e82;
  --th-color-white: #ffffff;
  --th-color-black: #000000;
  --th-color-sky-light: #d8effe;
  --th-radius-pill: 50px;
  --th-font-display: "TelstraDisplay-Bold", sans-serif;
  --th-font-text: "TelstraText-Regular", sans-serif;
}
```

## Agent prompt examples
- "Create a primary CTA button using Telstra Blue #0064d2, white text, and a 50px border radius."
- "Design a content card with a 1px border of #d8effe, white background, and 8px corner radius."
- "Generate a section header using TelstraDisplay-Bold at 32px with a line height of 35px."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Error and Success semantic colors were not present on the analyzed marketing pages.
- The specific mobile breakpoint transition logic (e.g., 768px vs 1024px) was not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://telstrahealth.com | 1440px | 2026-06-06 |
| About Page | https://telstrahealth.com/about | 1440px | 2026-06-06 |