# Oatly — Marketing Site Design Spec > 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. ## 1. Visual Theme & Atmosphere 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. ## 2. Color Palette & Roles ### Ink & base | 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 | ### Brand pastels (flat blocks) | 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. ## 3. Typography Rules - `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. ## 4. Component Stylings ### Buttons — two styles - **Bordered box (outline)**: bg white, text black, 1px black border, radius `0px`, Margo Pro ~20px UPPERCASE, padding `12px 16px`, height `44px` (e.g. "Read More →"). - **Pill (solid)**: bg black `#000000`, text white, radius `9999px`, Margo Pro Bold UPPERCASE, padding `16px 24px`, height `52px` (e.g. "Show More"). ### Nav - A row of bordered cells: home icon box, PRODUCTS, TASTEBUDS, NEWS, SUSTAINABILITY, FAQ, BIZ, globe, close — each framed by thin black rules, Margo Pro 16px UPPERCASE. ### Cards / content - Full-bleed photography tiles with hand-drawn white overlay slogans; framed by the page's black grid. ### Region / callout box - A bordered speech-bubble box ("Welcome to Oatly Global!") with a black pill primary and a bordered secondary. ### Inputs - Not deeply captured; bordered, sharp. ## 5. Layout Principles - The whole page sits inside a thin black ruled border on a cream `#fffef6` field, with internal 0.5px/1px black rules boxing the nav and sections — a printed-carton / graph-paper structure. - Centered UPPERCASE hero headline + bordered CTA over the cream field. - Grid of full-bleed photographic content tiles with hand-drawn overlay type. - Copy-forward, irreverent tone throughout. ## 6. Depth & Elevation - Radii: `0px` on boxes/bordered buttons; `9999px` on solid pill buttons. - Elevation: flat — structure is thin black borders (1px / 0.5px), not shadows. - No gradients; pastel colour blocks and photography supply depth. ## 7. Motion - Not captured in detail; playful hover states and video content. Restrained overall. ## 8. Backgrounds, Effects & WebGL - Cream canvas framed by black ruled borders (the signature grid/box structure). - Flat pastel colour blocks (amber, pink, lavender, sky, green) and full-bleed photography with hand-drawn overlay type. - No CSS gradients, canvas or WebGL. Flat, print-like surfaces. ## 9. Do's and Don'ts ### Do - Frame the page and its sections with thin black ruled borders on a cream `#fffef6` field — boxes, not shadows. - Set everything in the hand-drawn Margo family; make headlines UPPERCASE and stack them at line-height 1.0. - Offer two button styles: a bordered white box and a solid black pill, both UPPERCASE. - Use flat pastel colour blocks (amber, pink, lavender, sky, green) and full-bleed photography with hand-drawn white overlay slogans. - Write chatty, self-deprecating, irreverent copy. ### Don't - Don't use drop shadows or gradients — structure is black borders and flat colour. - Don't introduce a slick geometric sans; the wonky Margo face IS the brand. - Don't over-polish; the scrappy, hand-made, anti-design feel is intentional. - Don't rely on weight/scale hierarchy alone — boxes and borders organise the page. ## 10. Responsive Behavior - Not captured (desktop 1512px only). A cookie modal and region prompt are present; the site localizes (Oatly Global vs regional stores). ## 11. Agent Prompt Guide Quick token reference: - Canvas `#fffef6` (framed) · Ink `#000000` / `#222222` · Border 1px/0.5px black · Pastels amber `#fdcf85` / pink `#f8c8d8` / lavender `#a67eb1` / sky `#98c5d3` / green `#2c622c` - Font: `Margo Pro` (hand-drawn, one family) · Hero 30/30 UPPERCASE · Body 16 · Radius 0px box / 9999px pill · Button height 44–52px - Buttons: white bordered box (1px black) OR black pill, both UPPERCASE Margo · Flat, borders not shadows Use the Oatly design language: deliberate anti-design that reads like a hand-assembled zine or printed carton. Frame the whole page and its sections with thin black ruled borders (1px / 0.5px) on a warm cream `#fffef6` field — structure is boxes and rules, never shadows or gradients. Set everything in the wonky, hand-drawn Margo Pro family (Regular + Bold), 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. Offer 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). Feels: hand-made, scrappy, playful, anti-design. Avoid: drop shadows or gradients, a slick geometric sans, over-polish, and relying on weight/scale hierarchy instead of boxes and borders.