Brand

The HealthMetrics company brand — wordmark and palette, mapped onto the design-system tokens. Use these consistently so every product reads as one brand.

Logo

Four lockups. Use color on light surfaces, onDark on the navy surface, ink for single-tone dark-on-light, and mono where the mark must inherit the current colour.

Brand palette

The source-of-truth HMS colours behind the semantic tokens.

--brand-primary · #127289

Deep teal — primary brand

--brand-cyan · #059bb6

Marketing cyan

--brand-stream · #22bfd3

AI / Stream — light cyan

--brand-coral · #f15e60

Accent — the heartbeat

--brand-navy · #0f323d

AI / dark surface

--brand-cream-100 · #fcfcf7

Off-white canvas

Gradients

The three brand gradients from the brand guideline. Decorative and hero surfaces only — they never flip in dark mode.

Primary

--gradient-primary · #12636D → #22BFD3

Cyan → Cream

--gradient-cyan-cream · #22BFD3 → #E5DFCE

Deep

--gradient-deep · #0F323D → #306165

Brand expression

The gradient in use: the brand CTA and a feature card, per the brand guideline.

Faster claims, happier members

Cashless outpatient across GP, dental, optical and specialist panels.

View report

Reserve gradients for hero moments

White text dips below AA contrast near the cyan end of the primary gradient, so the gradient button is for one marketing CTA per view — never dense product UI. Body text never sits directly on a gradient.

Usage rules

Two rules keep the brand accessible and on-message.

Coral is an accent, never a control

The coral heartbeat is for the logo, highlights and data-visualisation moments. It is not the destructive colour and not the primary call-to-action — the functional --destructive is a separate AA-tuned red.

The AI palette is reserved

Stream cyan (#22bfd3) and the Dark-Surface navy (#0f323d) are reserved for AI features and dark surfaces. Do not use them decoratively elsewhere.

Typography

Inter across the interface; Material Symbols Rounded for icons.

Heading — Inter 700

Subheading — Inter 600

Body — Inter 400. Outpatient benefits overview.

Caption — muted 12px.

Full token reference (surfaces, status, charts, elevation) lives in Storybook → Foundations → Design Tokens.