---
version: alpha
name: "Oatly"
description: "Token-first design system reference for Oatly — an off-white editorial grid of black ink borders, condensed uppercase type, flat offset shadows, and irreverent copywriting that turns every container into a mini-manifesto."

colors:
  # Surface / canvas
  background: "#fffef6"   # warm cream — the signature Oatly off-white
  surface: "#ffffff"      # pure white panels within the cream canvas
  surface-alt: "#f6f6f6"  # light neutral for secondary sections

  # Text / ink
  ink: "#000000"
  ink-secondary: "#444444"  # --color-secondary-dark-gray

  # Brand accents (from CSS variables)
  primary: "#2c622c"         # --main-color: deep oat green
  on-primary: "#ffffff"
  primary-container: "#68c74e"  # --color-secondary-green: bright lime accent

  accent-brown: "#a0632d"   # --color-primary-brown: warm oat brown
  accent-red: "#e43e39"     # --color-secondary-red: stamp/alert red
  accent-blue: "#24356a"    # --color-secondary-dark-blue: cool editorial blue
  accent-yellow: "#fdcf85"  # seasonal/campaign warm amber

  # States
  hover-color: "#888888"    # --hover-color; was #888

  # Semantic
  success: "#68c74e"
  warning: "#fdcf85"
  error: "#e43e39"

  # Borders / shadows
  border: "#000000"
  border-soft: "#222222"
  focus-ring: "#000000"
  shadow-soft: "#000000"   # flat offset shadow is always black

typography:
  display-hero:
    fontFamily: "\"Margo Pro\", \"Barlow Condensed\", \"Impact\", ui-sans-serif, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.5px
  display:
    fontFamily: "\"Margo Pro\", \"Barlow Condensed\", \"Impact\", ui-sans-serif, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "\"Margo Pro\", \"Barlow Condensed\", \"Impact\", ui-sans-serif, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px
  heading-sub:
    fontFamily: "\"Margo Pro\", \"Barlow Condensed\", \"Impact\", ui-sans-serif, sans-serif"
    fontSize: 27px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "\"Margo Pro\", \"Barlow Condensed\", \"Impact\", ui-sans-serif, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body:
    fontFamily: "\"Margo Pro\", \"Barlow Condensed\", \"Impact\", ui-sans-serif, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-uppercase:
    fontFamily: "\"Margo Pro\", \"Barlow Condensed\", \"Impact\", ui-sans-serif, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.02em
  nav-link:
    fontFamily: "\"Margo Pro\", \"Barlow Condensed\", \"Impact\", ui-sans-serif, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.04em
  button-ui:
    fontFamily: "\"Margo Pro\", \"Barlow Condensed\", \"Impact\", ui-sans-serif, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.02em
  caption:
    fontFamily: "\"Margo Pro\", \"Barlow Condensed\", \"Impact\", ui-sans-serif, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  label-bold:
    fontFamily: "\"Margo Pro Bold\", \"Barlow Condensed\", \"Impact\", ui-sans-serif, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.06em

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px

rounded:
  none: 0px
  sm: 3px
  md: 5px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 24px
  button-primary-focus:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.surface}"
    outline: "2px solid {colors.focus-ring}"
    outlineOffset: "2px"
    rounded: "{rounded.pill}"
    padding: 16px 24px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.border}"
    rounded: "{rounded.pill}"
    padding: 16px 24px
  card:
    backgroundColor: "{colors.surface}"
    border: "1px solid {colors.border}"
    boxShadow: "2px 2px 0px 0px {colors.shadow-soft}"
    rounded: "{rounded.none}"
    padding: 24px
  card-hover:
    backgroundColor: "{colors.surface}"
    border: "1px solid {colors.border}"
    boxShadow: "4px 4px 0px 0px {colors.shadow-soft}"
    rounded: "{rounded.none}"
    padding: 24px
  card-cream:
    backgroundColor: "{colors.background}"
    border: "1px solid {colors.border}"
    boxShadow: "2px 2px 0px 0px {colors.shadow-soft}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.border-soft}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.ink}"
    outline: "2px solid {colors.focus-ring}"
    rounded: "{rounded.none}"
    padding: 10px 16px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    typography: "{typography.label-bold}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-new:
    backgroundColor: "{colors.accent-red}"
    textColor: "{colors.surface}"
    typography: "{typography.label-bold}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  nav:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.border}"
    typography: "{typography.nav-link}"
    padding: 10px 20px
  tag-stamp:
    backgroundColor: "{colors.accent-red}"
    textColor: "{colors.surface}"
    typography: "{typography.label-bold}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

---

# Oatly Design System

## Overview

Oatly's web presence is a broadsheet pinned to a warm cream wall. The canvas is `{colors.background}` — a warm off-white that feels printed rather than digital, as though the entire site were inked on oat-coloured paper. Against this ground, pure black (`{colors.ink}`) rules everything: borders slice panels into a rigid editorial grid, headlines shout in uppercase condensed Margo Pro, and hard 2px offset shadows (`box-shadow: 2px 2px 0px 0px {colors.shadow-soft}`) give cards the weight of physical postcards nailed together. Nothing floats. Every element is anchored to the grid by a 1px solid black line.

Typography is the brand's primary visual tool. Margo Pro — a custom condensed humanist sans — does virtually all the work. It runs small for navigation, medium for body copy in sentence case, and enormous for the declarative slogans ("WE EXIST TO MAKE IT EASIER FOR PEOPLE TO LIVE HEALTHIER LIVES WITHOUT RECKLESSLY TAKING THE PLANET'S RESOURCES") that double as copywriting and layout. The font's slightly irregular forms read as deliberately hand-adjacent without leaving the grid. Uppercase transforms the most mundane label into a statement; Oatly uses `text-transform: uppercase` more than any other CPG brand at this scale.

Color is used with editorial restraint and occasional detonation. The system defaults to monochrome: cream canvas, black type, black borders. Then, at calculated moments, a single accent erupts — the deep oat green (`{colors.primary}`), the warning red stamp (`{colors.accent-red}`), the warm amber campaign tone (`{colors.accent-yellow}`) — making each use feel like a deliberate editorial choice rather than palette decoration. Product photography supplies all remaining color; the UI itself stays near-monochrome so images land harder.

**Key Characteristics:**
- `{colors.background}` cream canvas (~`#fffef6`) is the brand's most recognisable non-logo asset — never swap it for pure white
- `{colors.ink}` pure black on every structural element: borders, headings, body text, button fills
- Hard 2px offset shadow (`2px 2px 0px 0px {colors.shadow-soft}`) gives all cards and interactive elements a flat-printed, physical quality
- Margo Pro condensed at uppercase used for navigation, labels, and badge text — the brand's signature type move
- `{colors.accent-red}` deployed only for stamps, alerts, and "NEW" badges — its rarity preserves impact
- `{colors.primary}` deep green appears in sustainability-adjacent contexts and primary call-to-action backgrounds
- No gradients, no drop shadows with blur, no soft glows — the system is entirely flat and high-contrast
- Border radius is nearly absent: cards and containers are sharp-cornered (`{rounded.none}`); only pill buttons (`{rounded.pill}`) and minor UI chips (`{rounded.sm}`) break the rule
- All CTA buttons are pill-shaped black with white text — a single undiversified button language
- CSS variables surface the full secondary palette: brown (`{colors.accent-brown}`), dark blue (`{colors.accent-blue}`), green variants — used campaign-by-campaign, not as permanent UI tokens
- Spacing is compact to medium; sections stack densely like newspaper columns rather than breathing with generous whitespace
- Uppercase `letter-spacing: 0.04em` on nav links; editorial tracking on label-bold across tags and badges

## Colors

### Primary
- **Cream Canvas** (`{colors.background}`): The defining surface. Every page starts here — a warm, slightly yellowed off-white that references oat milk's natural tone. Never replace with pure white.
- **Black Ink** (`{colors.ink}`): Text, borders, button backgrounds, outline strokes — the total typographic and structural black that makes the editorial system work.
- **White Panel** (`{colors.surface}`): Pure white used inside the cream canvas for contrast panels, product tiles, and areas requiring clinical product clarity.

### Brand Accent
- **Oat Green** (`{colors.primary}`): The primary brand identity color, pulled from `--main-color: #2C622C`. Used for sustainability messaging, primary CTA sections, and product category accents.
- **Lime Green** (`{colors.primary-container}`): `--color-secondary-green` bright accent for success states, freshness indicators, and plant-based certification badges.

### Supporting Accents
- **Oat Brown** (`{colors.accent-brown}`): `--color-primary-brown` — warm, earthy. Appears in packaging-inspired editorial blocks and in-page banners.
- **Alert Red** (`{colors.accent-red}`): `--color-secondary-red` — the stamp color. "NEW", "TASTE APPROVED", and error/alert states. High-energy; use sparingly.
- **Campaign Blue** (`{colors.accent-blue}`): `--color-secondary-dark-blue` — used for deep editorial contrasts and product-specific campaign palettes.
- **Warm Amber** (`{colors.accent-yellow}`): Seasonal warmth and campaign backgrounds — especially autumn/winter product launches.

### Text States
- **Secondary Text** (`{colors.ink-secondary}`): Softer black for body copy de-emphasis, subheadings, and instructional text within the dark surface.
- **Hover** (`{colors.hover-color}`): `--hover-color: #888` — mid-grey used on interactive link transitions.

### Borders & Shadows
- **Border** (`{colors.border}`): Always pure black — 1px solid across all structural dividers, card frames, and interactive outlines.
- **Border Soft** (`{colors.border-soft}`): `#222222` for input fields and subtle sub-dividers within dark-panel contexts.
- **Shadow Soft** (`{colors.shadow-soft}`): The flat 2px offset shadow is `#000000` — no blur, no spread. A deliberate print effect.
- **Focus Ring** (`{colors.focus-ring}`): 2px solid black outline for accessibility.

## Typography

### Font Family
- **Primary**: `Margo Pro Regular`, with fallbacks: `"Barlow Condensed", "Impact", ui-sans-serif, sans-serif`
- **Bold weight**: `Margo Pro Bold` — same condensed geometry, heavier stroke. Used for labels, caps, and badge text.
- **No monospace, no serif, no icon font (beyond the brand's internal `oatly-icons.ttf`)** — the system is a single-typeface monolith.
- **OpenType behaviour**: Heavily uppercase. Many contexts apply `text-transform: uppercase` at the CSS level rather than relying on variant glyphs.

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Campaign hero slogans at full viewport width |
| `display` | Section-level statements, product names, editorial headlines |
| `heading-section` | h1 page titles, category headers |
| `heading-sub` | h2/h3 within articles, sub-sections |
| `body-large` | Lead paragraph copy, feature descriptions |
| `body` | Standard body copy, product descriptions |
| `body-uppercase` | Navigation secondary labels, filter chips, in-copy emphasis |
| `nav-link` | Top navigation links — small, wide-tracked, uppercase |
| `button-ui` | CTA button label — standard Margo Pro at 20px |
| `caption` | Image captions, footnotes, attribution text |
| `label-bold` | Badge text, stamp labels, "NEW" / "TASTE APPROVED" |

### Principles
- All display and heading text is Margo Pro — the condensed form creates vertical economy even at large sizes
- `text-transform: uppercase` is applied broadly — not as shouting but as the brand's written voice
- Letter-spacing opens slightly on uppercase small text (`nav-link`: 0.04em, `label-bold`: 0.06em) to prevent optical crowding at tight sizes
- Weight differentiation is limited: the system uses Regular (400) and Bold (700); intermediate weights are not used
- Line-height stays tight across all sizes (1.0–1.3) — headlines stack like pull-quote blocks, not comfortable reading text

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Sections stack densely. The homepage functions as a newspaper front page: editorial blocks tile edge-to-edge, separated only by 1px black borders, with minimal interior breathing room. Outer page margins open on desktop but the inner grid stays newspaper-tight.

### Grid & Container
- Max content width: approximately 1440px
- Desktop grid: 12-column with tight gutters (~10px), sections often full-bleed with no max-width
- Editorial card grids: 2–4 columns on desktop, stacking to 1 on mobile
- Navigation is top-fixed, full width with black bottom border

### Whitespace Philosophy
- Whitespace is editorial, not generous. Sections are separated by borders, not air.
- Hero sections use the cream canvas as the breathing room; tightly packed card grids follow immediately beneath.
- Internal card padding is minimal (16–24px) — content density is intentional, not a bug.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Navigation, full-bleed sections, body text areas |
| Card (Level 1) | `2px 2px 0px 0px {colors.shadow-soft}` | Product cards, editorial tiles, interactive panels |
| Card Hover (Level 2) | `4px 4px 0px 0px {colors.shadow-soft}` | Card hover state — shadow offset grows, no blur |
| Focus Ring | `2px solid {colors.focus-ring}` offset 2px | All keyboard-focusable elements |

**Shadow Philosophy**: Oatly uses exactly one shadow style — a hard, no-blur 2px/2px offset in pure black. This is a deliberate print reference: the kind of drop shadow you'd get cutting shapes and photographing them on the cream background. There is no blur radius, no spread, no soft glow. Depth is communicated structurally (borders, stacking) rather than atmospherically (shadows, gradients). The shadow offset doubles on hover, indicating lift without softening.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All structural containers: cards, sections, inputs, modals, images |
| `sm` | 3px | Small utility chips, consent banners, alert toasts |
| `md` | 5px | Dialogs and modal overlays (rare) |
| `pill` | 9999px | All CTA buttons — the single exception in an otherwise square-cornered system |

The radius philosophy is near-binary: everything is square-cornered except pill buttons. This creates a strong visual language — when you see a pill shape, it is always a button. Any 4–16px mid-range radius would dilute that distinction and soften the newspaper-print quality of the UI.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them.

### Button variants
- **`button-primary`** — Black pill button (`{rounded.pill}`), white type, 16px/24px padding. The sole primary CTA across all pages. Its roundness is the one departure from the otherwise square system.
- **`button-secondary`** — Cream background with black 1px border, same pill shape. Used for secondary actions and "read more" links within text-heavy contexts.

### Cards
- **`card`** — Sharp-cornered (`{rounded.none}`), white background with black 1px border and 2px offset hard shadow. The editorial workhorse: product tiles, article cards, campaign highlights.
- **`card-cream`** — Same structure but on `{colors.background}` — used when cards sit inside a white section and need the warm tone to read as a unit.

### Inputs
- Sharp-cornered (`{rounded.none}`) with a single right-side or bottom-side black border — editorial, not form-standard. Focus state adds a full 1px solid black outline across all sides.

### Badges / Tags
- **`badge`** — Green pill chip for category labels, dietary certifications, product attributes.
- **`badge-new`** — Red stamp variant for new product launches and "NEW" indicators.
- **`tag-stamp`** — Red pill with bold uppercase type, wider padding — the "TASTE APPROVED" stamp format seen on campaign imagery.

### Navigation
- Full-width top bar on `{colors.surface}` white, separated from content by 1px solid `{colors.border}` bottom border. Nav links in `{typography.nav-link}` — small, uppercase, spaced. No mega-menu chrome; submenus appear inline beneath the nav bar with the same border treatment.

## Do's and Don'ts

### Do
- Start every layout on the `{colors.background}` cream canvas — it is the brand's primary surface
- Use 1px solid `{colors.border}` black to divide all structural regions; borders do what whitespace would do elsewhere
- Apply `2px 2px 0px 0px {colors.shadow-soft}` to every interactive card — the flat-offset shadow is the brand's signature depth cue
- Use `text-transform: uppercase` freely for `{typography.nav-link}`, `{typography.label-bold}`, and `{typography.body-uppercase}` contexts — it is part of the voice
- Reserve `{colors.accent-red}` exclusively for stamps, "NEW" badges, and genuine error states — its scarcity is its power
- Keep all containers and cards at `{rounded.none}` — the square-cornered grid is what makes pill buttons readable as buttons
- Let headline type (`{typography.display-hero}`) run large and bold — Oatly copy is meant to be read from across a room
- Apply `{colors.primary}` oat green only in sustainability-adjacent content and primary promotional blocks

### Don't
- Don't replace `{colors.background}` with `#ffffff` for "cleanliness" — pure white loses the brand's off-white tactile quality
- Don't add blur to shadows — `box-shadow: 2px 2px 8px rgba(0,0,0,0.2)` looks completely off-brand; the shadow is always hard and black
- Don't introduce mid-range border-radius (4–32px) on cards or inputs — the system is binary: `{rounded.none}` for structure, `{rounded.pill}` for buttons only
- Don't use the full accent palette simultaneously — `{colors.accent-red}`, `{colors.accent-blue}`, `{colors.accent-yellow}`, and `{colors.accent-brown}` are campaign-by-campaign, not concurrent
- Don't use Margo Pro at light weights or small sentence-case for display text — the font's power is uppercase and condensed; mixing case at display size breaks the voice
- Don't add gradients — the design is flat print, not digital-gradient
- Don't centre-align body copy — Oatly uses left-alignment throughout, even in narrow editorial columns
- Don't pad cards generously; internal padding above 32px breaks the newspaper density that makes the layout feel intentional

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <350px | Single column, nav collapses, hero slogans drop 2 type sizes |
| Mobile | 350–767px | Single column cards; hamburger navigation; tighter horizontal margins (16px) |
| Tablet | 768–991px | 2-column card grid; navigation partially expanded |
| Small Desktop | 992–1199px | 3-column card grid; full top navigation; hero text at full scale |
| Desktop | 1200–1439px | 4-column editorial grid; full nav and secondary nav links visible |
| Large Desktop | ≥1440px | Max content width reached; extra margins buffer the cream canvas |

### Touch Targets
- Pill buttons have minimum 48px hit height (16px vertical padding on 20px type = ~52px total)
- Navigation links have 10px vertical padding ensuring ≥40px touch targets
- Card tiles are full-surface links on mobile — the entire card area is tappable

### Collapsing Strategy
- Navigation: hamburger icon at ≤991px; full horizontal nav bar from 992px+
- Card grid: 4-col → 3-col → 2-col → 1-col as breakpoints decrease
- Hero slogans reflow from multi-line display to single stacked lines on mobile; font size scales down but uppercase treatment is preserved
- Spacing scale compresses: `xl` (40px) is used where desktop uses `2xl` (64px) and `3xl` (96px) in mobile layouts

### Image Behavior
- Full-bleed editorial photography extends edge-to-edge within its grid cell — no max-width constraint on images within card containers
- Images maintain aspect ratio via `object-fit: cover`; no letter/pillarboxing
- On mobile, portrait product images collapse to a consistent 1:1 or 4:3 crop

---

## Agent Prompt Guide

### Quick Color Reference
- Background (canvas): `{colors.background}` — `#fffef6`
- Text: `{colors.ink}` — `#000000`
- Brand accent (green): `{colors.primary}` — `#2c622c`
- Secondary text: `{colors.ink-secondary}` — `#444444`
- Border: `{colors.border}` — `#000000`
- CTA button: `{colors.ink}` fill, `{colors.surface}` text
- Stamp/alert: `{colors.accent-red}` — `#e43e39`

### Example Component Prompts

- "Build an Oatly-style editorial hero section: full-viewport-width cream background (`{colors.background}`), no padding on the outer container, large uppercase condensed headline in Margo Pro or Barlow Condensed at `{typography.display-hero}` size (72px, weight 700), pure black (`{colors.ink}`) text, left-aligned. Below the headline, a black pill button (`{components.button-primary}`: `{colors.ink}` background, `{colors.surface}` text, `{rounded.pill}`, 16px 24px padding). Separate from the next section with a 1px solid `{colors.border}` bottom border."

- "Build an Oatly product card: sharp-cornered (`{rounded.none}`), `{colors.surface}` white background, 1px solid `{colors.border}` black border on all sides, `box-shadow: 2px 2px 0px 0px {colors.shadow-soft}` — no blur. Top half: full-bleed product image (object-fit: cover). Bottom half: product name in `{typography.heading-sub}` (Margo Pro 27px, uppercase), short descriptor in `{typography.body}` (20px), and a green category badge (`{components.badge}`) using `{colors.primary-container}` background with black text. On hover, shadow grows to `4px 4px 0px 0px {colors.shadow-soft}`."

- "Build an Oatly-style CTA button: pill shape (`border-radius: {rounded.pill}`), `{colors.ink}` background, `{colors.surface}` white text, `{typography.button-ui}` (Margo Pro 20px, weight 400, uppercase), padding `16px 24px`. Hover state: background shifts to `{colors.ink-secondary}`. Focus state: `outline: 2px solid {colors.focus-ring}` with `outline-offset: 2px`. No shadow on button itself."

- "Build an Oatly editorial news/article grid: `{colors.background}` cream page background. 3-column grid on desktop (gap: 0 — no gap; borders instead). Each article tile: `{rounded.none}`, 1px solid `{colors.border}` border (adjacent borders collapse to a single line via `border-right` / `border-bottom` only). Image top half, text block bottom half with 16px padding. Category label as `{components.badge}` in `{colors.primary-container}`. Article headline in `{typography.heading-sub}` uppercase. 'NEW' badge variant uses `{components.badge-new}` in `{colors.accent-red}`."

- "Build an Oatly-style top navigation bar: full-width `{colors.surface}` white bar, 1px solid `{colors.border}` bottom border. Left: brand wordmark in `{typography.heading-section}` black. Center: nav links in `{typography.nav-link}` (16px, uppercase, letter-spacing 0.04em, `{colors.ink}`). Right: icon buttons (bag, account) in `{colors.ink}`. On hover, links use `{colors.hover-color}` (`#888888`) and a `translate-y: -2px` transition (0.3s ease). Bar stays at `z-index` above content with border, no box-shadow."

### Iteration Guide

1. **Start with the cream canvas.** Set `background: {colors.background}` (`#fffef6`) on the page root. This single decision makes everything feel Oatly before a single word is written.
2. **Add black borders as structure.** Every section, card, and panel should be delineated by `1px solid {colors.border}`. Borders replace whitespace — trust them.
3. **Type is uppercase and condensed.** Default every heading and label to `text-transform: uppercase` with Margo Pro or Barlow Condensed. Sentence-case body copy is the exception, not the rule.
4. **Apply the flat offset shadow.** Every interactive tile gets `box-shadow: 2px 2px 0px 0px {colors.shadow-soft}` — hard, black, no blur. On hover, grow the offset to 4px/4px.
5. **Mono color hierarchy.** Start with black on cream. Add `{colors.primary}` green only when a section needs explicit brand identity. Reach for `{colors.accent-red}` only for stamps and alerts — one accent at a time.
6. **Keep radius binary.** Structural containers are always `{rounded.none}`. Only pill buttons get `{rounded.pill}`. Introducing any mid-range radius instantly breaks the print-editorial mood.
7. **Don't design around photography — design with it.** Oatly images are full-bleed, uncropped, edge-to-edge in their container. The cream canvas and black borders frame the photography; never add additional chrome around images.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Oatly. Brand names and trademarks belong to their respective owners.