№ oatly-com

Oatly | the Original Oat Drink Company | Oatly

Soft, earthy pastels and playful sans-serifs float within generous, airy white space.

Bento Gridminimalism editorial playful food beveragelight

Oatly | the Original Oat Drink Company | Oatly - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Oatly | the Original Oat Drink Company | Oatly - full page scroll

Oatly | the Original Oat Drink Company | Oatly - mobile full page

Palette

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

SwatchHexOKLCHSuggested roleCopy

Hex#be9560
OKLCHoklch(69.6% 0.086 73)
RoleDominant
find sites →
Hex#dac29c
OKLCHoklch(82.5% 0.058 79)
RoleSurface
find sites →
Hex#2c415c
OKLCHoklch(37.0% 0.054 255)
RoleInk
find sites →
Hex#5f7c92
OKLCHoklch(57.2% 0.048 241)
RoleAccent
find sites →
Hex#a8becf
OKLCHoklch(79.0% 0.034 241)
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	Margo Pro Regular	32px	700	1.3	Aa Bb Cc
h2	Margo Pro Regular	27px	500	1.2	Aa Bb Cc
h3	Margo Pro Regular	15px	600	1.4	Aa Bb Cc
body	Margo Pro Regular	16px	400	1.3	Aa Bb Cc
button	Margo Pro Regular	15px	400	1.4	Aa Bb Cc

Spacing scale

20px

40px

Radius scale

0px

3px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #be9560;
  --color-surface: #dac29c;
  --color-ink: #2c415c;
  --color-accent: #5f7c92;
  --color-detail: #a8becf;
}

/* CSS variables exposed by source */
:root {
  --font-paragraph-margo-pro-bold-l: clamp(1.25rem,calc(1.25rem + (100vw - 48rem) * (1.5 - 1.25) / 57),1.5rem)/1.2 "Margo Pro Bold",sans-serif;
  --color-primary-yellow: #fdcf85;
  --font-heading-toni-noveau-pro-l: normal normal clamp(3rem,calc(3rem + (100vw - 48rem) * (6 - 3) / 57),6rem)/0.833 "Toni Noveau Pro",sans-serif;
  --font-paragraph-margo-pro-bold-xs: clamp(1rem,calc(1rem + (100vw - 48rem) * (1 - 1) / 57),1rem)/1.2 "Margo Pro Bold",sans-serif;
  --font-heading-tinny-serif-pro-xl: normal normal clamp(4.25rem,calc(4.25rem + (100vw - 48rem) * (9 - 4.25) / 57),9rem)/1 "Tinny Serif Pro",serif;
  --font-heading-bjorn-serif-m: normal normal clamp(2.125rem,calc(2.125rem + (100vw - 48rem) * (4.25 - 2.125) / 57),4.25rem)/0.778 "Bjorn Serif Pro","Impact",sans-serif;
  --font-heading-margo-pro-regular-s: normal normal 1.125rem/1 "Margo Pro Regular",sans-serif;
  --font-heading-toni-noveau-pro-m: normal normal clamp(2.125rem,calc(2.125rem + (100vw - 48rem) * (4.25 - 2.125) / 57),4.25rem)/0.778 "Toni Noveau Pro",sans-serif;
  --font-paragraph-margo-pro-bold-xl: clamp(1.5rem,calc(1.5rem + (100vw - 48rem) * (2 - 1.5) / 57),2rem)/1.2 "Margo Pro Bold",sans-serif;
  --font-heading-petra-l: normal normal clamp(3rem,calc(3rem + (100vw - 48rem) * (6 - 3) / 57),6rem)/0.833 "Petra Antikva Pro","Impact",sans-serif;
  --font-heading-girdo-rounded-l: normal normal clamp(3rem,calc(3rem + (100vw - 48rem) * (6 - 3) / 57),6rem)/0.833 "Girdo Rounded Pro","Impact",sans-serif;
  --font-heading-bjorn-serif-xxl: normal normal clamp(5.5rem,calc(5.5rem + (100vw - 48rem) * (11.5 - 5.5) / 57),11.5rem)/0.74 "Bjorn Serif Pro","Impact",sans-serif;
  --font-paragraph-margo-pro-regular-l: clamp(1.25rem,calc(1.25rem + (100vw - 48rem) * (1.5 - 1.25) / 57),1.5rem)/1.2 "Margo Pro Regular",sans-serif;
  --font-heading-margo-pro-bold-xl: normal normal clamp(2rem,calc(2rem + (100vw - 48rem) * (3 - 2) / 57),3rem)/1 "Margo Pro Bold",sans-serif;
  --font-heading-tinny-serif-pro-l: normal normal clamp(3rem,calc(3rem + (100vw - 48rem) * (6 - 3) / 57),6rem)/1 "Tinny Serif Pro",serif;
  --font-family-toni-noveau-pro: "Toni Noveau Pro",sans-serif;
  --font-heading-toni-noveau-pro-xl: normal normal clamp(4.25rem,calc(4.25rem + (100vw - 48rem) * (9 - 4.25) / 57),9rem)/0.778 "Toni Noveau Pro",sans-serif;
  --color-primary-black: #000000;
  --color-secondary-medium-gray: #888888;
  --spacer-3: 1.5vw;
  --font-heading-tinny-serif-pro-m: normal normal clamp(2.125rem,calc(2.125rem + (100vw - 48rem) * (4.25 - 2.125) / 57),4.25rem)/1 "Tinny Serif Pro",serif;
  --font-heading-bjorn-serif-l: normal normal clamp(3rem,calc(3rem + (100vw - 48rem) * (6 - 3) / 57),6rem)/0.833 "Bjorn Serif Pro","Impact",sans-serif;
  --font-family-margo-pro-bold: "Margo Pro Bold",sans-serif;
  --font-heading-girdo-m: normal normal clamp(2.125rem,calc(2.125rem + (100vw - 48rem) * (4.25 - 2.125) / 57),4.25rem)/0.778 "Girdo Black Pro","Impact",sans-serif;
  --font-heading-petra-xxl: normal normal clamp(5.5rem,calc(5.5rem + (100vw - 48rem) * (11.5 - 5.5) / 57),11.5rem)/0.74 "Petra Antikva Pro","Impact",sans-serif;
  --color-secondary-red: #e43e39;
  --font-family-bjorn-serif: "Bjorn Serif Pro","Impact",sans-serif;
  --color-primary-brown: #a0632d;
  --font-heading-tinny-serif-pro-xxl: normal normal clamp(5.5rem,calc(5.5rem + (100vw - 48rem) * (11.5 - 5.5) / 57),11.5rem)/1 "Tinny Serif Pro",serif;
  --font-heading-girdo-rounded-s: normal normal clamp(2rem,calc(2rem + (100vw - 48rem) * (3 - 2) / 57),3rem)/0.833 "Girdo Rounded Pro","Impact",sans-serif;
  --font-heading-bjorn-serif-xl: normal normal clamp(4.25rem,calc(4.25rem + (100vw - 48rem) * (9 - 4.25) / 57),9rem)/0.778 "Bjorn Serif Pro","Impact",sans-serif;
  --font-heading-girdo-l: normal normal clamp(3rem,calc(3rem + (100vw - 48rem) * (6 - 3) / 57),6rem)/0.833 "Girdo Black Pro","Impact",sans-serif;
  --font-paragraph-tinny-serif-pro-l: normal normal clamp(1.25rem,calc(1.25rem + (100vw - 48rem) * (1.5 - 1.25) / 57),1.5rem)/1.2 "Tinny Serif Pro",serif;
  --font-family-girdo-rounded: "Girdo Rounded Pro","Impact",sans-serif;
  --spacer-2: 1vw;
}

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 Oatly | the Original Oat Drink Company | Oatly.
Reference design system (extracted from the live site):
- Palette: #be9560, #dac29c, #2c415c, #5f7c92, #a8becf
- Typefaces: Margo Pro Regular
- 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/oatly-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Margo Pro Regular

32px

700

1.3

Aa Bb Cc

Margo Pro Regular

27px

500

1.2

Aa Bb Cc

Margo Pro Regular

15px

600

1.4

Aa Bb Cc

body

Margo Pro Regular

16px

400

1.3

Aa Bb Cc

button

Margo Pro Regular

15px

400

1.4

Aa Bb Cc

:root { --color-dominant: #be9560; --color-surface: #dac29c; --color-ink: #2c415c; --color-accent: #5f7c92; --color-detail: #a8becf; } /* CSS variables exposed by source */ :root { --font-paragraph-margo-pro-bold-l: clamp(1.25rem,calc(1.25rem + (100vw - 48rem) * (1.5 - 1.25) / 57),1.5rem)/1.2 "Margo Pro Bold",sans-serif; --color-primary-yellow: #fdcf85; --font-heading-toni-noveau-pro-l: normal normal clamp(3rem,calc(3rem + (100vw - 48rem) * (6 - 3) / 57),6rem)/0.833 "Toni Noveau Pro",sans-serif; --font-paragraph-margo-pro-bold-xs: clamp(1rem,calc(1rem + (100vw - 48rem) * (1 - 1) / 57),1rem)/1.2 "Margo Pro Bold",sans-serif; --font-heading-tinny-serif-pro-xl: normal normal clamp(4.25rem,calc(4.25rem + (100vw - 48rem) * (9 - 4.25) / 57),9rem)/1 "Tinny Serif Pro",serif; --font-heading-bjorn-serif-m: normal normal clamp(2.125rem,calc(2.125rem + (100vw - 48rem) * (4.25 - 2.125) / 57),4.25rem)/0.778 "Bjorn Serif Pro","Impact",sans-serif; --font-heading-margo-pro-regular-s: normal normal 1.125rem/1 "Margo Pro Regular",sans-serif; --font-heading-toni-noveau-pro-m: normal normal clamp(2.125rem,calc(2.125rem + (100vw - 48rem) * (4.25 - 2.125) / 57),4.25rem)/0.778 "Toni Noveau Pro",sans-serif; --font-paragraph-margo-pro-bold-xl: clamp(1.5rem,calc(1.5rem + (100vw - 48rem) * (2 - 1.5) / 57),2rem)/1.2 "Margo Pro Bold",sans-serif; --font-heading-petra-l: normal normal clamp(3rem,calc(3rem + (100vw - 48rem) * (6 - 3) / 57),6rem)/0.833 "Petra Antikva Pro","Impact",sans-serif; --font-heading-girdo-rounded-l: normal normal clamp(3rem,calc(3rem + (100vw - 48rem) * (6 - 3) / 57),6rem)/0.833 "Girdo Rounded Pro","Impact",sans-serif; --font-heading-bjorn-serif-xxl: normal normal clamp(5.5rem,calc(5.5rem + (100vw - 48rem) * (11.5 - 5.5) / 57),11.5rem)/0.74 "Bjorn Serif Pro","Impact",sans-serif; --font-paragraph-margo-pro-regular-l: clamp(1.25rem,calc(1.25rem + (100vw - 48rem) * (1.5 - 1.25) / 57),1.5rem)/1.2 "Margo Pro Regular",sans-serif; --font-heading-margo-pro-bold-xl: normal normal clamp(2rem,calc(2rem + (100vw - 48rem) * (3 - 2) / 57),3rem)/1 "Margo Pro Bold",sans-serif; --font-heading-tinny-serif-pro-l: normal normal clamp(3rem,calc(3rem + (100vw - 48rem) * (6 - 3) / 57),6rem)/1 "Tinny Serif Pro",serif; --font-family-toni-noveau-pro: "Toni Noveau Pro",sans-serif; --font-heading-toni-noveau-pro-xl: normal normal clamp(4.25rem,calc(4.25rem + (100vw - 48rem) * (9 - 4.25) / 57),9rem)/0.778 "Toni Noveau Pro",sans-serif; --color-primary-black: #000000; --color-secondary-medium-gray: #888888; --spacer-3: 1.5vw; --font-heading-tinny-serif-pro-m: normal normal clamp(2.125rem,calc(2.125rem + (100vw - 48rem) * (4.25 - 2.125) / 57),4.25rem)/1 "Tinny Serif Pro",serif; --font-heading-bjorn-serif-l: normal normal clamp(3rem,calc(3rem + (100vw - 48rem) * (6 - 3) / 57),6rem)/0.833 "Bjorn Serif Pro","Impact",sans-serif; --font-family-margo-pro-bold: "Margo Pro Bold",sans-serif; --font-heading-girdo-m: normal normal clamp(2.125rem,calc(2.125rem + (100vw - 48rem) * (4.25 - 2.125) / 57),4.25rem)/0.778 "Girdo Black Pro","Impact",sans-serif; --font-heading-petra-xxl: normal normal clamp(5.5rem,calc(5.5rem + (100vw - 48rem) * (11.5 - 5.5) / 57),11.5rem)/0.74 "Petra Antikva Pro","Impact",sans-serif; --color-secondary-red: #e43e39; --font-family-bjorn-serif: "Bjorn Serif Pro","Impact",sans-serif; --color-primary-brown: #a0632d; --font-heading-tinny-serif-pro-xxl: normal normal clamp(5.5rem,calc(5.5rem + (100vw - 48rem) * (11.5 - 5.5) / 57),11.5rem)/1 "Tinny Serif Pro",serif; --font-heading-girdo-rounded-s: normal normal clamp(2rem,calc(2rem + (100vw - 48rem) * (3 - 2) / 57),3rem)/0.833 "Girdo Rounded Pro","Impact",sans-serif; --font-heading-bjorn-serif-xl: normal normal clamp(4.25rem,calc(4.25rem + (100vw - 48rem) * (9 - 4.25) / 57),9rem)/0.778 "Bjorn Serif Pro","Impact",sans-serif; --font-heading-girdo-l: normal normal clamp(3rem,calc(3rem + (100vw - 48rem) * (6 - 3) / 57),6rem)/0.833 "Girdo Black Pro","Impact",sans-serif; --font-paragraph-tinny-serif-pro-l: normal normal clamp(1.25rem,calc(1.25rem + (100vw - 48rem) * (1.5 - 1.25) / 57),1.5rem)/1.2 "Tinny Serif Pro",serif; --font-family-girdo-rounded: "Girdo Rounded Pro","Impact",sans-serif; --spacer-2: 1vw; }

Build a landing page in the visual style of Oatly | the Original Oat Drink Company | Oatly. Reference design system (extracted from the live site): - Palette: #be9560, #dac29c, #2c415c, #5f7c92, #a8becf - Typefaces: Margo Pro Regular - 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/oatly-com