风格库/媒体内容/The Pop Manifesto

The Pop Manifesto

以影像与文字释放原生编辑张力Raw editorial energy, led by image and type

浅色主题媒体内容culture magazine homepage编辑风极简满版媒体字体主导高对比原网页 thepopmanifesto.com ↗ · 2026-10-12 采集 · 1440×900 桌面端
The Pop Manifesto 首屏

首页以纯白画布和近似浏览器默认样式的导航,搭配醒目的黑色大字与沉浸式编辑影像。界面克制,让文化题材摄影而非装饰性组件主导页面气质。

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

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.

配色

点色块复制色值。用途说明来自对页面的实测位置(背景、文字、描边、按钮)与截图判读。

强调色
表层色
中性色
页面底色 · Gallery White主文字 · Ink Black描边 · Ink Black强调 · Browser Blue
文字背景对比度WCAG
#000000 Ink Black#ffffff Gallery White21:1AAA
#0000ee Browser Blue#ffffff Gallery White9.4:1AAA

字体

字号阶梯:Major Third(比例约 1.25,正文 16px)。示例用免费替代字体渲染,数值为实测。

Aa 设计

Times New Roman

系统字体 · 字重 400 · 占比 75%
免费替代:Libre Baskerville

Body copy, navigation, and editorial links

Aa 设计

Arial

系统字体 · 字重 400 · 占比 25%
免费替代:Inter

Newsletter buttons and small interface labels

角色示例字号字重行高字距
正文
Editorial body text and story copy.
The quick brown fox 敏捷的狐狸
16px400normal0
辅助文字
Small labels and image-related captions.
The quick brown fox 敏捷的狐狸
13.5px400normal0
按钮
Newsletter and compact interface controls.
The quick brown fox 敏捷的狐狸
13.5px400normal0
导航
Primary text navigation and header links.
The quick brown fox 敏捷的狐狸
16px400normal0

间距与布局

基准单位 2px · 密度:适中

—版块间距
—元素间距
—卡片内边距
1424px内容最大宽度
1px
6px
16px

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.

圆角与层次

没有测到阴影:页面是扁平的,层次靠底色和描边区分。

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.

组件

下面的预览按实测的按钮、输入框、徽标、卡片样式重建(字体用替代字体)。

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.

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.

页面版块

共 7 个版块,按页面从上到下排列,每个都标了类型、布局和交互套路。

该做与不该做

✓ 该做

  • 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.

✕ 不该做

  • 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.

给 AI 的提示词

想快速出一个同风格的新页面,把这段话连同 DESIGN.md 一起发给 AI。

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.

相似风格

The Pop Manifesto 设计系统 — 配色、字体与 DESIGN.md | Design DNA