# Oatly Zine 크림빛 종이 위에 손으로 휘갈긴 검정 활자, 마커로 툭 찍은 파스텔 얼룩, 복사기로 긁어낸 콜라주 — 반짝임을 거부하는 손맛 가득한 반(反)기업 진(zine) 감성. - taxonomy: organic-natural · hand-drawn, zine, diy, collage, photocopy-texture, halftone, cream-paper, marker-accents, anti-corporate, playful, hard-shadow · complexity=medium - page types: landing, marketing, editorial - best for: 개성 강한 식음료·라이프스타일 브랜드 랜딩, 지속가능성·친환경 캠페인 사이트, 손맛과 인간미를 강조하는 반(反)기업 마케팅, 장난기 있는 제품 스토리텔링·룩북 페이지 - avoid for: 데이터 밀도 높은 엔터프라이즈 대시보드, 신뢰·차분함이 핵심인 금융·의료 서비스, 미니멀·절제된 럭셔리 브랜드, 장문 가독성이 최우선인 문서·독서 사이트 - provenance: website (Oatly | the Original Oat Drink Company | Oatly) — confidence: background_foreground=computed-css, background_warm_tint=vision-inferred, accent_values=computed-css, accent_role_assignment=vision-inferred, destructive=vision-inferred, dark_mode=vision-inferred, typography_metrics=computed-css, font_fallback=vision-inferred, radius=computed-css, shadows=computed-css, taxonomy=vision-inferred, motion=vision-inferred, layout=vision-inferred ## Design rules # 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. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Oatly Zine — theme.css (generated, do not edit) */ :root { --radius: 2px; --radius-selector: 9999px; --radius-field: 3px; --font-sans: "Margo", "Archivo", system-ui, -apple-system, sans-serif; --font-display: "Margo", "Archivo Black", "Anton", system-ui, sans-serif; --spacing: 8px; --shadow: 2px 2px 0px 0px color-mix(in oklab, oklch(0.180 0.006 60) 100%, transparent); --ks-display-weight: 900; --ks-display-tracking: -0.01em; --background: oklch(1.000 0.000 0.0); --foreground: oklch(0.180 0.006 60); --card: oklch(0.975 0.010 88); --card-foreground: oklch(0.180 0.006 60); --popover: oklch(0.985 0.008 88); --popover-foreground: oklch(0.180 0.006 60); --primary: oklch(0.180 0.006 60); --primary-foreground: oklch(0.985 0.008 88); --secondary: oklch(0.879 0.058 356.4); --secondary-foreground: oklch(0.180 0.006 60); --muted: oklch(0.950 0.008 88); --muted-foreground: oklch(0.400 0.010 60); --accent: oklch(0.879 0.106 78.6); --accent-foreground: oklch(0.180 0.006 60); --destructive: oklch(0.560 0.190 27); --destructive-foreground: oklch(0.985 0.008 88); --border: oklch(0.180 0.006 60); --input: oklch(0.180 0.006 60); --ring: oklch(0.879 0.106 78.6); --chart-1: oklch(0.879 0.106 78.6); --chart-2: oklch(0.879 0.058 356.4); --chart-3: oklch(0.445 0.102 143.6); --chart-4: oklch(0.796 0.051 218.8); --chart-5: oklch(0.650 0.087 318.9); } .dark { --background: oklch(0.210 0.010 70); --foreground: oklch(0.945 0.012 88); --card: oklch(0.260 0.012 70); --card-foreground: oklch(0.945 0.012 88); --popover: oklch(0.260 0.012 70); --popover-foreground: oklch(0.945 0.012 88); --primary: oklch(0.945 0.012 88); --primary-foreground: oklch(0.210 0.010 70); --secondary: oklch(0.720 0.075 356.4); --secondary-foreground: oklch(0.180 0.010 70); --muted: oklch(0.300 0.012 70); --muted-foreground: oklch(0.760 0.012 88); --accent: oklch(0.850 0.130 82); --accent-foreground: oklch(0.200 0.010 70); --destructive: oklch(0.620 0.190 27); --destructive-foreground: oklch(0.965 0.008 88); --border: oklch(0.945 0.012 88); --input: oklch(0.945 0.012 88); --ring: oklch(0.850 0.130 82); --chart-1: oklch(0.850 0.130 82); --chart-2: oklch(0.780 0.085 356.4); --chart-3: oklch(0.620 0.110 143.6); --chart-4: oklch(0.760 0.060 218.8); --chart-5: oklch(0.700 0.095 318.9); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html
News — Look Book Vol. 3

We exist to make it
easier to eat better.

Cream paper, black scrawl, marker splashes. A system that looks hand-pasted, not shipped.

Read more Find in store

01 — Paper

Cream, not white

Warm paper surfaces, thick black borders. The outline is the object.

02 — Stickers

Pasted on wonky

Everything tilts a degree or two, like it was cut out by hand.

03 — Texture

Photocopy hatch

Halftone and hatch fills add the grain of a zine, not a gradient.

``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/oatly.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only. - other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references. - single HTML/artifact: embed the theme.css block in a `