Oatly

# Oatly — Style Reference
> Notebook paper zine

**Theme:** light

This design evokes a feeling of quirky, approachable earnestness, like a carefully crafted zine or an indie newsletter. The dominant #fffef6 'Notebook Paper' background with a subtle grid pattern sets a deliberately lo-fi, tactile mood. Typography leans into a blocky, full-caps aesthetic that feels both nostalgic and direct. Occasional hand-drawn stamps and a limited, earthy accent palette reinforce a friendly, unpolished brand identity, making the corporate feel personal.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Notebook Paper | `#fffef6` | `--color-notebook-paper` | Primary page background, expansive surfaces – evokes off-white recycled paper. |
| Ink Black | `#000000` | `--color-ink-black` | All text (headings, body, links), borders, solid button backgrounds, card shadows – simulates stark black ink on paper. |
| Pure White | `#ffffff` | `--color-pure-white` | Text on dark buttons, occasional button backgrounds. |
| Pale Gray | `#c6c6c6` | `--color-pale-gray` | Subtle background for UI elements like pagination dots. |
| Sunrise Yellow | `#fdcf85` | `--color-sunrise-yellow` | Accent badge background color – adds a warm, inviting highlight. |
| Blush Pink | `#f8c8d8` | `--color-blush-pink` | Accent badge background color – provides a soft, playful highlight. |

## Tokens — Typography

### Margo Pro — The primary typeface for all content. Its consistent use in uppercase gives a direct, almost shouted, yet friendly tone. Weights are limited to 400 for consistency. · `--font-margo-pro`
- **Substitute:** Bebas Neue
- **Weights:** 400
- **Sizes:** 14px, 16px, 18px, 20px, 24px, 32px
- **Line height:** 1.00, 1.20, 1.30
- **Letter spacing:** normal
- **Role:** The primary typeface for all content. Its consistent use in uppercase gives a direct, almost shouted, yet friendly tone. Weights are limited to 400 for consistency.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body | 14px | 1.2 | — | `--text-body` |
| heading-sm | 18px | 1.2 | — | `--text-heading-sm` |
| heading | 20px | 1.2 | — | `--text-heading` |
| heading-lg | 24px | 1.2 | — | `--text-heading-lg` |
| display | 32px | 1.2 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** compact

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 6 | 6px | `--spacing-6` |
| 8 | 8px | `--spacing-8` |
| 11 | 11px | `--spacing-11` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 25 | 25px | `--spacing-25` |
| 44 | 44px | `--spacing-44` |
| 229 | 229px | `--spacing-229` |

### Border Radius

| Element | Value |
|---------|-------|
| cards | 0px |
| pills | 9999px |
| buttons | 0px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| subtle | `rgb(0, 0, 0) 2px 2px 0px 0px` | `--shadow-subtle` |

### Layout

- **Section gap:** 44px
- **Card padding:** 0px
- **Element gap:** 8px

## Components

### Monochrome Outline Button
**Role:** Primary action button, default interactive element

Background: transparent (rgba(0,0,0,0)), Text: Ink Black (#000000), Border: 1px Ink Black (#000000), Padding: 16px. Radius: 0px. Text is 'Margo Pro' at 14px weight 400.

### Filled Black Button
**Role:** Strong call to action

Background: Ink Black (#000000), Text: Pure White (#ffffff), Padding: 24px. Radius: 0px. Text is 'Margo Pro' at 20px weight 400.

### Pill Button
**Role:** Specific, distinct call to action

Background: Ink Black (#000000), Text: Pure White (#ffffff), Padding: 16px 24px. Radius: 9999px. Text is 'Margo Pro' at 14px weight 400.

### Image Card with Shadow
**Role:** Content card for visual entries with slight lift

Background: transparent (rgba(0,0,0,0)), Border radius: 0px, Shadow: 2px 2px 0px 0px Ink Black (#000000).

### News Badge
**Role:** Categorization tag for news content

Background: Sunrise Yellow (#fdcf85), Text: Ink Black (#000000), Padding: 1.6px 8px. Radius: 0px. Text is 'Margo Pro' at 14px weight 400.

### Tastebuds Badge
**Role:** Categorization tag for specific interactive content

Background: Blush Pink (#f8c8d8), Text: Ink Black (#000000), Padding: 1.6px 8px. Radius: 0px. Text is 'Margo Pro' at 14px weight 400.

## Do's and Don'ts

### Do
- Maintain the all-caps 'Margo Pro' typography across all headings and primary text to evoke the brand's distinct voice.
- Utilize the #fffef6 'Notebook Paper' color for all major page backgrounds.
- Apply the 2px 2px 0px 0px #000000 shadow to interactive cards for a subtle, illustrative lift.
- Keep all borders sharp with a 0px radius, only using 9999px radius for specific pill-shaped buttons.
- Use Ink Black (#000000) for all text and UI outlines to maximize contrast against the light background.
- Employ the 44px vertical spacing between major sections for a clean, regular rhythm.

### Don't
- Avoid gradients; the design relies on solid colors and sharp contrasts.
- Do not introduce rounded corners (besides the 9999px pill variant) into any UI elements; maintain 0px radius for a consistent angular feel.
- Do not use any secondary brand colors for body text; reserve accent colors exclusively for badges.
- Avoid subtle grayscale variations for text; use pure Ink Black (#000000) for all primary text.
- Do not use letter-spacing other than 'normal' for 'Margo Pro' to preserve its intended blocky appearance.
- Avoid drop shadows for general UI elements; the design primarily uses a flat aesthetic with specific 2px 2px 0px 0px offset shadows.

## Elevation

- **Card:** `2px 2px 0px 0px #000000`

## Imagery

Imagery style is mixed, featuring both product photography and graphic elements. Product photography focuses on tight crops of beverages, often in transparent or visually interesting containers, implying a focus on the product's essence rather than lifestyle. Photography is generally light-toned and contained within sharp-edged frames. Illustrations are sparse but impactful, like the hand-drawn-style stamp, conveying an authentic, almost DIY, feel. The overall role of visuals is a blend of product showcase and decorative elements to enhance the zine-like narrative, rather than heavy explanatory graphics. Image density is moderate, balanced with text blocks.

## Layout

The page primarily uses a max-width contained layout, though the exact `pageMaxWidth` is not explicitly defined, it maintains a consistent content column. The hero features a two-column split, with a large all-caps headline on the left and a placeholder image area on the right. Below the hero, content is structured into a grid of card-like elements, implying a flexible and responsive arrangement for showcasing articles or products. Vertical sections are demarcated by consistent 44px spacing. The overall impression is a structured yet somewhat unconventional layout, avoiding typical full-bleed hero banners for a more editorial, 'block-based' composition.

## Agent Prompt Guide

Quick Color Reference:
- Text: #000000 (Ink Black)
- Background: #fffef6 (Notebook Paper)
- CTA (Filled Button): #000000 (Ink Black)
- CTA Text (Filled Button): #ffffff (Pure White)
- Accent (News Badge): #fdcf85 (Sunrise Yellow)

Example Component Prompts:
1. Create a `Filled Black Button`: background #000000, text #ffffff. Text is 'Margo Pro' 20px, weight 400. Padding 24px. Radius 0px.
2. Create a `News Badge`: background #fdcf85, text #000000. Text is 'Margo Pro' 14px, weight 400. Padding 1.6px 8px. Radius 0px.
3. Create an `Image Card`: background transparent. No border. Shadow 2px 2px 0px 0px #000000. Radius 0px.
4. Design a `Hero Headline`: Text 'Margo Pro' 32px, weight 400 in #000000. Max width is around 50% of the viewport width. Use all caps for the text.

## Similar Brands

- **Mailchimp (older branding)** — Uses a similarly quirky, illustration-heavy, and slightly off-kilter design with strong typographic personalities.
- **Chobani (some campaigns)** — Employs an earnest, direct tone with custom typography and a focus on product honesty rather than slickness.
- **AIGA Design Archives** — Features a structured grid mixed with playful typographic elements and an overall editorial, content-focused feel.
- **Magic Spoon Cereal** — Leverages primary colors, custom blocky typography, and a slightly retro, playful aesthetic to stand out.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-notebook-paper: #fffef6;
  --color-ink-black: #000000;
  --color-pure-white: #ffffff;
  --color-pale-gray: #c6c6c6;
  --color-sunrise-yellow: #fdcf85;
  --color-blush-pink: #f8c8d8;

  /* Typography — Font Families */
  --font-margo-pro: 'Margo Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 14px;
  --leading-body: 1.2;
  --text-heading-sm: 18px;
  --leading-heading-sm: 1.2;
  --text-heading: 20px;
  --leading-heading: 1.2;
  --text-heading-lg: 24px;
  --leading-heading-lg: 1.2;
  --text-display: 32px;
  --leading-display: 1.2;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-11: 11px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-25: 25px;
  --spacing-44: 44px;
  --spacing-229: 229px;

  /* Layout */
  --section-gap: 44px;
  --card-padding: 0px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-full: 9999px;

  /* Named Radii */
  --radius-cards: 0px;
  --radius-pills: 9999px;
  --radius-buttons: 0px;

  /* Shadows */
  --shadow-subtle: rgb(0, 0, 0) 2px 2px 0px 0px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-notebook-paper: #fffef6;
  --color-ink-black: #000000;
  --color-pure-white: #ffffff;
  --color-pale-gray: #c6c6c6;
  --color-sunrise-yellow: #fdcf85;
  --color-blush-pink: #f8c8d8;

  /* Typography */
  --font-margo-pro: 'Margo Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 14px;
  --leading-body: 1.2;
  --text-heading-sm: 18px;
  --leading-heading-sm: 1.2;
  --text-heading: 20px;
  --leading-heading: 1.2;
  --text-heading-lg: 24px;
  --leading-heading-lg: 1.2;
  --text-display: 32px;
  --leading-display: 1.2;

  /* Spacing */
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-11: 11px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-25: 25px;
  --spacing-44: 44px;
  --spacing-229: 229px;

  /* Border Radius */
  --radius-full: 9999px;

  /* Shadows */
  --shadow-subtle: rgb(0, 0, 0) 2px 2px 0px 0px;
}
```