№ alliahealth-co

Allia Health Group | Discover the new era of digital health.

Soft teal gradients and open, airy sans-serif type create a serene, modern clinical feel.

Bento Gridminimalism editorial healthlight

Allia Health Group | Discover the new era of digital health. - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Allia Health Group | Discover the new era of digital health. - full page scroll

Allia Health Group | Discover the new era of digital health. - mobile full page

Palette

Click any value to copy. Roles are suggestions, not gospel.

SwatchHexOKLCHSuggested roleCopy

Hex#04899a
OKLCHoklch(57.8% 0.099 210)
RoleDominant
find sites →
Hex#70d9b8
OKLCHoklch(81.3% 0.110 171)
RoleSurface
find sites →
Hex#04949f
OKLCHoklch(60.8% 0.103 204)
RoleInk
find sites →
Hex#569ca4
OKLCHoklch(65.0% 0.072 205)
RoleAccent
find sites →
Hex#b2b5a9
OKLCHoklch(76.7% 0.017 118)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Ppmuseum Variable	64px	300	1.2	-0.72px	Aa Bb Cc
h2	Ppmuseum Variable	48px	200	1.2	-0.44px	Aa Bb Cc
h3	Ppmuseum Variable	32px	500	1.2	-0.44px	Aa Bb Cc
body	Ppneuemontreal Variable	16px	400	1.5	0	Aa Bb Cc
button	Ppneuemontreal Variable	16px	500	1.5	0	Aa Bb Cc

Spacing scale

16px

80px

125px

Radius scale

0px

32px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #04899a;
  --color-surface: #70d9b8;
  --color-ink: #04949f;
  --color-accent: #569ca4;
  --color-detail: #b2b5a9;
}

/* CSS variables exposed by source */
:root {
  --color-scheme-2--border: #01020326;
  --color-scheme-3--foreground: #525f27;
  --color-scheme-3--border: #fff3;
  --color-scheme-1--foreground: #f5fbdf;
  --color-scheme-2--accent: #010203;
  --color-scheme-1--border: #01020326;
  --color-scheme-4--accent: #010203;
  --color-scheme-7--accent: #010203;
  --color-scheme-7--background: #fff5e9;
  --color-scheme-8--border: #01020326;
  --color-2: rgb(208, 245, 240);
  --color-scheme-8--text: #010203;
  --color-scheme-1--background: #f5fbdf;
  --color-scheme-4--foreground: #fafdef;
  --color-scheme-3--accent: #21e6c1;
  --color-scheme-6--foreground: #f4f8fa;
  --color-scheme-1--text: #0f2537;
  --color-scheme-5--accent: #21e6c1;
  --color-scheme-7--text: #010203;
  --color-scheme-2--foreground: #fff;
  --color-scheme-2--background: #fff;
  --color-scheme-8--accent: #010203;
  --color-scheme-5--border: #fff3;
  --color-scheme-1--accent: #010203;
  --color-scheme-8--background: #fdfefe;
  --color-scheme-4--background: #fafdef;
  --color-scheme-5--foreground: #0f2537;
  --color-scheme-7--border: #01020326;
  --color-scheme-4--border: #01020326;
  --color-scheme-7--foreground: #fff5e9;
  --color-scheme-6--border: #01020326;
  --color-scheme-4--text: #010203;
  --border-color--border-primary<deleted|relume-variable-border-color-1>: black;
  --color-3: rgb(232, 245, 214);
  --color-scheme-5--text: #fff;
  --color-scheme-8--foreground: #fdfefe;
  --color-scheme-6--text: #010203;
  --color-1: rgb(244, 248, 250);
  --color-scheme-6--background: #f4f8fa;
  --color-scheme-6--accent: #010203;
  --color-scheme-3--text: #fff;
  --background-color--background-secondary<deleted|relume-variable-background-color-2>: #eee;
  --color-scheme-2--text: #010203;
  --color-scheme-3--background: #525f27;
  --color-scheme-5--background: #0f2537;
  --_primitives---colors--laser-scalpel-teal-light: #63edd3;
  --_primitives---opacity--white-5: #ffffff0d;
  --stop-1: 26.92%;
  --_primitives---opacity--neutral-darkest-40: #01020366;
  --_primitives---colors--oxygenated-mist-darker: #616364;
  --_primitives---colors--vitamin-c-burst-lighter: #ffebd4;
  --_primitives---colors--bio-lumen-lime-darkest: #3d471d;
  --_primitives---opacity--white-60: #fff9;
  --_primitives---colors--deep-scrub-navy: #0f2537;
  --_primitives---opacity--neutral-darkest-20: #01020333;
  --_primitives---colors--deep-scrub-navy-dark: #0c1d2c;
  --_primitives---colors--oxygenated-mist-lighter: #fcfdfe;
  --_primitives---opacity--neutral-darkest-50: #01020380;
  --_primitives---colors--deep-scrub-navy-light: #576673;
  --_ui-styles---radius--medium: 32px;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Allia Health Group | Discover the new era of digital health..
Reference design system (extracted from the live site):
- Palette: #04899a, #70d9b8, #04949f, #569ca4, #b2b5a9
- Typefaces: Ppmuseum Variable, Ppneuemontreal Variable
- Macrostructure: Bento Grid
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/alliahealth-co

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Ppmuseum Variable

64px

300

1.2

-0.72px

Aa Bb Cc

Ppmuseum Variable

48px

200

1.2

-0.44px

Aa Bb Cc

Ppmuseum Variable

32px

500

1.2

-0.44px

Aa Bb Cc

body

Ppneuemontreal Variable

16px

400

1.5

Aa Bb Cc

button

Ppneuemontreal Variable

16px

500

1.5

Aa Bb Cc

:root { --color-dominant: #04899a; --color-surface: #70d9b8; --color-ink: #04949f; --color-accent: #569ca4; --color-detail: #b2b5a9; } /* CSS variables exposed by source */ :root { --color-scheme-2--border: #01020326; --color-scheme-3--foreground: #525f27; --color-scheme-3--border: #fff3; --color-scheme-1--foreground: #f5fbdf; --color-scheme-2--accent: #010203; --color-scheme-1--border: #01020326; --color-scheme-4--accent: #010203; --color-scheme-7--accent: #010203; --color-scheme-7--background: #fff5e9; --color-scheme-8--border: #01020326; --color-2: rgb(208, 245, 240); --color-scheme-8--text: #010203; --color-scheme-1--background: #f5fbdf; --color-scheme-4--foreground: #fafdef; --color-scheme-3--accent: #21e6c1; --color-scheme-6--foreground: #f4f8fa; --color-scheme-1--text: #0f2537; --color-scheme-5--accent: #21e6c1; --color-scheme-7--text: #010203; --color-scheme-2--foreground: #fff; --color-scheme-2--background: #fff; --color-scheme-8--accent: #010203; --color-scheme-5--border: #fff3; --color-scheme-1--accent: #010203; --color-scheme-8--background: #fdfefe; --color-scheme-4--background: #fafdef; --color-scheme-5--foreground: #0f2537; --color-scheme-7--border: #01020326; --color-scheme-4--border: #01020326; --color-scheme-7--foreground: #fff5e9; --color-scheme-6--border: #01020326; --color-scheme-4--text: #010203; --border-color--border-primary<deleted|relume-variable-border-color-1>: black; --color-3: rgb(232, 245, 214); --color-scheme-5--text: #fff; --color-scheme-8--foreground: #fdfefe; --color-scheme-6--text: #010203; --color-1: rgb(244, 248, 250); --color-scheme-6--background: #f4f8fa; --color-scheme-6--accent: #010203; --color-scheme-3--text: #fff; --background-color--background-secondary<deleted|relume-variable-background-color-2>: #eee; --color-scheme-2--text: #010203; --color-scheme-3--background: #525f27; --color-scheme-5--background: #0f2537; --_primitives---colors--laser-scalpel-teal-light: #63edd3; --_primitives---opacity--white-5: #ffffff0d; --stop-1: 26.92%; --_primitives---opacity--neutral-darkest-40: #01020366; --_primitives---colors--oxygenated-mist-darker: #616364; --_primitives---colors--vitamin-c-burst-lighter: #ffebd4; --_primitives---colors--bio-lumen-lime-darkest: #3d471d; --_primitives---opacity--white-60: #fff9; --_primitives---colors--deep-scrub-navy: #0f2537; --_primitives---opacity--neutral-darkest-20: #01020333; --_primitives---colors--deep-scrub-navy-dark: #0c1d2c; --_primitives---colors--oxygenated-mist-lighter: #fcfdfe; --_primitives---opacity--neutral-darkest-50: #01020380; --_primitives---colors--deep-scrub-navy-light: #576673; --_ui-styles---radius--medium: 32px; }

Build a landing page in the visual style of Allia Health Group | Discover the new era of digital health.. Reference design system (extracted from the live site): - Palette: #04899a, #70d9b8, #04949f, #569ca4, #b2b5a9 - Typefaces: Ppmuseum Variable, Ppneuemontreal Variable - Macrostructure: Bento Grid Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/alliahealth-co