---
title: "OLIPOP design system"
variant: extended
source: https://drinkolipop.com/
captured_at: 2026-10-12
theme: light
industry: food-beverage
generator: Design DNA (https://four.wiralomi.com/style/drinkolipop-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# OLIPOP · Design System

> Playful soda, styled with nostalgic color and charm

**Theme:** light · **Industry:** food-beverage · **Source:** https://drinkolipop.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

OLIPOP pairs bold, characterful display type with warm cream, botanical green, and flavor-led color blocks. The homepage moves between product discovery, ingredient education, lifestyle imagery, and shopping actions in a cheerful, editorial rhythm.

## North star

Let flavor-led imagery and nostalgic display typography stand out against calm cream surfaces, while botanical green anchors navigation and shopping actions.

## Overview

The visual system balances a warm, airy canvas with confident blocks of flavor color. White and cream establish calm shopping surfaces; dark botanical green carries navigation, headings, links, and many purchase actions. Pink and coral distinguish campaign and editorial bands, while the brighter green appears in prominent feature or footer areas. Large WindsorEF display lettering gives headings a playful, nostalgic silhouette, contrasted with compact, bold Ano body copy and clean navigation. The first-screen hero pairs a pink text panel with richly lit product photography, making the can the focal point while keeping the message and CTA legible. Subsequent sections alternate cream product browsing, illustrated or photographic education, green testimonial-style content, and split feature panels. Layouts are generous and modular rather than uniformly gridded: centered headings and product rows give way to split editorial compositions. Components stay mostly flat, with pill-shaped buttons and restrained outlines instead of heavy shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Botanical Pine | `#034638` | `--color-botanical-pine` | brand | Deep green for primary purchase buttons, navigation links, prominent text, and dark inverse surfaces. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | Main canvas and occasional button, footer, or text contrast; a neutral base rather than the defining campaign color. |
| Vanilla Cream | `#fff6ea` | `--color-vanilla-cream` | surface | Warm navigation and shopping bands, product sections, and light contrast surfaces. |
| Forest Ink | `#14433d` | `--color-forest-ink` | brand | Default headings, body text, navigation, link color, and measured hairline outlines. |
| Peach Fizz | `#ffb8b3` | `--color-peach-fizz` | accent | Soft coral-pink feature band, bringing a warm campaign accent to the editorial mix. |
| Garden Teal | `#008168` | `--color-garden-teal` | brand | Large green feature and footer surfaces, with occasional light text over the dark field. |
| Berry Mulberry | `#5a0c3c` | `--color-berry-mulberry` | accent | Announcement strip and occasional berry-toned heading or copy; also appears in flavor imagery. |
| Candy Magenta | `#e31a82` | `--color-candy-magenta` | accent | One prominent seasonal campaign CTA; use as a flavor-specific highlight, not a universal button color. |
| Lemon Pop | `#ffff7d` | `--color-lemon-pop` | accent | Bright Subscribe CTA accent, used sparingly against dark green. |
| Deep Spruce | `#0a3128` | `--color-deep-spruce` | semantic | Occasional darker text tone, including subtle copy; not a dominant surface color. |
| Bubblegum Pink | `#ff9ec8` | `--color-bubblegum-pink` | accent | Measured editorial card surface and a strong flavor-led pink visible in campaign artwork. |
| Charcoal Note | `#3a3a3a` | `--color-charcoal-note` | semantic | Sparse navigation text from measured CSS; secondary to the page’s forest-green text system. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Clean White) · `--color-surface` → `#fff6ea` (Vanilla Cream) · `--color-surface-2` → `#ffb8b3` (Peach Fizz) · `--color-surface-3` → `#008168` (Garden Teal) · `--color-surface-4` → `#034638` (Botanical Pine) · `--color-text` → `#14433d` (Forest Ink) · `--color-text-muted` → `#fff6ea` (Vanilla Cream) · `--color-text-subtle` → `#ffffff` (Clean White) · `--color-border` → `#14433d` (Forest Ink) · `--color-accent` → `#034638` (Botanical Pine) · `--color-accent-2` → `#ffb8b3` (Peach Fizz) · `--color-accent-3` → `#008168` (Garden Teal) · `--color-on-accent` → `#ffffff` (Clean White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#14433d` | `#ffffff` | 11.05:1 | AAA |
| `#14433d` | `#fff6ea` | 10.33:1 | AAA |
| `#14433d` | `#ffb8b3` | 6.72:1 | AA |
| `#14433d` | `#008168` | 2.28:1 | fail |
| `#fff6ea` | `#ffffff` | 1.07:1 | fail |
| `#fff6ea` | `#ffb8b3` | 1.54:1 | fail |
| `#fff6ea` | `#008168` | 4.52:1 | AA |
| `#ffffff` | `#fff6ea` | 1.07:1 | fail |
| `#ffffff` | `#ffb8b3` | 1.65:1 | fail |
| `#ffffff` | `#008168` | 4.84:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Ano | `--font-body` | webfont | 400, 700, 600 | Body copy, navigation, buttons, captions, and links | Nunito Sans |
| WindsorEF | `--font-display` | webfont | 800, 900 | Display headlines and section headings | Fraunces |

- **Ano:** Measured weights 400, 600, and 700; rounded, compact sans forms. Keep UI and body copy readable and mostly sentence case.
- **WindsorEF:** Measured heavy weights 800–900; use expressive, rounded serif display shapes, tight leading, and natural case.

### Type scale — Augmented Fourth (ratio ≈ 1.413, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 90px | 800 | 0.95 | 0 | — | WindsorEF | Oversized campaign and hero display headlines. |
| h1 | 54px | 800 | 1 | 0 | — | WindsorEF | Primary hero and major page headings. |
| h2 | 52px | 800 | 1 | 0 | — | WindsorEF | Section titles such as shopping and brand-story headings. |
| h3 | 48px | 800 | 1.1 | 0 | — | WindsorEF | Feature and editorial subsection headings. |
| h4 | 32px | 900 | 1.1 | 0 | — | WindsorEF | Smaller bold editorial or product-line headings. |
| body | 16px | 700 | 1.4 | 0 | — | Ano | Product descriptions, brand explanations, and general copy. |
| caption | 14px | 700 | 1.8 | 0 | — | Ano | Small supporting notes, product details, and utility text. |
| button | 14px | 700 | 1.8 | 0 | — | Ano | Purchase, subscription, and section CTA labels. |
| nav | 16px | 400 | 1.5 | 0 | — | Ano | Header and footer navigation links. |
| link | 16px | 700 | 1.4 | 0 | — | Ano | Inline product, collection, and informational links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 3, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40 px.
- Section rhythm 86px · element gap 6px · card padding 70px · max content width —.

The page is a long, comfortable-density storefront with full-width color and image bands, alternating with centered shopping areas. The opening hero uses a two-column split: text on pink and product photography beside it. Product discovery uses a centered heading, compact category pills, and a horizontal product row. Educational sections switch to centered copy or two-column editorial splits. Section boundaries are created by background changes and imagery rather than cards or heavy dividers. No measured maximum content width is provided; preserve the broad, spacious compositions visible in the screenshots.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · media `16px` · link `16px` · xs `16px` · pill `9999px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `hairline-2` (link, button): `rgb(20, 67, 61) 0px 0px 0px 1.5px`
- Motion: standard transition `0.25s ease-in-out` on interactive elements.

The design is predominantly flat: color fields, photographs, and spacing provide separation rather than stacked shadows. Buttons are pill-shaped and typically filled with deep green, while links and small badges can use a measured forest-ink outline. Avoid adding strong card shadows or generic floating panels; use rounded media corners where appropriate.

## Imagery

Use polished, colorful can photography as the primary product proof, framed in flavor-specific scenes with fruit, condensation, and warm or cool atmospheric light. Lifestyle photography appears in rounded or circular editorial framing. Supporting illustrations and decorative fruit or sparkles add playful character, especially in store and feature areas. Treat imagery as bold, edge-to-edge or panel-contained content; it is not a subdued background texture.

## Components

### Announcement bar

A narrow dark berry strip above the cream navigation, with centered promotional copy and an underlined shopping link.

### Primary navigation

Cream header with forest-green text links, centered OLIPOP mark, and compact store, account, and cart utilities.

### Hero campaign panel

Split pink-and-photo composition with a large WindsorEF headline, centered supporting copy, and a rounded flavor-specific CTA.

### Product collection row

Centered collection heading and compact category pills above a horizontal lineup of cans, flavor labels, and add-to-cart actions.

### Pill CTA

Fully rounded button shape; common purchase buttons use #034638 with white text, while campaign actions may use a measured flavor accent.

### Editorial feature band

Full-width colored or photographic section pairing a bold display heading and short copy with product, ingredient, or lifestyle imagery.

### Newsletter footer

Dark green footer with a prominent signup prompt, rounded white email field, bright Subscribe action, social links, and grouped utility navigation.

### Measured component styles

- **Primary button** (“Add 12 Pack”): background #034638 · text #ffffff · radius 50px · padding 3px 20px 1px 20px · 700 14px Ano · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Secondary button** (“Shop Pomegranate Sparkle”): background #e31a82 · text #fff6ea · radius 50px · padding 15px 32px · 700 18px Ano
- **Link** (“Caramel Apple”): transparent background · text #034638 · radius 0px · padding 0px · 700 16px Ano
- **Input**: background #ffffff · text #034638 · radius 48px · padding 14px 20px · 700 16px Ano
- **Card** (“Come sip with us Pomegranate Sparkle lay”): background #ff9ec8 · text #14433d · radius 0px · padding 60px 80px · 400 16px Ano
- **Navigation item** (“Shop Learn Subscribe Find a store Log in”): transparent background · text #14433d · radius 0px · padding 0px · 400 16px Ano

## Do

- Use #14433d or #034638 for primary text and core shopping actions.
- Reserve #fff6ea for warm, calm shopping and navigation surfaces.
- Give flavor campaigns their own focused pink or fruit-colored field.
- Pair heavy WindsorEF headings with legible Ano supporting copy.
- Use pill-shaped CTAs and clearly named shopping actions.
- Alternate product rows with editorial and educational section formats.

## Don't

- Do not make every section the same white background.
- Do not use campaign magenta or lemon yellow as universal CTA colors.
- Do not bury product imagery beneath decorative overlays.
- Do not replace the expressive display face with generic geometric headings.
- Do not add heavy shadows or dense bordered card grids.
- Do not invent extra colors, dimensions, spacing, or border radii.

## Agent prompt

Build a new OLIPOP-style storefront page with a warm, playful food-and-beverage identity. Use Vanilla Cream (#fff6ea) and Clean White (#ffffff) as calm surfaces, Forest Ink (#14433d) for core text, and Botanical Pine (#034638) for navigation links and primary pill CTAs. Use Peach Fizz (#ffb8b3), Garden Teal (#008168), and Bubblegum Pink (#ff9ec8) as deliberate editorial bands, not decoration everywhere. Set expressive heavy WindsorEF-like display headings against readable, rounded Ano-like sans copy. Compose broad full-width sections with generous breathing room, centered product discovery, and occasional split image-and-copy features. Make product cans and fruit-led photography visually prominent; use illustrations sparingly for warmth. Keep components flat, with measured pill buttons and light outlines rather than heavy shadows. Preserve a clear path from campaign discovery to product browsing and signup.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Split hero: pink text panel beside a full-height seasonal product photograph. | Flavor story, Primary shopping CTA | Large display headline, Centered copy, Pink block, Pill button |
| 2 | product-grid | Centered heading and filter pills above a multi-column product lineup. | Collection filtering, Quick add to cart | Product cards, Flavor labels, Fiber badges, Rounded actions |
| 3 | feature-grid | Single-column centered content over a full-width illustrated or photographic band. | Product education, Find-your-flavor CTA | Centered heading, Short body copy, Dark green button |
| 4 | testimonials | Wide green editorial panel with centered flavor labels and a bold quote-style statement. | Flavor selection, Social proof | Green field, Decorative accents, Centered display copy |
| 5 | feature-grid | Cream section with a centered heading and two side-by-side image-led options. | Compare product lines, Shop by formula | Paired media cards, Fiber badges, Pill CTAs |
| 6 | feature-split | Coral feature band with copy on one side and rounded lifestyle imagery on the other. | Ingredient education, Learn-more CTA | Split layout, Bold heading, Circular media |
| 7 | logo-cloud | Centered store availability message, retailer marks, and locator CTA with decorative fruit around the edges. | Retailer discovery, Store locator | Retailer logos, Illustrated fruit, Centered pill button |

## Source CSS custom properties (selected)

```css
--font-weight-body--bold: 700;
--font-weight-body--bolder: 700;
--font-stack-header: Helvetica, Arial, sans-serif;
--font-style-header: normal;
--font-weight-header: 700;
--font-stack-body: Helvetica, Arial, sans-serif;
--font-style-body: normal;
--font-weight-body: 400;
--font-stack-cart-notification: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-size-mobile-input: 16px;
--font-size-base: 15;
--font-size-header: 26;
--font-h1-desktop: 35;
--font-h1-mobile: 32;
--font-h2-desktop: 20;
--font-h2-mobile: 18;
--font-h3-mobile: 20;
--font-h4-desktop: 17;
--font-h4-mobile: 15;
--font-h4-min-height-mobile: 11;
--font-h5-desktop: 15;
--font-h5-mobile: 13;
--font-h6-desktop: 14;
--font-h6-mobile: 12;
--font-mega-title-large-desktop: 65;
--font-rich-text-large: 17;
--font-rich-text-small: 13;
--color-text: #3a3a3a;
--color-text-shadow: rgba(0,0,0,0.4);
--color-body-text: #333232;
--color-sale-text: #fa4545;
--color-small-button-text-border: #3a3a3a;
--color-text-field: rgba(0,0,0,0);
--color-text-field-text: #000000;
--color-navigation-text: #3a3a3a;
--color-btn-primary: #3a3a3a;
--color-btn-primary-darken: #212121;
--color-btn-primary-transparent: rgba(58, 58, 58, 0.8);
--color-btn-primary-text: #ffffff;
--color-body: #ffffff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/drinkolipop-com