MembersHealth Design System

Color Palette

A rich brand blue complemented by deep navy, neutrals, and semantic feedback colors. Click any swatch to copy its hex code.

Brand Core

The foundational colors from the MembersHealth brand guide.

Extended Palette

Accents from the website visual identity for richer interfaces.

Neutrals

Greys for text hierarchy, borders, and subdued surfaces.

Semantic / Feedback

Status colors for alerts, validation, and messaging.

Typography

Work Sans for body copy, Libre Caslon Text for editorial hero headlines, and Lato for navigation. Light weights create an airy, approachable feel.

H1Work Sans Light(44px / 52px line-height / weight 300)

Proactive Care. Better Outcomes.

H2Work Sans Light(38px / 46px line-height / weight 300)

Trusted by leading organizations

H3Work Sans Light(30px / 38px line-height / weight 300)

Total Wellness

H4Work Sans Light(24px / 32px line-height / weight 300)

Organizational Wellness

H5Work Sans Regular(18px / 28px line-height / weight 400)

Care that lasts

H6Work Sans Regular(16px / 26px line-height / weight 400)

Follow-up within 24-48 hours

Hero TaglineLibre Caslon Text(38px / 52px line-height / serif)

Until "I'm okay" is true.

BodyWork Sans Regular(16px / 24px line-height / weight 400)

Members Health Inc. is a Canadian, physician-led wellness platform. We exist to close the gap between the moment someone asks for help and the moment they actually get better.

NavigationLato Medium(12px / 20px line-height / uppercase / weight 500)

About Services Contact Resources

Button LabelWork Sans Medium(12-14px / uppercase / weight 500)

BOOK APPOINTMENT

Buttons

Primary buttons use the dark navy (#0E1630) with white text. Secondary buttons invert the palette. All use uppercase text and a 0.5rem border radius.

Primary

Secondary

Outline

Ghost & Link

Brand Accent

Custom brand-colored buttons for specific use cases.

Cards

Card surfaces use white or #F9FAFB backgrounds with subtle borders. Cards should feel clean and spacious, reflecting the airy brand aesthetic.

Accountable Care

Care does not end when the appointment is over. Every member builds a longitudinal profile so no one ever starts from scratch.

24/7/365 Access

Nationwide virtual care across Canada. We call back. We remember. We stay.

97%+ Retention

Client retention rate that speaks to the trust our partners place in proactive care infrastructure.

ProvenTrusted

Signature by Members Health

Proactive care infrastructure. Not a product enhancement — the system-level proof that we call back, we remember, we stay.

The Story That Started It All

"You know, I worked hard my whole life. I paid my taxes. I was never sick. And I feel like the health system doesn't care about me at all—and I need them now."

— Jean, whose story inspired the founding of Members Health

This is not a corporate origin story. This is the reason we exist. Every protocol, every follow-up call, every care plan we build traces back to this conviction.

Form Elements

Inputs, selects, and form controls styled with the brand border (#EAECF0) and blue focus ring (#2CABE2).

Member Contact Form

Full Name

Email Address

Service

Message

I understand my information is strictly confidential and will never be shared with an employer.

Toggles & Switches

Enable follow-up reminders

SMS notifications

Weekly care digest

Badges & Labels

DefaultSecondaryOutlineInfoActivePendingUrgentSignatureDiscovery+

Input States

Default

Disabled

Error StateThis field is required.

Spacing, Radius & Shadows

Consistent spacing and rounded corners create the approachable, clinical-yet-warm aesthetic of MembersHealth.

Spacing Scale

0.5

2px

1

4px

2

8px

3

12px

4

16px

6

24px

8

32px

10

40px

12

48px

16

64px

20

80px

24

96px

Border Radius

smcalc(0.5rem - 4px)

mdcalc(0.5rem - 2px)

lg0.5rem

xlcalc(0.5rem + 4px)

full9999px

Shadows

shadow-xs

shadow-sm

shadow

shadow-md

shadow-lg

Iconography

Icons use the Lucide icon library. Icon backgrounds use the pastel purple (#F4EBFF) and icons themselves use the darker purple (#7F56D9) or brand blue (#2CABE2).

Brand Logo

Two logo variants: the full-colour version for light backgrounds and the white version for dark or photographic backgrounds. Always maintain clear space equal to the height of the “m” mark around the logo.

Full ColourUse on white or light (#F9FAFB) backgrounds

WhiteUse on dark navy (#0E1630) or photographic backgrounds

Icon Library

Heart

Shield

Stethoscope

Users

Phone

Calendar

Clock

Activity

Mail

Message

MapPin

Lock

FileText

Bell

Search

Download

Check

X

ArrowRight

ChevronDown

Icon Treatments

Three standard icon presentations used across the design system.

Purple Pastel

#F4EBFF bg / #7F56D9 icon

Light Blue

#E8F6FC bg / #2CABE2 icon

Dark Navy

#0E1630 bg / #FFFFFF icon

Voice & Tone

The MembersHealth voice is warm without being soft, authoritative without being cold. It carries clinical credibility and the warmth of someone who actually remembers your name.

Voice Attributes

Steady

We do not shout. We do not oversell. We speak with the quiet confidence of people who have done this work for years, in real communities, with real outcomes.

Direct

We say what we mean. We name the problem. We do not hide behind jargon, euphemism, or corporate abstraction.

Human

We write for real people—the ones at the kitchen table before the kids wake up, the ones on the night shift, the ones who said “I’m fine” and weren’t.

Accountable

We back our words with action. When we say “we stay,” it is because we have protocols, SLAs, and care coordinators that ensure it.

Purposeful

Every sentence we write should earn its place. We do not fill space. We do not perform empathy.

Tone Calibration

Context	Tone	Example
Member-facing	Warm, reassuring, personal	We’re here. Tell us what you need.
Broker / TPA	Confident, evidence-led, precise	Measurable continuity. Shorter disability duration. Documented adherence.
Employer / Buyer	Institutional, outcomes-focused	Your costs live in the gap between access and follow-through.
Union Trustee	Respectful, mission-aligned	Your members trust you. We help you honour that.
First Responder	Grounded, dignified, no-nonsense	You protect us. We protect your people.
Crisis / Urgent	Calm, present, immediate	You don’t have to handle this alone. Let’s start now.

Words We Use

These words anchor our positioning and should appear naturally and consistently across all content.

infrastructurecapacitystabilizelongitudinalhuman-firstproactiveembeddedmeasurable impactaccountablecontinuityfollow-throughcare with conscience

Words We Avoid

These words collapse our positioning into commodity territory. They must never appear in brand or sales materials.

telehealthappplatformsolutionvirtual visitscheapdiscountportalprovider