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

# Dopper · Design System

> Refill-first storytelling in a vivid, optimistic frame.

**Theme:** light · **Industry:** ecommerce · **Source:** https://www.dopper.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._

Dopper pairs a warm, cream-colored canvas with oversized typography, vibrant product cards, and human-centered lifestyle imagery. The homepage moves between brand storytelling, product discovery, impact content, and practical tools without losing its playful, refill-focused identity.

## North star

Keep the warm editorial canvas calm, then let vivid product color and real-life photography carry the story.

## Overview

A warm off-white canvas (#fcfaf2) anchors the page, giving vivid product colors and full-bleed photography room to stand out. The palette alternates between electric blue, teal, soft lavender, pale blue, and yellow product fields; these are best treated as distinct collection or campaign blocks rather than a continuous gradient. Black and deep navy handle most text and outlines, while pale cream is used for contrast on colored cards and over photography. Typography combines Dopper’s rounded display face for prominent brand headlines with Gilroy for headings, body copy, and controls. A broad, responsive editorial grid alternates image-and-copy splits with compact horizontal product-card rows. Sections have generous visual breathing space against the warm canvas, while card content stays compact. Rounded media and buttons soften the geometry. Photography is candid and colorful, often showing bottles in use, with occasional graphic imagery inside campaign cards.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Navy | `#000f2e` | `--color-midnight-navy` | brand | Deep text, outlines, and dark call-to-action fills; provides a cooler alternative to black. |
| Refill Cream | `#fcfaf2` | `--color-refill-cream` | brand | Dominant page canvas and light backing for content, cards, and readable image overlays. |
| True Ink | `#000000` | `--color-true-ink` | neutral | Primary headings and body text across the light sections. |
| Electric Blue | `#0067e5` | `--color-electric-blue` | accent | Bright product-card surface, prominent links, and the blue end of the measured gradient. |
| Butter Cream | `#f6ecc8` | `--color-butter-cream` | semantic | Light text and headings on blue or teal cards; also appears as a warm campaign surface. |
| Soft Periwinkle | `#d4d5e6` | `--color-soft-periwinkle` | surface | Lavender-toned band behind the corporate gifting feature. |
| Clear Cornflower | `#4183d9` | `--color-clear-cornflower` | accent | Lighter blue end of the measured blue gradient; use as a supporting accent. |
| Refill Teal | `#116973` | `--color-refill-teal` | surface | Teal product-card surface, especially for Travel Mug collection cards. |
| Soft Sky | `#8ab1e6` | `--color-soft-sky` | surface | Pale blue product-card surface, seen as a collection color block. |
| Sunshine Yellow | `#fed200` | `--color-sunshine-yellow` | accent | Strong yellow product-card background; treat as a collection or product accent, not a page-wide color. |

### Semantic aliases

`--color-canvas` → `#fcfaf2` (Refill Cream) · `--color-surface` → `#d4d5e6` (Soft Periwinkle) · `--color-surface-2` → `#116973` (Refill Teal) · `--color-surface-3` → `#8ab1e6` (Soft Sky) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#f6ecc8` (Butter Cream) · `--color-text-subtle` → `#000f2e` (Midnight Navy) · `--color-border` → `#000f2e` (Midnight Navy) · `--color-accent` → `#0067e5` (Electric Blue) · `--color-accent-2` → `#4183d9` (Clear Cornflower) · `--color-accent-3` → `#116973` (Refill Teal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fcfaf2` | 20.1:1 | AAA |
| `#000000` | `#d4d5e6` | 14.46:1 | AAA |
| `#000000` | `#116973` | 3.29:1 | AA-large |
| `#000000` | `#8ab1e6` | 9.51:1 | AAA |
| `#f6ecc8` | `#fcfaf2` | 1.13:1 | fail |
| `#f6ecc8` | `#d4d5e6` | 1.23:1 | fail |
| `#f6ecc8` | `#116973` | 5.39:1 | AA |
| `#f6ecc8` | `#8ab1e6` | 1.87:1 | fail |
| `#000f2e` | `#fcfaf2` | 18.14:1 | AAA |
| `#000f2e` | `#d4d5e6` | 13.05:1 | AAA |

### Gradients

- `linear-gradient(90deg, rgb(0, 103, 229) 0px, rgb(65, 131, 217) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Gilroy | `--font-body` | webfont | 400, 600, 700 | Headings, body copy, and button labels. | Montserrat |
| Dopper | `--font-display` | webfont | 400 | Display headlines and brand-forward hero lettering. | Baloo 2 |

- **Dopper:** Rounded display character; measured at regular weight, with large, tightly led headline styling.
- **Gilroy:** Measured weights 400, 600, and 700; use clear, rounded geometric forms and natural casing.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 1 | 0 | — | Dopper | Oversized brand-led display headlines. |
| h1 | 58px | 400 | 1 | 0 | — | Dopper | Main hero headline and top-level page title. |
| h2 | 48px | 700 | 1.1 | 0 | — | Gilroy | Major section headings and collection introductions. |
| h3 | 43px | 600 | 1.1 | 0 | — | Gilroy | Feature and content-card headings. |
| h4 | 27px | 400 | 1.2 | 0 | — | Gilroy | Smaller product and editorial card titles. |
| body | 18px | 400 | 1.3 | 0 | — | Gilroy | Supporting copy, descriptions, and explanatory text. |
| button | 18px | 600 | 1.3 | 0 | — | Gilroy | Primary and secondary action labels. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 8, 10, 12, 14, 19, 20, 24, 30, 35, 40, 48, 58, 60, 70, 113 px.
- Section rhythm 35px · element gap 8px · card padding — · max content width 1324px.

Use a centered, wide content frame with a measured maximum width of 1324px, while allowing hero and campaign media to bleed to the viewport edges. Sections mostly use two-column editorial splits, alternating image and copy placement; product and solution collections switch to compact five-card rows. Headings align to the start of their columns. Keep a compact underlying spacing rhythm, but preserve visible breathing room between large stories and card groups. The long page alternates content types over a consistent cream canvas.

## Shape & elevation

- Radius: button `20px` · card `20px` · media `20px` · xs `20px` · pill `9999px`
- Shadow `sm` (other): `rgba(0, 103, 229, 0.2) 0px 2px 8px 0px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.1) 5px 4px 17.4px 0px`
- Motion: standard transition `0.4s cubic-bezier(0.83, 0, 0.17, 1)` on interactive elements.

The design is mostly flat: colored surfaces, photography, and spacing define the hierarchy rather than heavy shadows. Use rounded media and cards, with a measured 20px radius where applicable. Outlined buttons use a deep navy hairline; reserve subtle shadows for isolated floating controls or layered elements.

## Imagery

Prioritize candid lifestyle photography that shows bottles being carried, used, or placed in everyday settings. The hero is full-bleed video-like photography with a darkened image behind cream headline text. Product and editorial cards use colorful, varied product imagery, including graphic campaign art; keep this content within rounded frames rather than imposing a uniform studio treatment.

## Components

### Hero

Full-bleed lifestyle image with overlaid cream display headline, compact pill-shaped blue action, transparent navigation, and a scroll cue.

### Editorial split

Two-column story block pairing a rounded image with a heading, concise supporting copy, and one or two actions.

### Collection cards

Five compact product tiles with individual bright surface colors, short product descriptions, bottle photography, and price links.

### Action buttons

Rounded controls with 20px measured radius; use blue filled buttons, navy-filled dark actions, or navy-outlined secondary actions.

### Impact calculator

Light interactive section with explanatory copy, a weekly-liter slider, and a row of bottle choices.

### Newsletter and footer

Warm pale-yellow signup band followed by a multi-column navigation footer, trust marks, and payment details.

### Measured component styles

- **Primary button** (“Learn more about the Travel Mug”): transparent background · text #000f2e · border 2px solid #000f2e · radius 20px · padding 12px 40px · 600 18px Gilroy
- **Link** (“Annual Impact Report 2025”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px -apple-system
- **Card** (“Original The original icon. From €14.95”): background #0067e5 · text #f6ecc8 · radius 20px · padding 0px · 400 16px -apple-system

## Do

- Use Refill Cream as the primary page canvas.
- Let lifestyle photography occupy large, clear areas.
- Reserve vivid color blocks for product and campaign cards.
- Pair display headlines with readable geometric sans-serif copy.
- Use navy outlines for secondary actions.
- Keep section headings and copy aligned to column starts.

## Don't

- Do not turn every section into a colored block.
- Do not use heavy shadows as the main hierarchy tool.
- Do not crop product imagery so tightly that the bottle becomes unclear.
- Do not replace the warm canvas with stark white.
- Do not use blue gradients as a default section background.
- Do not add decorative colors beyond the measured palette.

## Agent prompt

Build a new Dopper-style page using Refill Cream (#fcfaf2) as the calm canvas and True Ink (#000000) for primary text. Use Midnight Navy (#000f2e) for outlines and dark actions, Electric Blue (#0067e5) for selected primary actions and product blocks, and reserve Refill Teal (#116973), Soft Periwinkle (#d4d5e6), Soft Sky (#8ab1e6), Sunshine Yellow (#fed200), and Butter Cream (#f6ecc8) for deliberate product or campaign surfaces. Create a wide editorial layout with image-and-copy splits, generous visual separation, and compact horizontal card collections. Use rounded lifestyle photography, a distinctive rounded display face for hero headlines, and a geometric sans-serif for supporting text and controls. Favor flat surfaces and clear contrast over shadows; make every section feel human, optimistic, and focused on reusable drinkware.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed lifestyle media with left-aligned headline and overlaid navigation. | Shop CTA, Scroll cue | Cream display text, Image overlay, Pill CTA |
| 2 | feature-split | Two-column editorial split: report artwork beside copy and link. | Report link | Rounded image, Short text block |
| 3 | product-grid | Section heading above a five-column row of colorful product cards. | Product discovery, Price links | Bright card surfaces, Product photography, Rounded corners |
| 4 | feature-split | Two-column feature with copy and actions alongside large product imagery. | Shop action, Learn-more action | Editorial copy, Rounded media |
| 5 | feature-split | Two-column mission story with large image and copy-led actions. | Mission link, Learn-more link | Lifestyle image, Outlined secondary action |
| 6 | other | Interactive calculator content across three columns with visual edge treatment. | Weekly-liter slider, Bottle selection | Input control, Selectable product options |
| 7 | feature-split | Lavender-toned two-column band with copy and corporate gifting image. | Corporate gifts CTA | Periwinkle surface, Rounded lifestyle image |
| 8 | product-grid | Section heading above a five-column row of solution cards. | Explore solution, Learn-more links | Color-blocked tiles, Product and lifestyle images |
| 9 | feature-split | Full-bleed underwater imagery with a light copy panel overlaid at left. | Standards link, Impact report link | Full-bleed photo, Floating rounded panel, Blue-green imagery |
| 10 | footer | Editorial news cards followed by newsletter signup and a multi-column footer. | News links, Newsletter signup, Footer navigation | Rounded story images, Pale yellow signup band, Trust and payment marks |

## Source CSS custom properties (selected)

```css
--ease-in-out-expo: cubic-bezier(0.83,0,0.17,1);
--ease-out-expo: cubic-bezier(0.16,1,0.3,1);
--ease-in-expo: cubic-bezier(0.7,0,0.84,0);
--ease-in-out-quint: cubic-bezier(0.83,0,0.17,1);
--ease-out-quint: cubic-bezier(0.22,1,0.36,1);
--ease-in-quint: cubic-bezier(0.64,0,0.78,0);
--z-section-background: -1;
--border-radius-xs: 4px;
--border-radius-s: 8px;
--border-radius-m: 16px;
--border-radius-l: 20px;
```

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