Working draft MHN Brand Pack · Colour

MHN Colour

The MHN (MIMS Healthcare Network) client colour skin, aligned to the live brand: teal-green Primary, mid-teal Secondary, raspberry Accent and a mint light surface. Tint ramps and on-fill pairings are derived; Event Phase and Booking Status are fixed and not re-skinned.

Brand: Teal · Mint · RaspberryThemeable: Brand · Tints · Surfaces · TextRegistry: Draft, not yet in Notion

The MHN (MIMS Healthcare Network) colour skin. This is the client-themeable layer of the MHN Brand Pack, aligned to the live MHN brand: a deep teal-green Primary, a mid-teal Secondary, the brand raspberry as Accent, and MHN's pale mint as the light surface. Event Phase and Booking Status are fixed system semantics, carried unchanged from the master, so they are not re-skinned here. Working draft for design iteration; not yet locked to the Notion Colour Registry.

#	Colour category	Client themeable
01	Brand	✓
02	Tints	✓
03	Surface Scale — Light	✓
04	Surface Scale — Dark	✓
05	Text & Icons	✓

Click any swatch to copy its hex. Five themeable groups; the fixed Event Phase and Booking Status semantics carry from the master and are not shown here.

Brand

Draft

Three brand colours. Primary is the MHN teal-green (structural), Secondary is a mid-teal from the same family (furniture and non-interactive emphasis), Accent is the brand raspberry (interactive).

Primary 500

Primarybase_colours_primary#035040MHN teal-green. Structural brand colour: headings, logo, brand moments, non-interactive emphasis. Carries its own tonal ramp (Tints). Mode-agnostic.

Secondary 500

Secondarybase_colours_secondary#09866dMid-teal from the Primary family. Furniture and non-interactive emphasis: rules, dividers, tags, framed borders. Carries its own tonal ramp (Tints). Mode-agnostic.

Accent 500

Accentbase_colours_accent#b31e4cMHN raspberry (the GP / GP Business badge colour). The interactive colour: CTAs, buttons, links, active states, accent bars. If it is clickable, it is Accent. Light-surface tuned (6.6:1 on white, 2.7:1 on dark).

Notes

Aligned to the live MHN brand. Primary and the mint surface are read from the MIMS Healthcare Network ad creative; Accent is the brand raspberry. Secondary is derived as a mid-teal from Primary so the furniture stays on-brand.
Primary (teal-green) is structural: headings, logo lockup, brand moments, non-interactive accents.
Secondary (mid-teal) is furniture and non-interactive emphasis (rules, dividers, tags, framed borders). It carries its own tonal ramp (see Tints).
Accent (raspberry) is the interactive colour: CTAs, buttons, links, active states. If it's clickable, it's Accent. It clears AA on light surfaces but not on dark, so dark mode uses a lighter tint of it.
Primary and Secondary are mode-agnostic; the link role binds to Accent (see Text & Icons), which is tuned for light surfaces.

Tints

Draft

Two WDS tint scales, named Tint Scale 1–2, derived from the Primary and Secondary brand colours. Steps use the standard 50–950 (Tailwind-inspired) convention, standardised across all Brand Packs; 500 is the brand anchor (ticked), the rest generated by the white/black-mix method. Accent has no scale.

Tint Scale 1 · Primary (Teal)

50
#f5f8f7

100
#ebf1f0

200
#cddcd9

300
#9fbcb6

400
#5e8f85

500✓
#035040

600
#034336

700
#02362c

800
#022820

900
#011b16

950
#01100d

Tint Scale 2 · Secondary (Mid-teal)

50
#f5faf9

100
#ebf5f3

200
#cee7e2

300
#a2d1c8

400
#62b2a2

500✓
#09866d

600
#08715c

700
#065b4a

800
#044336

900
#032e25

950
#021b16

How the scales work

Tint Scale 1 derives from Primary (#035040); Tint Scale 2 from Secondary (#09866d). 500 is the brand anchor (ticked).
Steps follow the 50–950 Tailwind-inspired convention, standard across all Brand Packs. Generated by the WDS white/black-mix method; on-fill flips as the ramp darkens, so bind the on-fill token.

Surface Scale — Light

MHN mint

MHN's light-mode surfaces, tinted with the brand mint. White stays for content cards; the mint carries the page canvas and panels.

Whitesurface_scale_light_white#ffffffContent cards, raised surfaces

SSL1surface_scale_light_ssl1#e9f5f0Subtle mint elevation

SSL2surface_scale_light_ssl2#cfe9deBrand mint page canvas, callout panels

SSL3surface_scale_light_ssl3#a6cabeBorders, dividers · --border

SSL4surface_scale_light_ssl4#86b2a5Heavier rules · --border-strong

Notes

Goes light → dark as the number increases. SSL2 (#cfe9de) is the MHN mint seen across the ad creative.
Content cards stay white on the mint canvas; the mint reads as the brand surface, not the neutral Zinc of the master.

Surface Scale — Dark

MHN teal

MHN's dark-mode surfaces, tinted with the Primary teal (the same hue as the Primary scale). From Black up through a dark teal canvas, so dark mode carries the brand rather than neutral Zinc.

Blacksurface_scale_dark_black#000000Deepest surface, overlays

SSD1surface_scale_dark_ssd1#091b17Base canvas, page bg DM (dark teal, near Teal 950)

SSD2surface_scale_dark_ssd2#122b26Content cards DM

SSD3surface_scale_dark_ssd3#2b4640Borders, dividers DM · --border

SSD4surface_scale_dark_ssd4#3f5a54Heavier rules DM · --border-strong

Notes

Goes dark → light as the number increases. Black stays pure for overlays; SSD1 is the dark teal canvas, near the Primary Teal 950 (#01100d).
Derived from the Primary scale hue and desaturated as it lightens, so the surfaces read as brand-dark rather than a saturated fill.

Text & Icons

Carried

Mode-specific text, link and icon colours. Carried from the master, except the link role, which binds to MHN Accent (the raspberry).

Text 1 — LMtext_light_text_1_lm#000000Primary text — headings, body, labels

Text 2 — LMtext_light_text_2_lm#71717aMuted — subtitles, meta (Zinc 500)

Link — LMtext_light_link_lm#b31e4cInline links in LM. Bound to Accent (raspberry), 6.6:1 on white. Pair with the underline affordance.

Text 1 — DMtext_dark_text_1_dm#ffffffPrimary text in DM

Text 2 — DMtext_dark_text_2_dm#a1a1aaMuted text in DM (Zinc 400)

Link — DMtext_dark_link_dm#b31e4cInline links in DM. Bound to Accent, but only 2.7:1 on #18181b, so DM links want a lighter raspberry tint (value TBC).

Icon — LMicons_icon_lm#000000Icon fills in LM

Icon — DMicons_icon_dm#ffffffIcon fills in DM

Notes

Links are bound to Accent (raspberry #b31e4c). It is tuned for light surfaces (6.6:1 on white), so pair it with the underline affordance on light and use a lighter tint for dark-mode links (value TBC).
Muted text (Text 2) is a per-layer override, not a separate token.

MHN Brand Pack — Colour (draft)
Working colour reference for the MHN skin. Values are generated for design iteration; once locked they move to the Notion Colour Registry and this page mirrors it.