Deliberate anti-design that reads like a hand-assembled zine or printed carton. A warm cream #fffef6 field is framed and subdivided by thin 1px / 0.5px black ruled borders (the nav is a row of bordered cells), so structure comes from boxes and rules, never shadows or gradients. Everything is set in the wonky, hand-drawn Margo Pro family, mostly UPPERCASE and stacked at line-height 1.0 (hero 30/30, nav 16 UPPER, body 16), so personality comes from the typeface itself rather than weight or scale contrast. Two button styles: a bordered white box (1px black border, radius 0px, ~44px) and a solid black pill (radius 9999px, Margo Bold, ~52px), both UPPERCASE. Ink is black #000 / #222; colour is a rationed set of flat chalky pastels (amber #fdcf85, pink #f8c8d8, lavender #a67eb1, sky #98c5d3, forest green #2c622c) dropped in as blocks, alongside full-bleed photography carrying hand-drawn white overlay slogans. The copy is chatty, self-deprecating and irreverent — even the cookie banner cracks jokes.
Browse Oatly in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: oatly.com (live DOM, computed styles), 2026-07-25 (desktop 1512px). Coverage: home. Account: needs-dashboard. Responsive: breakpoints not captured. Motion: not captured in detail.
Oatly's site is deliberate anti-design: a warm cream canvas framed and subdivided by thin black ruled borders so the whole page reads like a hand-assembled zine or a printed carton. Everything is set in Margo Pro — a wonky, hand-drawn sans — mostly UPPERCASE and stacked at line-height 1.0, and the copy is chatty and self-deprecating (even the cookie banner jokes "We know you didn't come here for cookies"). Structure comes entirely from 1px/0.5px black boxes, not shadows: the nav is a row of bordered cells, buttons are bordered rectangles, and content cards are full-bleed photography with hand-drawn white overlay slogans ("PEE FOR THE PLANET"). Colour is a rationed set of chalky pastels (amber, pink, lavender, sky, forest green) dropped in as flat blocks. The mood is scrappy, funny, and defiantly un-corporate. Feels: hand-made, scrappy, playful, anti-design.
| Token | Hex | Role / usage |
|---|---|---|
| black | #000000 | Text, borders, buttons, grid rules |
| ink-222 | #222222 | Softer body text |
| cream | #fffef6 | Framed canvas background |
| white | #ffffff | Page base / button fill |
| off-white | #f6f6f6 | Inset panels |
| gray-300 | #c6c6c6 | Muted / dividers |
| gray-500 | #888888 | Secondary text |
| Token | Hex | Role / usage |
|---|---|---|
| amber | #fdcf85 | Colour-block section |
| pink | #f8c8d8 | Colour-block section |
| lavender | #a67eb1 | Colour-block section |
| sky | #98c5d3 | Colour-block section |
| forest green | #2c622c | Colour-block / accent |
Rule: structure is drawn with thin BLACK borders, not shadows; colour arrives as flat pastel blocks and full-bleed photography, never gradients.
Margo Pro Regular / Margo Pro Bold — the single hand-drawn family across the whole site (headlines, nav, body, buttons). oatly-icons supplies UI glyphs.| Role | Family | Size/Line | Weight | Case |
|---|---|---|---|---|
| Hero headline | Margo Pro Regular | 30 / 30 | 400 | UPPERCASE |
| Sub-heading | Margo Pro Regular | 27 | 500 | sentence |
| Body | Margo Pro Regular | 16 | 400 | sentence |
| Nav | Margo Pro Regular | 16 / 19 | 400 | UPPERCASE |
| Button | Margo Pro Reg/Bold | ~20 | 400 | UPPERCASE |
Patterns: headlines are UPPERCASE and stacked at line-height 1.0; one wonky family does everything, so personality comes from the typeface itself, not from weight or scale contrast.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.