Oatly

Overview

Oatly is a plant-based food company that transforms oat-based products into a lifestyle statement, pioneering the oat drink category since 1994. The brand operates within a 'Irreverent Minimalism' aesthetic—a visual language that pairs stark black-and-white typography with unexpected pops of color (sage green, soft pastels, and warm yellows) to communicate authenticity without pretension. The UI evokes clarity, directness, and a slightly cheeky confidence: users feel they're joining a movement, not just buying a beverage.

Oatly's voice is conversational, opinionated, and unapologetically honest. The brand speaks in short, punchy sentences that avoid corporate jargon; it uses humor to disarm skepticism and builds trust through transparency about sustainability and ingredient sourcing. Example: 'We exist to make it possible for people to live a life that's good for them and better for the planet, without recklessness.' The tone is never breathless or oversold—it's matter-of-fact, even when discussing bold claims.

Colors

The Oatly color system centers on a deep sage green (#2C622C) as the primary brand accent—used for CTAs, focus states, and key interactive elements. This green signals growth, sustainability, and natural authenticity without the cliché of bright lime. Secondary colors include a soft blue (#98c5D3) for supporting UI elements and data visualization, a warm yellow (#FDCF85) for highlights and tertiary CTAs, and a muted pink (#F8C8D8) for gentle emphasis. The surface stack is deliberately minimal: white (#FFFFFF) as the dominant background, with light grays (#F6F6F6, #EEEEEE) for container separation and darker grays (#888888, #444444) for secondary text and borders. Error states use a clear red (#E43E39) to signal warnings without ambiguity. All interactive elements transition smoothly (300ms

Typography

The type system pairs Bjorn Serif Pro for headlines and display text with Margo Pro Regular for body and UI labels, creating a sophisticated yet approachable contrast. Display and headline levels (60px–40px) use the serif for authority and distinctiveness, while body text (16px–18px) in sans-serif ensures legibility and a modern feel. Font weights are deliberately constrained: 400 for body, 600 for titles, 700 for display, and 900 for button labels (uppercase). Letter-spacing is minimal except on labels (0.01em–0.05em) to maintain tightness and energy. All text over busy backgrounds or in small sizes (12px–14px) should receive a subtle text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to ensure contrast. Line-height is set generously (1.5–1.7x font size) to support readability and breathing room,

Layout

The page layout uses a 12-column grid with a max-width of 1200px, centered on the viewport with 24px gutters on desktop and 12px on mobile. Sections are separated by 40px (lg spacing) vertically, creating a rhythm that feels spacious without being wasteful. The container model is fluid up to 1200px, then fixed, allowing the design to breathe on large screens while maintaining control. White-space is treated as a design element: generous padding (24px–40px) around content blocks, 12px between related elements, and 4px for micro-spacing within components. The spacing scale is semantic: 'unit' (8px) is the base, 'sm' (12px) for tight grouping, 'md' (24px) for section separation, 'lg' (40px) for major breaks, and 'xl' (64px) for hero-to-content transitions. This hierarchy ensures visual clarit

Elevation & Depth

Depth in Oatly's design is achieved through subtle shadows and layering, not through dramatic contrast. The elevation system uses three levels: Level 1 (base, no shadow) for flat surfaces like body backgrounds; Level 2 (md shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) for cards, modals, and interactive containers; Level 3 (lg shadow: 0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements like dropdowns and overlays. Shadows are soft and spread (no blur-radius under 8px), creating a sense of gentle lift rather than harsh separation. Borders (1px solid #CCCCCC or #444444 depending on context) provide ad

Shapes

The shape philosophy is 'Architectural Precision'—clean, functional, with minimal ornamentation. Border-radius is used sparingly and intentionally: buttons and inputs use 5px (DEFAULT) for a slightly softened corner that feels modern without being playful; cards use 5px for consistency; toggles and badges use 9999px (full) for pill-shaped elements that signal completeness and toggled states. The 2px radius (sm) is reserved for very small UI elements like checkboxes or micro-interactions. This constraint—avoiding rounded corners on large surfaces—maintains the brand's no-nonsense aesthetic whil

Components

Action Elements Buttons are the primary interactive element and come in three variants. Primary buttons use a solid sage green background (#2C622C) with white text, 12px horizontal padding, 44px height, and uppercase label-md typography (900 weight). On hover, the text color shifts to light gray (#DDDDDD) while the background remains green, creating a subtle feedback without jarring color shift. Secondary buttons use a light gray background (#F6F6F6) with dark text, same padding and height, and transition to a darker gray (#E8E8E8) on hover. Ghost buttons are transparent with a 1px green border, text in green, and fill with green background on hover. All buttons use a 300ms ease transition for state changes and include a 3px focus ring at rgba(44, 98, 44, 0.1) for keyboard navigation.

Do's and Don'ts

**Do**

• Do use the sage green (#2C622C) exclusively for primary CTAs and focus states—it's the brand's signature and should never be diluted or overused.
• Do maintain 24px gutters and 40px section spacing to preserve the generous, breathing layout that defines Oatly's visual calm.
• Do pair Bjorn Serif Pro headlines with Margo Pro Regular body text—this contrast is core to the brand's sophisticated-yet-approachable voice.
• Do use 300ms ease transitions on all interactive state changes (hover, focus, active) to feel responsive without feeling rushed.
• Do apply 1px borders in #444444 or #CCCCCC to all cards and containers—they provide crisp definition without heaviness.

**Don't**

• Don't use rounded corners larger than 5px on cards or containers—it dilutes the architectural precision that defines the brand.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12)—Oatly's elevation is subtle and functional, not dramatic.
• Don't mix serif and sans-serif within a single text block—Bjorn Serif is for headlines, Margo Pro Regular is for body; never reverse this.
• Don't use the secondary colors (blue, yellow, pink) as primary CTAs—they're supporting accents only; green is the only primary interactive color.
• Don't reduce padding below 12px or increase spacing above 64px without explicit design rationale—the spacing scale is intentional and should be respected.