№ modernhealth-com--member

Part of Modernhealth - 4 pages captured →

Modernhealth

Cool, spacious digital clarity—precise sans-serif geometry on muted, tranquil indigo depths.

Split Studiominimalism swiss brutalism health saaslight

The page uses a split layout with a large, calming hero image on one side and text content on the other. The typography is clean and modern, with ample whitespace contributing to a sense of clarity and professionalism. · health tech, mental wellness, modern health, split screen, minimalist design, calm aesthetic, professional website

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

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

Reads as: muted · cool · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#046cbc
OKLCHoklch(52.4% 0.149 251)
RoleDominant
find sites →
Hex#684b22
OKLCHoklch(43.5% 0.069 74)
RoleSurface
find sites →
Hex#80b3df
OKLCHoklch(74.7% 0.084 245)
RoleInk
find sites →
Hex#9f937a
OKLCHoklch(66.7% 0.038 85)
RoleAccent
find sites →
Hex#a3b2c9
OKLCHoklch(75.9% 0.037 259)
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	Diagramm	80px	600	1	-3px	Aa Bb Cc
h2	Diagramm	48px	600	1.05	-1px	Aa Bb Cc
h3	Diagramm	35px	600	1.3	0	Aa Bb Cc
body	Diagramm	16px	400	1.75	0	Aa Bb Cc
button	Diagramm	20px	400	1	0	Aa Bb Cc

Spacing scale

16px

20px

24px

35px

40px

44px

48px

Radius scale

0px

4px

5px

10px

Container

Max content width 1500px

Export

:root {
  --color-dominant: #046cbc;
  --color-surface: #684b22;
  --color-ink: #80b3df;
  --color-accent: #9f937a;
  --color-detail: #a3b2c9;
}

/* CSS variables exposed by source */
:root {
  --colorado-sky-blue: #0069bf;
  --primary-blue: #39739f;
  --primary-black: #111;
  --midnight-blue-2: #01174e;
  --_elevate-2025---elevate-transparent: #fff0;
  --_colors---brand-text-o20: #37353433;
  --width25rem: 25rem;
  --gold: #f9cb4d;
  --_colors---tan-600: #bcb4ad;
  --dark-orchid: #a13ed9;
  --midnight-blue-opacity: #192a3c33;
  --ele24purple: #a68eb4;
  --_padding---padding-top-btm-xxxl: 80px;
  --white-75: #ffffffbf;
  --_fonts---font-secondary: Montserrat,sans-serif;
  --_buttons---button-secondary-bg: #0069bf;
  --_font-sizes---text-main: 18px;
  --_colors---light-100: white;
  --_colors---tan-700: #857f7a;
  --deep-pink: #ff4090;
  --_buttons---button-secondary-text-hover: #373534;
  --_colors---brand-900: #031726;
  --_padding---mod-pad-top-btm-xl: 48px;
  --_colors---tan-400: #f3f0ed;
  --_padding---mod-pad-left-right-m: 24px;
  --_elevate-2025---elevate-btn-press: #d3e0e3;
  --_radius---radius-medium: 12px;
  --_spacing-utilities---space-1: 8px;
  --margin-btm-xxl: 64px;
  --_buttons---button-primary-border: #ffcc8a;
  --plum: #fdacfa;
  --_font-weights---font-weight-regular: 400;
  --_buttons---button-primary-text-hover: #373534;
  --_buttons---button-primary-pad-top-btm: 8px;
  --onyx: #3c3c3c;
  --cornflower-blue: #87a6f5;
  --mh-light-blue: #4c7ddd;
  --_padding---mod-pad-top-btm-xxl: 64px;
  --_elevate-2025---elevate-dark-grey: #6a8a97;
  --_margins---margin-btm-med: 40px;
  --_padding---mod-pad-top-btm-m: 32px;
  --_padding---mod-pad-left-right<deleted|variable-742a8416-32c3-c933-e3ae-0d5346a1d8ea>: 24px;
  --_font-weights---card-headers: 600;
  --_font-sizes---brand-h4: 32px;
  --_elevate-2025---elevate-dark-green: #416d7c;
  --_colors---brand-400: #7bc0f9;
  --ele24blue: #3787e7;
  --_colors---tan-300: #fffbf7;
  --royal-blue-2: #2255d7;
  --_padding---mod-pad-top-btm-s: 24px;
  --white-40: #fff6;
  --elevate-yellow: #ffe5c0;
  --_colors---dark-800: #2f2b2d;
  --padding-left-right-medium<deleted|variable-dca6f1b5-8a7d-2d15-db6e-e88075089a99>: 32px;
  --_spacing-utilities---space-4: 24px;
  --_padding---mod-pad-top-btm-l: 40px;
  --orange: #ffb033;
  --_margins---margin-top-btm-xxl: 64px;
  --_spacing-utilities---space-0: 0px;
  --light-grey-prev-style: #6e8997;
}

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 Modernhealth.
Reference design system (extracted from the live site):
- Palette: #046cbc, #684b22, #80b3df, #9f937a, #a3b2c9
- Typefaces: Diagramm
- Macrostructure: Split Studio
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/modernhealth-com--member

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Diagramm

80px

600

-3px

Aa Bb Cc

Diagramm

48px

600

1.05

-1px

Aa Bb Cc

Diagramm

35px

600

1.3

Aa Bb Cc

body

Diagramm

16px

400

1.75

Aa Bb Cc

button

Diagramm

20px

400

Aa Bb Cc

:root { --color-dominant: #046cbc; --color-surface: #684b22; --color-ink: #80b3df; --color-accent: #9f937a; --color-detail: #a3b2c9; } /* CSS variables exposed by source */ :root { --colorado-sky-blue: #0069bf; --primary-blue: #39739f; --primary-black: #111; --midnight-blue-2: #01174e; --_elevate-2025---elevate-transparent: #fff0; --_colors---brand-text-o20: #37353433; --width25rem: 25rem; --gold: #f9cb4d; --_colors---tan-600: #bcb4ad; --dark-orchid: #a13ed9; --midnight-blue-opacity: #192a3c33; --ele24purple: #a68eb4; --_padding---padding-top-btm-xxxl: 80px; --white-75: #ffffffbf; --_fonts---font-secondary: Montserrat,sans-serif; --_buttons---button-secondary-bg: #0069bf; --_font-sizes---text-main: 18px; --_colors---light-100: white; --_colors---tan-700: #857f7a; --deep-pink: #ff4090; --_buttons---button-secondary-text-hover: #373534; --_colors---brand-900: #031726; --_padding---mod-pad-top-btm-xl: 48px; --_colors---tan-400: #f3f0ed; --_padding---mod-pad-left-right-m: 24px; --_elevate-2025---elevate-btn-press: #d3e0e3; --_radius---radius-medium: 12px; --_spacing-utilities---space-1: 8px; --margin-btm-xxl: 64px; --_buttons---button-primary-border: #ffcc8a; --plum: #fdacfa; --_font-weights---font-weight-regular: 400; --_buttons---button-primary-text-hover: #373534; --_buttons---button-primary-pad-top-btm: 8px; --onyx: #3c3c3c; --cornflower-blue: #87a6f5; --mh-light-blue: #4c7ddd; --_padding---mod-pad-top-btm-xxl: 64px; --_elevate-2025---elevate-dark-grey: #6a8a97; --_margins---margin-btm-med: 40px; --_padding---mod-pad-top-btm-m: 32px; --_padding---mod-pad-left-right<deleted|variable-742a8416-32c3-c933-e3ae-0d5346a1d8ea>: 24px; --_font-weights---card-headers: 600; --_font-sizes---brand-h4: 32px; --_elevate-2025---elevate-dark-green: #416d7c; --_colors---brand-400: #7bc0f9; --ele24blue: #3787e7; --_colors---tan-300: #fffbf7; --royal-blue-2: #2255d7; --_padding---mod-pad-top-btm-s: 24px; --white-40: #fff6; --elevate-yellow: #ffe5c0; --_colors---dark-800: #2f2b2d; --padding-left-right-medium<deleted|variable-dca6f1b5-8a7d-2d15-db6e-e88075089a99>: 32px; --_spacing-utilities---space-4: 24px; --_padding---mod-pad-top-btm-l: 40px; --orange: #ffb033; --_margins---margin-top-btm-xxl: 64px; --_spacing-utilities---space-0: 0px; --light-grey-prev-style: #6e8997; }

Build a landing page in the visual style of Modernhealth. Reference design system (extracted from the live site): - Palette: #046cbc, #684b22, #80b3df, #9f937a, #a3b2c9 - Typefaces: Diagramm - Macrostructure: Split Studio 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/modernhealth-com--member