Oatly

# Oatly — Style Reference
> Notebook paper zine

**Theme:** light

**Site:** https://oatly.com

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 |
|------|------|------|------|
| 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. |
| 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. |

## Tokens — Typography

### Margo Pro
- **Substitute:** Bebas Neue
- **Weights:** 400
- **Sizes:** 14px, 16px, 18px, 20px, 24px, 32px
- **Line height:** 1, 1.2, 1.3
- **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.

## Tokens — Type Scale

Minor Third (1.2) from 14px base.

| Role | Size | Line height | Letter spacing |
|------|------|------|------|
| body | 14px | 1.2 | — |
| heading-sm | 18px | 1.2 | — |
| heading | 20px | 1.2 | — |
| heading-lg | 24px | 1.2 | — |
| display | 32px | 1.2 | — |

## Tokens — Spacing

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

## Tokens — Radius

- **Buttons:** 0px
- **Cards:** 0px
- **pills:** 9999px

## Tokens — Elevation

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

## 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.

## 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.

## Components

### Content Cards with Badges

### Button Group

### Mission Statement Block

### Monochrome Outline Button
*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
*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
*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
*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
*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
*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.

## Guidelines

### 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.

## 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.