# Oatly Zine

## Overview
The iconic DIY / photocopy-zine aesthetic of the Oatly oat-milk brand, codified as a design system. Cream paper, heavy black hand-drawn type, and muted marker-splash accents share brutalist bones with neo-brutalism — thick borders, near-zero radius, hard offset shadows — but the soul is different: human, imperfect, and warm rather than loud and electric. Nothing is perfectly aligned; the character comes from deliberate wonk, halftone texture, and things pasted at a slight angle. If a layout feels too clean, the fix is a little rotation and a hand-scrawled underline — not more polish.

## Colors & Roles
Foundation is a near-white paper ground with warm cream tonal steps. The measured background is pure white (dominant area), so `background` stays white; the paper warmth lives in `card` / `muted` / `popover`, which take a faint warm tint (hue ~88) so surfaces read as cream against the white. `foreground`, `border`, and `input` are all a slightly warm near-black ink — the outline is the object. `primary` is that same ink (solid-black buttons with cream text, as measured). Accents are a **muted marker palette**, all grounded in measured hex: `accent` chalky yellow (#fdcf85), `secondary` soft pink (#f8c8d8), plus green (#2c622c), sky blue (#98c5d3), and mauve (#a67eb1) mapped to the chart roles. These are punctuation — badges, underlines, small blocks — not full-bleed fills. `destructive` is a marker red authored to fit (not in the measured palette). Use accents chalky, never fluorescent.

## Typography Rules
One wonky grotesque does almost everything. Oatly's proprietary **Margo** is a deliberately irregular, chunky sans used for both headlines and body (measured: H1 ~30px at heavy weight, body 16px/400, tight 1.3 line-height). Headlines are UPPERCASE, near-900 weight, large, with tight line-height (~1.0) — they shout. Body is plain 400 and set snug. Labels are uppercase, semibold, lightly tracked, used like stickers. Margo is commercial; the Google-Fonts fallback is **Archivo Black** for display and **Archivo** for body (swap display to **Shantell Sans** for a more hand-drawn wobble). Scale ratio ≈ 1.2.

## Layout Principles
Max content width ~1240px on a loose **collage grid**, not a strict column system. Compose like a scrapbook: bordered boxes, photos, hand captions, and sticker tags that slightly overlap and rotate. Section rhythm comes from an uppercase headline plus a marker underline or a sticker label. Whitespace is generous overall, but elements are allowed to cluster and overlap like clippings pasted on a page. Leave intentional misalignment; perfect symmetry kills it.

## Depth & Elevation
Nearly flat, with one signature move: a single hard **offset shadow, 2px 2px, zero blur, full-opacity black** — a cut-and-pasted sticker shadow. No soft shadows, no multi-layer elevation, no gradients. This is shallower and gentler than neo-brutalism's 4–6px pop-and-press. Optional halftone / hatch / photocopy grain adds texture, not depth.

## Shapes
Corners are sharp: boxes and cards at 0–2px radius, inputs at 3px. The only round shape is the full **pill** (9999px) used for tags and toggles. No large rounded cards.

## Component Stylings
- **Button**: 2px solid `border`, 3px radius, `primary` (ink) fill with cream label in heavy uppercase, padding 12px 20px, `2px 2px 0` shadow. Hover tilts ~1deg and grows the shadow to 4px. Focus = 2px offset ring (yellow). Disabled = opacity 0.5, no shadow.
- **Card**: 2px solid border, 0–2px radius, `2px 2px 0` shadow. Background cream `card` or a marker-accent block. Allow −2deg…2deg rotation for the collage feel. Padding 24–36px.
- **Input**: 2px solid border, 3px radius, cream fill. Focus = 2px yellow ring, border held.
- **Nav**: thick 2px bottom border. Logo/icons hand-drawn in feel, links uppercase; thin icon font for home / close (X).
- **Badge**: uppercase label, 2px border, pill or 3px radius, marker-accent background, rotated ~−2deg with a 2px hard shadow — a sticker.
- **Marker underline**: emphasize text with a thick, slightly crooked `accent`-colored underline drawn via `background` (a fat linear stroke) rather than a clean `border-bottom`.

## Motion
Casual and hand-moved. Hover nudges a sticker's tilt (rotate 1–2deg) or bumps the offset shadow; no springy parallax. Give elements slightly different rotation angles (−2deg…2deg) so the page reads as an imperfect collage. Durations 120–320ms, gentle easing with a soft overshoot for playful bits.

## Do's and Don'ts
**Do:** cream surfaces with thick black borders and a single 2px zero-blur offset shadow; shout headlines in heavy uppercase with tight leading; rotate stickers/cards −2deg…2deg; keep accents chalky and use them as badges/underlines/small blocks; add halftone or hatch texture for hand-made warmth.
**Don't:** use gradients, glass, or soft multi-layer shadows; fill the screen with fluorescent electric primaries (that's neo-brutalism); align everything perfectly; use 1px gray hairlines or big rounded corners.

## Responsive Behavior
The collage grid collapses to a single column on mobile; display type scales via `clamp()`. Rotations should be reduced (not removed) on small screens so tilted stickers don't clip the viewport edge. Keep the thick borders and hard shadow at all sizes — they carry the identity.

## Agent Prompt Guide
> Build this in the 'Oatly Zine' style: cream paper surfaces, thick 2px solid black borders, hard offset shadows with zero blur (2px 2px 0), heavy UPPERCASE wonky display type with tight line-height, muted photocopied marker accents (chalky yellow/pink/green/blue) as stickers, badges and hand-scrawled underlines, elements slightly rotated (−2deg…2deg) like a hand-pasted scrapbook with halftone texture — playful, human, anti-corporate, no gradients or neon.

## Known Gaps / Confidence
Extracted from the live URL, but the home page is highly visual/collage and the capture was partly obscured by a cookie modal over a gray hatch overlay, so several signals are honest inferences:
- **Background tint**: measured ground is pure white (weight 5.7M). Screenshots did **not** independently confirm "cream," so `background` is kept at measured white and the brand's paper warmth is expressed only through warm-tinted `card`/`muted`/`popover` steps (`vision-inferred`). "Oatly is cream" was deliberately not asserted as fact.
- **Accent values** are `computed-css` (real measured hex: #fdcf85, #f8c8d8, #2c622c, #98c5d3, #a67eb1); their **role assignment** (which is accent vs secondary vs chart) is `vision-inferred` — brand accents are low-frequency, so the screenshot's yellow "NEWS" chip drove the choice, not frequency.
- **Destructive red** is not in the measured palette → authored (`vision-inferred`).
- **Dark mode** has no native source (site is light-only) → the entire dark set is authored (`vision-inferred`): warm charcoal "kraft" ground, cream ink, inverted cream borders.
- **Font** Margo is commercial; Archivo Black / Archivo are the practical Google-Fonts fallbacks. Metrics (sizes/weights/line-height) are `computed-css`.
- **Family**: chosen `organic-natural` over `neo-brutalist`. Both share hard borders / near-zero radius / offset shadow, but this library's neo-brutalist is defined by *electric saturated primaries* and *4–6px pop-and-press*; Oatly's measured accents are muted/chalky and its measured shadow is a subtle 2px with no pop-and-press. The hand-drawn type, cream paper, and photocopy texture are the human/hand-made core → organic-natural.