№ drinkolipop-com

OLIPOP | Healthy Prebiotic Soda

Warm apricot ruffles embrace playful, rounded sans-serif, fostering joyful, generous space.

Photographicplayful maximalism food beverage ecommercelight

OLIPOP | Healthy Prebiotic Soda - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

OLIPOP | Healthy Prebiotic Soda - full page scroll

OLIPOP | Healthy Prebiotic Soda - mobile full page

Palette

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

SwatchHexOKLCHSuggested roleCopy

Hex#fa3535
OKLCHoklch(64.2% 0.231 27)
RoleDominant
find sites →
Hex#fba38b
OKLCHoklch(79.7% 0.111 36)
RoleSurface
find sites →
Hex#04846c
OKLCHoklch(54.8% 0.103 174)
RoleInk
find sites →
Hex#8f5c54
OKLCHoklch(52.8% 0.069 29)
RoleAccent
find sites →
Hex#c29681
OKLCHoklch(70.9% 0.061 47)
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	Sample
h1	Ano	20px	700	1	Aa Bb Cc
h2	WindsorEF	40px	900	1.1	Aa Bb Cc
h3	WindsorEF	48px	800	1.1	Aa Bb Cc
body	Ano	16px	400	1.4	Aa Bb Cc
button	Ano	12px	700	1	Aa Bb Cc

Spacing scale

4px

8px

10px

12px

14px

16px

20px

24px

54px

56px

72px

86px

106px

160px

248px

Radius scale

0px

2px

5px

8px

10px

12px

16px

24px

48px

50px

Container

Max content width 900px

Export

:root {
  --color-dominant: #fa3535;
  --color-surface: #fba38b;
  --color-ink: #04846c;
  --color-accent: #8f5c54;
  --color-detail: #c29681;
}

/* CSS variables exposed by source */
:root {
  --color-giftcard-tooltip: rgba(0, 0, 0, 0.9);
  --color-giftcard-tooltip-fallback: #333;
  --font-h4-mobile: 15;
  --color-twitter: #00aced;
  --font-h1-mobile: 32;
  --color-text-field: rgba(0,0,0,0);
  --font-style-body: normal;
  --font-h5-mobile: 13;
  --font-h5-desktop: 15;
  --color-body-text: #333232;
  --color-small-button-text-border-focus: #606060;
  --color-disabled-border: #f4f4f4;
  --color-video-controls: #fff;
  --font-h3-mobile: 20;
  --font-size-mobile-input: 16px;
  --font-size-header: 26;
  --font-h6-desktop: 14;
  --color-giftcard-light: #fff;
  --color-pinterest: #cb2027;
  --color-border: #ebebeb;
  --color-success-bg: #f8fff9;
  --color-text-shadow: rgba(0,0,0,0.4);
  --font-stack-cart-notification: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-style-header: normal;
  --color-bg: #ffffff;
  --font-weight-body--bold: 700;
  --color-giftcard-small-text: #b3b3b3;
  --color-image-overlay: #685858;
  --color-border-form-darken: #b3b3b3;
  --color-grey: #B5C1BF;
  --color-btn-primary-text: #ffffff;
  --color-error-bg: #fff8f8;
  --color-slideshow-arrows: #000;
  --color-overlay-text-focus: #e6e6e6;
  --font-rich-text-small: 13;
  --color-small-button-text-border: #3a3a3a;
  --color-success: #1F873D;
  --color-body: #ffffff;
  --color-facebook: #3b5998;
  --color-slideshow-dots: #fff;
  --font-weight-body--bolder: 700;
  --color-giftcard-shadow: rgba(0, 0, 0, 0.1);
  --color-giftcard-disabled: #999;
  --font-mega-title-large-desktop: 65;
  --font-stack-header: Helvetica, Arial, sans-serif;
  --color-btn-primary-focus: #606060;
  --color-dark-green: #14433D;
  --font-h4-min-height-mobile: 11;
  --color-btn-social-focus: #d2d2d2;
  --color-btn-primary-darken: #212121;
  --font-rich-text-large: 17;
  --font-stack-body: Helvetica, Arial, sans-serif;
  --border-radius: 2px;
  --color-btn-primary: #3a3a3a;
  --font-h2-mobile: 18;
  --color-overlay-title-text: #ffffff;
  --color-error: #d20000;
  --font-h2-desktop: 20;
  --color-sale-text: #fa4545;
  --color-link: #333232;
}

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 OLIPOP | Healthy Prebiotic Soda.
Reference design system (extracted from the live site):
- Palette: #fa3535, #fba38b, #04846c, #8f5c54, #c29681
- Typefaces: Ano, WindsorEF
- Macrostructure: Photographic
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/drinkolipop-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Ano

20px

700

Aa Bb Cc

WindsorEF

40px

900

1.1

Aa Bb Cc

WindsorEF

48px

800

1.1

Aa Bb Cc

body

Ano

16px

400

1.4

Aa Bb Cc

button

Ano

12px

700

Aa Bb Cc

:root { --color-dominant: #fa3535; --color-surface: #fba38b; --color-ink: #04846c; --color-accent: #8f5c54; --color-detail: #c29681; } /* CSS variables exposed by source */ :root { --color-giftcard-tooltip: rgba(0, 0, 0, 0.9); --color-giftcard-tooltip-fallback: #333; --font-h4-mobile: 15; --color-twitter: #00aced; --font-h1-mobile: 32; --color-text-field: rgba(0,0,0,0); --font-style-body: normal; --font-h5-mobile: 13; --font-h5-desktop: 15; --color-body-text: #333232; --color-small-button-text-border-focus: #606060; --color-disabled-border: #f4f4f4; --color-video-controls: #fff; --font-h3-mobile: 20; --font-size-mobile-input: 16px; --font-size-header: 26; --font-h6-desktop: 14; --color-giftcard-light: #fff; --color-pinterest: #cb2027; --color-border: #ebebeb; --color-success-bg: #f8fff9; --color-text-shadow: rgba(0,0,0,0.4); --font-stack-cart-notification: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-style-header: normal; --color-bg: #ffffff; --font-weight-body--bold: 700; --color-giftcard-small-text: #b3b3b3; --color-image-overlay: #685858; --color-border-form-darken: #b3b3b3; --color-grey: #B5C1BF; --color-btn-primary-text: #ffffff; --color-error-bg: #fff8f8; --color-slideshow-arrows: #000; --color-overlay-text-focus: #e6e6e6; --font-rich-text-small: 13; --color-small-button-text-border: #3a3a3a; --color-success: #1F873D; --color-body: #ffffff; --color-facebook: #3b5998; --color-slideshow-dots: #fff; --font-weight-body--bolder: 700; --color-giftcard-shadow: rgba(0, 0, 0, 0.1); --color-giftcard-disabled: #999; --font-mega-title-large-desktop: 65; --font-stack-header: Helvetica, Arial, sans-serif; --color-btn-primary-focus: #606060; --color-dark-green: #14433D; --font-h4-min-height-mobile: 11; --color-btn-social-focus: #d2d2d2; --color-btn-primary-darken: #212121; --font-rich-text-large: 17; --font-stack-body: Helvetica, Arial, sans-serif; --border-radius: 2px; --color-btn-primary: #3a3a3a; --font-h2-mobile: 18; --color-overlay-title-text: #ffffff; --color-error: #d20000; --font-h2-desktop: 20; --color-sale-text: #fa4545; --color-link: #333232; }

Build a landing page in the visual style of OLIPOP | Healthy Prebiotic Soda. Reference design system (extracted from the live site): - Palette: #fa3535, #fba38b, #04846c, #8f5c54, #c29681 - Typefaces: Ano, WindsorEF - Macrostructure: Photographic 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/drinkolipop-com