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

# The Pop Manifesto · Design System

> Raw editorial energy, led by image and type

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

The homepage pairs a stark white canvas and browser-like navigation with oversized black display type and immersive editorial imagery. Its restrained interface lets culture-focused photography, rather than decorative UI, establish the page’s mood.

## North star

Keep the interface almost unstyled so oversized typography and full-bleed cultural photography carry the identity.

## Overview

The visual strategy is deliberately spare: #ffffff fills the page, while #000000 provides the oversized manifesto lettering, button text, and structural contrast. #0000ee appears as conventional link blue in navigation and story links; it is a small interface accent, not a broad brand wash. The header is compact and loosely arranged, with plain text links and native-looking Newsletter and Cart controls. A large, heavy sans-serif title interrupts the image-led flow, while Times New Roman carries navigation and story text with a distinctly editorial, almost unstyled character. Long, full-bleed photographs dominate the lower page, using close crops and candid portraiture to supply warm, varied colour that is part of the imagery rather than the interface palette. White gaps separate the title and story visuals, but the page otherwise avoids card treatments, shadows, rounded corners, and ornamental framing. The overall effect is independent, raw, and image-first.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Page canvas and open space around the title and full-bleed editorial imagery. |
| Browser Blue | `#0000ee` | `--color-browser-blue` | accent | Conventional blue for selected navigation and linked story text; keep it limited to links. |
| Ink Black | `#000000` | `--color-ink-black` | neutral | Oversized manifesto lettering, button text, and strong foreground contrast. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Ink Black) · `--color-border` → `#000000` (Ink Black) · `--color-accent` → `#0000ee` (Browser Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#0000ee` | `#ffffff` | 9.4:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Times New Roman | `--font-body` | system | 400 | Body copy, navigation, and editorial links | Libre Baskerville |
| Arial | `--font-arial` | system | 400 | Newsletter buttons and small interface labels | Inter |

- **Times New Roman:** Regular-weight serif with browser-default character; navigation and link labels stay in natural casing.
- **Arial:** Regular sans-serif for compact controls and captions; retain the plain, native-control feel.

### Type scale — Major Third (ratio ≈ 1.25, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 16px | 400 | normal | 0 | — | Times New Roman | Editorial body text and story copy. |
| caption | 13.5px | 400 | normal | 0 | — | Arial | Small labels and image-related captions. |
| button | 13.5px | 400 | normal | 0 | — | Arial | Newsletter and compact interface controls. |
| nav | 16px | 400 | normal | 0 | — | Times New Roman | Primary text navigation and header links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 6, 16 px.
- Section rhythm — · element gap — · card padding — · max content width 1424px.

The measured page max width is 1424px, with a single-column, image-led sequence and no visible card grid. At the captured viewport, navigation sits at the top left in two repeated compact clusters, followed by a large hero image. The oversized title occupies a broad white break before another full-bleed visual. Subsequent stories continue vertically as edge-to-edge media with small linked labels. Spacing feels comfortable and open around the title, while the header itself remains notably dense and plain.

## Shape & elevation

- No box shadows measured: the page is flat.

The interface is flat: measured shadows and gradients are absent, and the page relies on white space and contrast rather than layered surfaces. Buttons retain a native, square-cornered appearance with a black outset border. Story media sits directly on the white canvas without card framing.

## Imagery

Large photographic and video-like editorial frames dominate the page, including close portrait crops and candid scenes. Media spans the content width and is presented without decorative borders or card containers. Warm browns, muted reds, and blue sky appear within the photos; these are image colours, not measured brand UI colours. The imagery feels intimate, documentary, and deliberately immersive.

## Components

### Compact navigation

Plain Times New Roman links at 16px; selected Stories links use #0000ee, while other navigation text is black.

### Newsletter control

Native-looking Arial button around 13.5px, with #efefef fill, black text, square corners, and a 2px outset black border.

### Hero media

Large, edge-to-edge editorial image immediately beneath the compact header.

### Manifesto title

Oversized, heavy black sans-serif display lettering on a white field, broken across lines.

### Story link

Small conventional blue serif link associated with a full-bleed editorial image.

### Full-bleed story media

Tall, single-column photographs fill the available width, with no visible card background or framing.

### Measured component styles

- **Primary button** (“Newsletter”): background #efefef · text #000000 · border 2px outset #000000 · radius 0px · padding 1px 6px · 400 13.3333px Arial
- **Link** (“Sofia IsellaNo Ordinary Girl”): transparent background · text #0000ee · radius 0px · padding 0px · 400 16px Times New Roman
- **Navigation item** (“StoriesArchive NewsletterShop Cart”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Times New Roman

## Do

- Use #ffffff as the dominant page canvas.
- Reserve #0000ee for navigation and editorial links.
- Set the manifesto title in oversized, heavy black sans-serif type.
- Let story photography run edge to edge.
- Keep navigation compact, plain, and serif-led.
- Use white space to separate major image and title moments.

## Don't

- Do not introduce a broad coloured interface palette.
- Do not wrap stories in rounded cards.
- Do not add decorative shadows or gradients.
- Do not turn the navigation into a polished oversized toolbar.
- Do not treat photo colours as brand tokens.
- Do not crowd the manifesto title with surrounding UI.

## Agent prompt

Build a new editorial page in The Pop Manifesto’s image-first style. Use Gallery White (#ffffff) as the canvas, Ink Black (#000000) for emphatic display text, and Browser Blue (#0000ee) only for conventional links. Keep the header compact and plain, using serif navigation and small native-looking controls. Establish one oversized, heavy sans-serif title as a strong typographic interruption, then let full-width documentary photography dominate the content flow. Separate major moments with open white space rather than cards. Keep story labels small and understated. Avoid shadows, gradients, rounded containers, ornamental icons, and extra interface colour. The result should feel raw and editorial, with imagery—not UI decoration—providing most of the visual richness.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Compact, left-aligned text links and controls on white. | section navigation, newsletter entry, shop and cart access | serif text links, blue active link, native-looking buttons |
| 2 | other | Single-column white spacer with a small centered graphic element. | visual pause | white field, minimal graphic |
| 3 | other | Single-column white spacer with a small centered graphic element. | visual pause | white field, minimal graphic |
| 4 | hero | White title field followed by broad, image-led hero treatment. | brand introduction, immersive media | large black display type, full-width imagery, white space |
| 5 | gallery | Single-column full-bleed image with a small link label. | editorial story link, immersive viewing | edge-to-edge photography, blue serif link |
| 6 | gallery | Full-width editorial image in the single-column story flow. | editorial story link, continuous scroll | large photography, minimal text |
| 7 | gallery | Full-width portrait image continuing the vertical editorial sequence. | editorial story link, continuous scroll | edge-to-edge portrait, minimal framing |

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