CURATED · OPEN · FREE

Oatly

Oatly uses a playful, sketch-like aesthetic with a limited palette and expressive typography to convey a quirky, transparent brand personality.

brandfoodquirky

↓ Download design system (0 MB)Open in OpenDesign

Visit: https://www.oatly.com

📦 Browse pack contents →

Identity DNA

PlayfulIronicDisruptiveAnti-DesignDirect

A rebellious, sketchy brand that feels like a doodle on a napkin.

Color

#000000Ink

#F5F5F5BG

rgba(0,0,0,1)Line

High-contrast black-and-white with a minimal, functional grid.

Typography

transitional-serif · sans-serif · monospaced

display32px · 400
body16px · 400

Use a transitional serif for primary headlines. · Use a sans-serif for body text. · Use a monospaced font for labels or UI elements.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Consistent 4px base with generous whitespace.

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 999px

1px solid black

2px 2px 0px 0px rgb(0, 0, 0)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Grid-based layout with a mix of centered and scattered elements.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Hover states with a 0.3s translate transition.

Elements shift slightly on hover. · N/A

Components

button Simple, outlined, with a 2px black drop shadow.
card White background with a 1px black border and a 2px black drop shadow.
chip N/A
input N/A
hero Centered headline with scattered, interactive-looking elements.

Voice & Don'ts

Tone Playful, direct, and slightly irreverent.
Headlines Conversational and often humorous.
CTAs Simple and action-oriented.

Don't use a complex color palette — the screenshot shows a strict black-and-white scheme.
Don't use decorative serif fonts — the screenshot shows a mix of clean sans-serif and a single transitional serif.
Don't use rounded corners on UI elements — the screenshot shows sharp, square edges.
Don't use subtle shadows — the screenshot shows bold, hard-edged 2px black drop shadows.
Don't use a busy background — the screenshot shows a clean, minimal grid on a white/off-white background.
Don't use intricate icons — the screenshot uses simple, hand-drawn or flat SVG-style icons.
Avoid: Corporate jargon
Avoid: Overly formal language
Avoid: Cluttered layouts

Inside the pack — real screenshots

Oatly — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Oatly is a disruptive, playful brand that uses a sketchy, hand-drawn aesthetic. The design relies on a stark black-and-white color palette (#000000, #FFFFFF, #F5F5F5) and a mix of serif, sans-serif, and monospaced typography. The layout is clean and grid-based but feels spontaneous. Critical donts: avoid complex color schemes, rounded corners on primary UI, and overly polished or corporate visuals. Embrace the raw, illustrative style with hard-edged shadows and bold outlines.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko