№ swimclub-co--products-sperm-performance-supplement

Swim Club · Sperm Performance Supplement

Clinical midnight blue, bold white sans-serifs, golden capsules on sterile gradients

Split Studiominimalism swiss health ecommercelight

A clean, clinical product page utilizing a split layout with a high-key product image on the left and structured purchase options on the right. The use of sans-serif typography and ample white space creates a medical yet accessible mood. · health ecommerce product page, clinical layout, medical supplement design, split screen product hero, minimalist health store

Swim Club · Sperm Performance Supplement - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Swim Club · Sperm Performance Supplement - full page scroll

Swim Club · Sperm Performance Supplement - mobile full page

Palette

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

Reads as: cool · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#fb9b04
OKLCHoklch(77.0% 0.170 67)
RoleDominant
find sites →
Hex#fccc6c
OKLCHoklch(86.8% 0.126 83)
RoleSurface
find sites →
Hex#c48514
OKLCHoklch(66.4% 0.136 74)
RoleInk
find sites →
Hex#6079a1
OKLCHoklch(57.2% 0.069 260)
RoleAccent
find sites →
Hex#a3ccc9
OKLCHoklch(81.5% 0.043 191)
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	Px Grotesk	48px	400	1.1	0	Aa Bb Cc
h2	Px Grotesk	52px	400	1.1	0	Aa Bb Cc
h3	Px Grotesk	21px	400	1.2	0.424327px	Aa Bb Cc
body	Px Grotesk	17px	400	1.3	0	Aa Bb Cc
button	Px Grotesk	17px	400	1.3	0	Aa Bb Cc

Spacing scale

8px

12px

16px

32px

48px

Radius scale

0px

1px

4px

8px

24px

26px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #fb9b04;
  --color-surface: #fccc6c;
  --color-ink: #c48514;
  --color-accent: #6079a1;
  --color-detail: #a3ccc9;
}

/* CSS variables exposed by source */
:root {
  --text-body-30--line-height: 1.3;
  --color-overlay: #e1eaf2;
  --text-body-33: clamp(calc(.0625rem*14),calc(.0625rem*14) + (22 - 14)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*22));
  --color-liquid-100: #a2bdd5;
  --text-caption-30: clamp(calc(.0625rem*14),calc(.0625rem*14) + (18 - 14)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*18));
  --text-body-40--letter-spacing: normal;
  --text-title-90: clamp(calc(.0625rem*36),calc(.0625rem*36) + (80 - 36)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*80));
  --text-caption-40: clamp(calc(.0625rem*16),calc(.0625rem*16) + (22 - 16)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*22));
  --text-body-45: clamp(calc(.0625rem*20),calc(.0625rem*20) + (24 - 20)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*24));
  --color-button-label: #ffffff;
  --text-body-30: clamp(calc(.0625rem*14),calc(.0625rem*14) + (18 - 14)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*18));
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --text-caption-10--line-height: 1.1;
  --text-caption-20--letter-spacing: normal;
  --color-background-gradient: #FFFFFF;
  --text-body-30--letter-spacing: normal;
  --text-body-45--letter-spacing: normal;
  --text-caption-30--line-height: 1.2;
  --text-title-72--line-height: 1.1;
  --text-body-28: clamp(calc(.0625rem*11),calc(.0625rem*11) + (20 - 11)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*20));
  --color-accent: #ff9e00;
  --color-liquid-10: #e1eaf2;
  --radius-sm: .25rem;
  --font-sans: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --text-caption-35: clamp(calc(.0625rem*16),calc(.0625rem*16) + (20 - 16)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*20));
  --font-weight-bold: 700;
  --text-body-35--line-height: 1.4;
  --color-current: currentColor;
  --color-sunrise-100: #ff9e00;
  --color-background: rgba(255 255 255 / 1.0);
  --text-caption-32--line-height: 1.1;
  --font-swimclub: "Swimclub",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --text-body-45--line-height: 1.4;
  --text-caption-25--letter-spacing: normal;
  --font-weight-light: 300;
  --color-transparent: transparent;
  --text-body-40: clamp(calc(.0625rem*18),calc(.0625rem*18) + (22 - 18)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*22));
  --text-title-90--line-height: 1.05;
  --radius-md: .375rem;
  --text-title-75--letter-spacing: normal;
  --color-button: #000000;
  --radius-lg: .5rem;
  --text-caption-35--line-height: 1.1;
  --text-caption-30--letter-spacing: .02em;
  --text-title-80--line-height: 1.1;
  --text-title-80: clamp(calc(.0625rem*28),calc(.0625rem*28) + (56 - 28)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*56));
  --text-title-75--line-height: 1.1;
  --text-title-70--line-height: 1.1;
  --text-caption-32: clamp(calc(.0625rem*16),calc(.0625rem*16) + (18 - 16)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*18));
  --text-body-33--line-height: 1.3;
  --text-caption-20--line-height: 1.1;
  --text-caption-10: calc(.0625rem*12);
  --color-error-100: red;
  --text-body-25--line-height: 1.4;
  --text-caption-40--letter-spacing: .02em;
  --text-body-28--line-height: 1.2;
  --spacing: .0625rem;
  --color-white-100: #fff;
  --text-caption-35--letter-spacing: .04em;
  --text-caption-25: clamp(calc(.0625rem*13),calc(.0625rem*13) + (16 - 13)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*16));
}

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 Swim Club · Sperm Performance Supplement.
Reference design system (extracted from the live site):
- Palette: #fb9b04, #fccc6c, #c48514, #6079a1, #a3ccc9
- Typefaces: Px Grotesk
- 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/swimclub-co--products-sperm-performance-supplement

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Px Grotesk

48px

400

1.1

Aa Bb Cc

Px Grotesk

52px

400

1.1

Aa Bb Cc

Px Grotesk

21px

400

1.2

0.424327px

Aa Bb Cc

body

Px Grotesk

17px

400

1.3

Aa Bb Cc

button

Px Grotesk

17px

400

1.3

Aa Bb Cc

:root { --color-dominant: #fb9b04; --color-surface: #fccc6c; --color-ink: #c48514; --color-accent: #6079a1; --color-detail: #a3ccc9; } /* CSS variables exposed by source */ :root { --text-body-30--line-height: 1.3; --color-overlay: #e1eaf2; --text-body-33: clamp(calc(.0625rem*14),calc(.0625rem*14) + (22 - 14)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*22)); --color-liquid-100: #a2bdd5; --text-caption-30: clamp(calc(.0625rem*14),calc(.0625rem*14) + (18 - 14)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*18)); --text-body-40--letter-spacing: normal; --text-title-90: clamp(calc(.0625rem*36),calc(.0625rem*36) + (80 - 36)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*80)); --text-caption-40: clamp(calc(.0625rem*16),calc(.0625rem*16) + (22 - 16)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*22)); --text-body-45: clamp(calc(.0625rem*20),calc(.0625rem*20) + (24 - 20)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*24)); --color-button-label: #ffffff; --text-body-30: clamp(calc(.0625rem*14),calc(.0625rem*14) + (18 - 14)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*18)); --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --text-caption-10--line-height: 1.1; --text-caption-20--letter-spacing: normal; --color-background-gradient: #FFFFFF; --text-body-30--letter-spacing: normal; --text-body-45--letter-spacing: normal; --text-caption-30--line-height: 1.2; --text-title-72--line-height: 1.1; --text-body-28: clamp(calc(.0625rem*11),calc(.0625rem*11) + (20 - 11)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*20)); --color-accent: #ff9e00; --color-liquid-10: #e1eaf2; --radius-sm: .25rem; --font-sans: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --text-caption-35: clamp(calc(.0625rem*16),calc(.0625rem*16) + (20 - 16)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*20)); --font-weight-bold: 700; --text-body-35--line-height: 1.4; --color-current: currentColor; --color-sunrise-100: #ff9e00; --color-background: rgba(255 255 255 / 1.0); --text-caption-32--line-height: 1.1; --font-swimclub: "Swimclub",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --text-body-45--line-height: 1.4; --text-caption-25--letter-spacing: normal; --font-weight-light: 300; --color-transparent: transparent; --text-body-40: clamp(calc(.0625rem*18),calc(.0625rem*18) + (22 - 18)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*22)); --text-title-90--line-height: 1.05; --radius-md: .375rem; --text-title-75--letter-spacing: normal; --color-button: #000000; --radius-lg: .5rem; --text-caption-35--line-height: 1.1; --text-caption-30--letter-spacing: .02em; --text-title-80--line-height: 1.1; --text-title-80: clamp(calc(.0625rem*28),calc(.0625rem*28) + (56 - 28)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*56)); --text-title-75--line-height: 1.1; --text-title-70--line-height: 1.1; --text-caption-32: clamp(calc(.0625rem*16),calc(.0625rem*16) + (18 - 16)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*18)); --text-body-33--line-height: 1.3; --text-caption-20--line-height: 1.1; --text-caption-10: calc(.0625rem*12); --color-error-100: red; --text-body-25--line-height: 1.4; --text-caption-40--letter-spacing: .02em; --text-body-28--line-height: 1.2; --spacing: .0625rem; --color-white-100: #fff; --text-caption-35--letter-spacing: .04em; --text-caption-25: clamp(calc(.0625rem*13),calc(.0625rem*13) + (16 - 13)*calc((100vw - calc(.0625rem*375))/(1600 - 375)),calc(.0625rem*16)); }

Build a landing page in the visual style of Swim Club · Sperm Performance Supplement. Reference design system (extracted from the live site): - Palette: #fb9b04, #fccc6c, #c48514, #6079a1, #a3ccc9 - Typefaces: Px Grotesk - 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/swimclub-co--products-sperm-performance-supplement