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

# Mr. Pops · Design System

> Big type, vivid portraits, playful ice cream

**Theme:** light · **Industry:** food-beverage · **Source:** https://mrpops.ua/en/ · **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._

Mr. Pops pairs oversized display lettering with immersive, full-bleed ice-cream photography. A warm peach canvas and deep berry-red accents frame a playful, image-led store experience.

## North star

Let expressive, full-bleed ice-cream photography and oversized Cervo type lead, keeping controls light and secondary.

## Overview

The visual strategy puts full-bleed portrait photography first: close crops of people tasting ice cream fill the opening screen, with the product and face creating an immediate focal point. The measured page canvas is warm peach (#fee5ca), while the screenshot shows photography carrying much of the visible color and mood. Deep berry red (#b00e2f) identifies the wordmark and navigation, and white (#ffffff) provides contrast for the oversized headline, supporting copy, outlines, and small controls. Cervo display lettering is set in uppercase with unusually large scale and compact line spacing, arranged as a bold, staggered stack. HelveticaNeueCyr handles navigation and conversational body text in a quieter voice. The hero layers copy and a small flavour link over the photograph rather than boxing them into cards. Full-width imagery and restrained interface chrome keep the page energetic and editorial; spacing remains comfortable, with simple, flat controls rather than shadowed panels.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Peach Cream | `#fee5ca` | `--color-peach-cream` | brand | Measured page canvas and warm base color behind the image-led homepage. |
| Vanilla White | `#ffffff` | `--color-vanilla-white` | neutral | High-contrast hero headline and copy, navigation controls, and fine outlines. |
| Berry Ink | `#b00e2f` | `--color-berry-ink` | accent | Wordmark, navigation text, and brand accent against the peach canvas. |

### Semantic aliases

`--color-canvas` → `#fee5ca` (Peach Cream) · `--color-text` → `#b00e2f` (Berry Ink) · `--color-text-muted` → `#ffffff` (Vanilla White) · `--color-text-subtle` → `#fee5ca` (Peach Cream) · `--color-border` → `#ffffff` (Vanilla White) · `--color-accent` → `#b00e2f` (Berry Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#b00e2f` | `#fee5ca` | 5.86:1 | AA |
| `#ffffff` | `#fee5ca` | 1.22:1 | fail |
| `#b00e2f` | `#fee5ca` | 5.86:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Cervo | `--font-display` | webfont | 400, 500 | Display headline and uppercase promotional headings | Bowlby One SC |
| HelveticaNeueCyr | `--font-body` | webfont | 400 | Navigation, body copy, captions, and form text | Inter |

- **Cervo:** Use the measured regular and medium weights; uppercase display text, very large scale, tight line height, and no added tracking.
- **HelveticaNeueCyr:** Use regular weight for compact, readable supporting text; keep casing natural outside navigation labels.

### Type scale — Custom (ratio ≈ 3, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 144px | 400 | 1 | 0 | uppercase | Cervo | Oversized stacked hero statement, “TRUE ICE CREAM.” |
| h1 | 72px | 500 | 0.9 | 0 | uppercase | Cervo | Uppercase promotional and section headings. |
| body | 16px | 400 | 1.3 | 0 | — | HelveticaNeueCyr | Conversational product storytelling and descriptive copy. |
| caption | 15px | 400 | 1.4 | 0 | — | HelveticaNeueCyr | Small supporting labels and flavour-related details. |
| nav | 15px | 400 | 1.3 | 0 | — | HelveticaNeueCyr | Header links, menu labels, and compact store controls. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 8, 9, 10, 16, 20, 30, 36, 58 px.
- Section rhythm 36px · element gap 20px · card padding — · max content width 1380px.

The opening section combines a full-bleed image with an overlay composition: the oversized headline anchors the left and lower area, while a narrow block of story copy and a flavour link sit to the right. Header controls span the top edge, with the wordmark at left and store navigation at right. The measured page max width is 1380px, with a comfortable density and a six-column section reading. A second full-bleed image continues the visual narrative. Keep text aligned to clear zones within photography and preserve open breathing room around controls.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s ease` on interactive elements.

The measured system has no shadows, gradients, or card treatments. Keep the interface visually flat: use photography for depth, white outlines for delicate separation, and fine borders on compact header controls. Text and navigation sit directly over the image or canvas rather than on elevated panels.

## Imagery

Use full-bleed, close-cropped lifestyle photography centered on people tasting ice cream. Faces, hands, and the product occupy most of the frame; the opening image places a pale ice pop against a teal-toned scene, while the next image shifts to a direct tasting moment. Treat imagery as immersive and edge-to-edge, with text layered over it and no decorative illustration competing for attention.

## Components

### Wordmark

Place the compact Mr. Pops mark at the upper left in berry red, over the hero image.

### Header controls

Arrange the cart count, Flavours link, and Menu control along the upper right; use light surfaces, berry-red text, and fine outlines.

### Display headline

Set the hero statement in uppercase Cervo, oversized and stacked across the lower-left area of the photograph.

### Story copy

Overlay conversational white HelveticaNeueCyr text in a compact block to the right of the headline.

### Flavour link

Pair a small uppercase white label with a simple outlined circular arrow treatment over the hero image.

### Scroll cue

Use a fine white down-arrow outline near the lower-right edge to signal continuation into the next image section.

### Measured component styles

- **Primary button** (“0”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px HelveticaNeueCyr
- **Link** (“FLAVOURS”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px HelveticaNeueCyr
- **Input**: transparent background · text #ffffff · radius 0px · padding 10px 30px 0px 0px · 400 16px HelveticaNeueCyr
- **Navigation item** (“0 Flavours Menu”): transparent background · text #b00e2f · radius 0px · padding 0px · 400 16px HelveticaNeueCyr

## Do

- Use full-bleed lifestyle photography as the dominant visual layer.
- Set the main display statement in oversized uppercase Cervo.
- Use Peach Cream (#fee5ca) as the measured canvas color.
- Reserve Berry Ink (#b00e2f) for the wordmark and navigation accents.
- Use Vanilla White (#ffffff) for contrast over photography.
- Keep supporting copy conversational and visually secondary.
- Keep controls flat, outlined, and unobtrusive.

## Don't

- Don't put the hero inside a bordered card.
- Don't replace the lifestyle photography with decorative illustrations.
- Don't add shadows or gradients to interface elements.
- Don't use berry red for large blocks of hero text.
- Don't make supporting copy compete with the display headline.
- Don't crowd the edge-to-edge image with extra controls.

## Agent prompt

Build a new page in the Mr. Pops visual style: energetic, editorial, and led by full-bleed lifestyle photography of people enjoying ice cream. Use Peach Cream (#fee5ca) as the measured canvas, Berry Ink (#b00e2f) for the wordmark and navigation accents, and Vanilla White (#ffffff) for high-contrast copy and fine outlines. Set the primary statement in oversized uppercase Cervo or a close display substitute, with tight line spacing and a staggered composition. Use HelveticaNeueCyr or a close sans-serif substitute for conversational copy and controls. Layer text directly over the image in distinct zones; keep navigation compact at the top edge. Prefer flat, lightly outlined controls and generous breathing room. Avoid cards, shadows, gradients, and decorative clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed portrait image with headline low-left, story copy right, and compact navigation across the top. | flavour link, scroll cue, store navigation | oversized uppercase headline, white image-overlay copy, outlined header controls, berry-red wordmark |
| 2 | product-showcase | Single full-bleed photographic image continuing directly below the opening hero. | immersive product view | edge-to-edge photography, minimal interface chrome |

## Source CSS custom properties (selected)

```css
--font-size: 16px;
--color-white: #fff;
--color-bg: #fee5ca;
--color-bg-hover: #fef2e4;
--color-contrast: #b00e2f;
--color-slight-contrast: #f9e5e9;
--color-dark: #000;
--color-text: #b00e2f;
--color-placeholder: #b00e2f;
--color-light: #fff;
--color-overlay: rgb(254 229 202/75%);
--color-line: #e8e8e8;
--button-stroke-bg: #fee5ca;
--button-stroke-text: #b00e2f;
--button-stroke-text-hover: #fff;
--button-circle-color: #b00e2f;
--button-circle-bg: #fee5ca;
--button-circle-text: #fff;
--button-goto-color: #b00e2f;
--button-goto-hover-color: #fff;
```

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