Design 系统 Inspired by The Verge

1. 视觉主题与氛围

The Verge's 2024 redesign 感觉像 somebody wired a Condé Nast magazine to a chiptune soundboard. The canvas is almost-black (#131313), the 标题 are built from a brutally heavy display face (Manuka) that runs up to 107px, and the whole 页面 is peppered with acid-mint #3cffd0 and ultraviolet #5200ff that behave less like 品牌 颜色 and more like hazard tape. Story 图块 are not 安静 gray 卡片 — they're saturated, 全出血 颜色 blocks (yellow, pink, orange, blue, purple) that feel like pasted-up rave flyers arranged into a 时间线. The mood is "developer console 满足 club night 满足 tech tabloid": 严肃 enough to cover a congressional hearing, 醒目 enough to review a synthesizer.

What 使 this 系统 鲜明 is the StoryStream 时间线: a 垂直 信息流 where every post is a rounded rectangle — 经常 20–40px 圆角 — filled 边到边 with 颜色, framed by a thin 边框, and marked by a mono-uppercase 时间戳 on its left 轨道. Stories don't float on a 网格; they stack on a dashed 垂直 线条 like commits in a git log. Above that, a massive "The Verge" 字标 dominates the masthead in Manuka at 首屏 scale, letting the reader know before any 标题 loads that this is 编辑 territory, not a template.

There is no "light mode" on the 主页 — the dark canvas is the 产品, and the only time the palette inverts is when a single story 图块 takes a mint or yellow fill. The 深度 is almost 完全 扁平: hairline 1px borders (#ffffff, #3cffd0, or #5200ff) do the work that 阴影 would do on a Material-flavored site. Every 容器 is either #131313 with a 1px 轮廓, a fully saturated accent block, or a slate-gray #2d2d2d secondary 表面.

关键特征:

• Near-black 编辑 canvas (#131313) as the default 表面 — 无浅色模式 on the 主页
• Acid-mint #3cffd0 + ultraviolet #5200ff as hazard-tape accents, never 安静 背景 wash
• Massive Manuka display 标题 up to 107px — the single loudest type move in mainstream tech media
• Rounded pill-卡片 everything: 20/24/30/40px corner radii, never square
• Fully saturated 颜色-block story 图块 (mint, purple, yellow, pink, orange, electric blue) on a dark 页面
• 时间线 "StoryStream" 信息流 with mono uppercase timestamps 而非 a 传统 magazine 网格
• 扁平 深度 — 1px borders in white, mint, purple do the work that 阴影 would do elsewhere

2. 配色与角色

主色 (品牌 Hazards)

• Jelly Mint (#3cffd0): The Verge's 标志性 acid-mint accent. 用作 CTA 按钮 fill, 链接 underlines, 激活 tab borders, and high-attention story-图块 backgrounds. Treat it as the visual equivalent of neon safety paint — applied 少量 to the most important 元素 on screen.
• Verge Ultraviolet (#5200ff): The complementary 品牌 hazard. 用于 secondary 颜色-block 图块, promotional spans, and the occasional outlined 按钮. 经常 applied at 0.9 alpha to soften its cathode intensity.

次色 & Accent

• Console Mint Border (#309875): A darker variant of the jelly mint used on 卡片 outlines and 按钮 borders where pure mint would 在……上方-saturate.
• Deep Link Blue (#3860be): The 链接 悬停 颜色 — the one moment blue appears on the site. It replaces mint/white/black on 悬停 贯穿 every 链接 样式.
• 聚焦 Cyan (#1eaedb): 专用于 按钮 焦点环. Never shown outside a keyboard-聚焦状态.
• Purple 线条 (#3d00bf): A darker ultraviolet variant 用作 the 垂直 边框 on StoryStream <li> items.

表面 & 背景

• Canvas Black (#131313): The default dark 表面 for the entire 主页. Almost-but-not-quite pure black — has just enough warmth to feel like a printed newsprint negative 而非 an OLED void.
• Surface Slate (#2d2d2d): 次色 卡片 背景, used when a story 图块 doesn't need to be a saturated 颜色 block.
• 图像 边框 (#313131): The 1px 边框 that wraps inline 图像内容.
• Hazard White (#ffffff): 用作 story-图块 fill, 按钮 边框, and primary 文本. When white appears as a large block, it's an 编辑 decision — a "spotlight" on that 图块.
• Absolute Black (#000000): 专用于 文本 on the mint/yellow/white 图块 — the only place it appears.

Neutrals & 文本

• 主色 文本 (#ffffff): 标题 and display 文本 on the canvas.
• 次色 文本 (#949494): Bylines, timestamps, 照片 credits. The mid-gray that 锚定 the 元数据 layer.
• Muted 文本 (#e9e9e9): 按钮 文本 on dark slate 按钮. Slightly off-white to reduce screen glare.
• Inverted 文本 (#131313): Used only on accent 图块 (mint, yellow, white) to keep contrast legible.

语义 & Accent

• 焦点环 (#1eaedb): Keyboard 聚焦 only.
• 覆盖层 Black (rgba(0, 0, 0, 0.33)): Subtle 1px ring 用作 the 安静 阴影 alternative on stacked 卡片.
• Dim Gray (#8c8c8c): 激活/按下 按钮 背景 — the "按下 down" state.

渐变系统

The Verge uses zero 装饰性 渐变. The only 渐变-like treatment is the 过渡 from a saturated accent story 图块 (mint/purple/yellow) back to the #131313 canvas 在……之间 行. 颜色 is applied in solid blocks, not as washes. This is a 刻意 choice — the site's hazard-tape visual identity would dissolve if anything faded.

3. 字体排版规则

字体系列

• Manuka (Klim Type Foundry) — fallback: Impact, Helvetica. The 标志性 display face for The Verge 字标 and 特性 标题. A heavy-字重 (900) industrial sans-serif with a condensed, almost-athletic stance. Runs at 60–107px on the 主页, never smaller.
• PolySans (PanGram Pangram / Nikolas Wrobel) — fallback: Helvetica, Arial. The UI and secondary 标题 workhorse. Covers weights 300 / 500 / 700 贯穿系统 — everything from kicker captions to 正文 decks.
• PolySans Mono — fallback: Courier New, Courier. The monospaced sibling, used 专门 for ALL-CAPS 标签: kickers, timestamps, 类别 标签, 按钮 标签. This mono-uppercase usage is the second-most-identifiable Verge detail after Manuka.
• FK Roman Standard (Florian Karsten) — fallback: Georgia. A serif used 少量 for specific 正文/说明文字 treatments (文章 excerpts, certain review pulls). Adds a "print-magazine" counterpoint to the PolySans stack.
• Roboto — fallback: -apple-system, system-ui. Utility UI 字体 for widgets and legacy 模块.

层级

原则

• Manuka is always the 首屏, never the UI. If you see Manuka below 60px you're looking at a bug. It exists to shout the 品牌, not to 标签 a 按钮.
• PolySans is the workhorse, PolySans Mono is its uniformed sibling. Mono is used 专门 for UPPERCASE 标签, timestamps, 标签, and certain 按钮. Lowercase mono doesn't exist in this 系统.
• Thin-字重 (300) capitalized 标题 are a 标志性 Verge move. The 19–20px 字重-300 with 1.9px tracking 创建 a "fashion magazine whisper" that contrasts with the 107px Manuka shout above it. This whisper-vs-shout contrast is the typographic fingerprint.
• Letter-间距 has two registers: positive (0.72–1.9px) for ALL-CAPS mono and sans 标签, negative (-0.16px) for the rare serif appearances, barely-positive (0.32px, 1.07px) for massive display. Plain 0 letter-间距 is rare.
• FK Roman Standard is the 编辑 exception, not the 线条. Reserve it for long-表单 print-voice moments — reviews, critic pulls, masthead essays. Never use it in UI.
• 线 heights are tight (0.80–1.30) for every display and 标签, relaxed (1.60–2.00) only for reading 正文 and mono 按钮 标签. The leading jump is intentional — it 赋予 the 页面 a "telegraph ticker" rhythm.

字体替代说明

The 0.80 line-高度 on Manuka display (107px, 90px, 60px) assumes the 专有的 Manuka face from Klim Type Foundry, which has aggressively tight 垂直 metrics 为……设计 athletic stance at large sizes. If you substitute with wide-metric open-source condensed displays like Anton, Oswald, Bebas Neue, or Archivo Black, loosen display line-heights by 约 +0.10 to +0.15 to prevent ascender/descender collisions (e.g., 0.80 → 0.95). PolySans substitutes (Space Grotesk, DM Sans, Hanken Grotesk) work at the token values without adjustment — their metrics are close enough. PolySans Mono substitutes (Space Mono, JetBrains Mono) and FK Roman substitutes (Newsreader, Literata) also work without adjustment.

4. 组件样式

按钮

主色 — Jelly Mint Pill

• 背景: #3cffd0 (Jelly Mint)
• 文本: #000000 (Absolute Black), PolySans 16px / 700 or PolySans Mono 12px / 600 UPPERCASE
• 边框: none (pure fill)
• 圆角: 24px — fully rounded pill
• 内边距: 10px 24px
• 轮廓: none at rest
• 悬停: 背景 shifts to rgba(255, 255, 255, 0.2) (translucent white), 文本 stays black, adds a 1px #c2c2c2 ring 阴影
• 激活: 背景 rgba(140, 140, 140, 0.87), opacity 0.5, ring 阴影 #8c8c8c
• 聚焦: 背景 #1eaedb, white 文本, 1px solid #0500ff 边框, translucent white 焦点环
• 过渡: ~180ms ease on 背景 and 阴影

次色 — Dark Slate Pill

• 背景: #2d2d2d (Surface Slate)
• 文本: #e9e9e9 (Muted 文本), PolySans 16px / 400
• 边框: none
• 圆角: 24px
• 内边距: 10px 24px
• 轮廓: rgb(233, 233, 233) none 0px
• 悬停: same translucent white invert as primary — rgba(255, 255, 255, 0.2) bg, black 文本, 1px #c2c2c2 ring
• 聚焦: same cyan 聚焦 treatment as primary

第三级 — Outlined Mint

• 背景: transparent
• 文本: #3cffd0, PolySans Mono 12px / 600 UPPERCASE, 1.5px tracking
• 边框: 1px solid #3cffd0
• 圆角: 40px — larger pill for secondary 轮廓 样式
• 内边距: ~10px 20px
• 悬停: inverts to mint fill, black 文本
• 过渡: 150ms ease

Outlined Ultraviolet (Promotional)

• 背景: transparent
• 文本: #5200ff or #ffffff
• 边框: 1px solid #5200ff
• 圆角: 30px
• 用于 "Subscribe" or "Join the Stream" 样式 promotional callouts

Pill Tag (Non-inter激活)

• 背景: saturated accent (#3cffd0, #5200ff, yellow, etc.)
• 文本: black or white depending on 背景 luminance
• 圆角: 20px (tighter 圆角 than 按钮 — this is the 文本 pill)
• 字体: PolySans Mono 11px / 600 UPPERCASE, 1.8px tracking
• 内边距: ~4px 10px

卡片与容器

StoryStream 图块

• 背景: either #131313 + 1px white 边框, OR a saturated accent fill (mint, purple, yellow, pink, orange, white)
• 圆角: 20px (standard) or 24px (特性)
• 边框: 1px solid #ffffff (on dark) or 0px 0px 1px solid #3cffd0 (on mint) or nothing (on saturated fill)
• 内边距: ~24–32px interior
• 悬停: no lift, no scale — the 标题 文本 颜色 transitions from white to #3860be (deep link blue)
• 过渡: 150ms ease on 颜色 only

特性 卡片 (Top Story)

• 背景: #131313 with 1px hairline 边框, OR 全出血 颜色 accent
• 圆角: 24px
• 内边距: 32px+
• 图像 inside: clipped to match the outer 圆角 (3px or 4px inner 圆角 when nested)
• 悬停: 文本 颜色 shift only; the 图像 remains static

StoryStream 轨道 (时间线)

• A 垂直 dashed or solid 线条 (1px #3d00bf or #ffffff) runs along the left edge of each item, marking the 时间线 spine
• Timestamps sit on the left 轨道 in PolySans Mono 11px / 500 / UPPERCASE / 1.1px tracking
• Each entry is a pill-cornered rectangle separated from its neighbors by 12–16px 垂直 gap

输入框与表单

• 默认: #131313 背景, 1px solid #ffffff or #949494 边框, 2px 边框 圆角 (tight, newspaper-表单 feel), PolySans 15px 文本 in #ffffff, placeholder in #949494.
• 聚焦: 边框 transitions to #3cffd0 (jelly mint) with optional 1px solid #5200ff inner ring on deep 聚焦. No glow.
• 错误: 边框 turns #5200ff (ultraviolet — 用作 error/alert accent here, not the usual red).
• 过渡: ~150ms ease on 边框-颜色.

导航

• Top nav: thin #131313 bar with the Verge 字标 (Manuka) left-aligned, a 搜索 图标 and a few UPPERCASE mono 类别 链接 (12–14px, PolySans Mono, 1.5–1.8px tracking), and a single mint-pill CTA (通常 "Subscribe") pinned right.
• 字标: massive on first scroll — the 主页 treats the "The Verge" 标志 as a 首屏 元素, not a 32px corner 标志.
• 悬停: every 链接 transitions from #ffffff to #3860be (deep link blue). No underline — it's a 颜色-only response.
• 激活 区块: marked by a 1px mint underline (inset box-阴影 0px -1px 0px 0px inset #3cffd0)
• 移动端: the 字标 shrinks, 类别 nav collapses into a hamburger 抽屉. Inside the 抽屉, 链接 are mono-uppercase and stack with 16–20px gaps.

图像 处理方式

• Aspect ratios: 16:9 dominates for 首屏 and 特性 图像, 4:3 for mid-信息流, 1:1 for thumbnails and author avatars.
• 圆角: always rounded to match the parent 卡片 — 3px, 4px, or inherit 20px / 24px from the 图块.
• 边框: 1px #313131 or #ffffff hairline around 摄影, giving a "contained Polaroid" feel.
• 全出血: only within the 颜色-block 图块, where the 图像 runs to the padded edge of the accent fill.
• 悬停: static — no zoom, no scale, no opacity shift. The 标题 below is the only inter激活 response.
• 延迟加载: loading="lazy" on everything below the first fold; eager on the masthead 首屏 only.

StoryStream 时间线 Item (独特)

• 垂直 轨道 line (1px #3d00bf or #ffffff on #131313)
• Mono 时间戳 on the left in PolySans Mono 11px / UPPERCASE
• Pill-cornered 正文 卡片 (20px 圆角) with kicker, 标题, and optional deck
• Stacked vertically with 12–16px gap, the 轨道 continuing 在……之间 them
• 经常 interleaved with 全出血 accent 图块 that "break" the 时间线 rhythm for emphasis

5. 布局原则

间距系统

• 基础单位: 8px.
• Scale: 1, 2, 4, 5, 6, 8, 9, 10, 12, 14, 15, 16, 20, 24, 25px.
• 区块内边距: 32–64px 垂直 在……之间 major 信息流 区块. StoryStream items themselves are tighter — 12–16px gaps.
• 卡片内边距: 20–32px interior. 特性 卡片 expand to 40–48px.
• 行内间距: kickers sit ~6–10px above 标题; 标题 sit ~10–14px above decks; timestamps sit ~6–8px below decks.
• 微型比例: The 2/4/5/6/9/10px values are used inside 按钮, pills, and tight 标签 clusters, not in the 编辑 网格.

网格与容器

• 最大宽度: ~1280–1300px (dembrandt detected breakpoints at 1200/1280/1300).
• 列模式: a 12-列 underlying 网格 that resolves into 3-列 首屏 + 1-列 StoryStream 轨道 + 特性 panels. The 主页 feels freeform 因为 颜色-block 图块 频繁 span 2–3 列 on a whim.
• 容器内边距: 24px 移动端 / 48px 桌面端 on the outer edges.
• 间距: 16–24px 在……之间 列, tighter (8–12px) inside StoryStream items.

留白理念

The Verge treats whitespace like a club DJ treats silence — as a dramatic reset 在……之间 醒目 moments. The canvas is so dark and the accents are so saturated that even 32px of 空 #131313 在……之间 two 图块 充当 a palette cleanser. The 页面 is not airy like Apple or Stripe; it's paced, with 醒目 hazard-颜色 blocks interrupting stretches of near-black. Whitespace carries the rhythm, not the elegance.

圆角比例

• 2px — inputs, small badges (感觉像 a typewriter tag)
• 3px — inline 图像 (just enough to soften 相对于 the canvas)
• 4px — nested 卡片 图像 and small 按钮 variants
• 20px — standard pill 卡片 and 颜色-block 图块
• 24px — 特性 图块 圆角 and primary 按钮 pill
• 30px — large promotional 按钮
• 40px — outlined CTA pills (the loudest pill 在系统中)
• 50% — 头像 circles, 图标 按钮, and certain round badges

Eight discrete 圆角 values — a lot for a single site. This is 刻意: the rhythm 在……之间 2px typewriter 标签, 20px pill 卡片, and 40px outlined 按钮 创建 a "nested scale" feel where every 组件 announces its hierarchy 通过 its corners.

6. 层次与深度

The Verge's 深度 philosophy is 颜色-as-层次. When something needs to 突出, it doesn't get a 阴影 — it gets a mint fill or a 1px hazard-颜色 边框. There are 14 阴影 entries in the 提取的 tokens, but all of them are either inset underlines (0px -1px inset) or near-transparent 1px rings — none of them are 传统 层次 阴影. The #131313 canvas stays perfectly 扁平 throughout, and hierarchy is carried by 颜色 saturation.

装饰性深度

• 1px inset underline on 激活 tabs/nav 链接 (mint, black, or white depending on context)
• Subtle rgba(0, 0, 0, 0.33) 1px ring on stacked 卡片 — the only effect that faintly resembles a 阴影
• 无渐变, no glows, no 氛围 blurs anywhere. The hazard-tape aesthetic would break if anything faded softly.

7. 推荐与避免

Do

• Do use #131313 as the canvas for every view. There is 无浅色模式.
• Do use Jelly Mint (#3cffd0) and Verge Ultraviolet (#5200ff) as hazard accents — 按钮, borders, 激活 states, and saturated 颜色-block 图块.
• Do use Manuka 专门 at 60px+ for 首屏 标题. Treat anything smaller as a bug.
• Do round everything: 20px for 卡片, 24px for 特性 卡片, 30–40px for pill 按钮.
• Do use PolySans Mono for UPPERCASE 标签, timestamps, kickers, and 按钮 文本. Lowercase mono doesn't exist here.
• Do apply 1.5–1.9px letter-间距 to every ALL-CAPS 标签 — this is a Verge 标志性.
• Do use saturated 颜色-block 图块 (mint, purple, yellow, pink, orange, white) to elevate a story — never a drop 阴影.
• Do use #3860be (deep link blue) as the 悬停 颜色 on every 链接, regardless of base 颜色.
• Do apply the StoryStream 时间线 轨道 (1px dashed/solid #3d00bf or white) on 信息流 views.
• Do use thin-字重 (300) PolySans at 19–20px with 1.9px tracking for "fashion-whisper" capitalized eyebrows — the contrast with the 107px Manuka shout is the whole voice.

Don't

• Don't use a light 背景. The dark canvas is the 产品.
• Don't add box-shadow for 层次. Use 1px borders or saturated accent 填充 instead.
• Don't use square corners. Every inter激活 and content 容器 is rounded.
• Don't use Manuka for UI, 按钮, or 正文 copy. It's strictly display.
• Don't use lowercase mono. PolySans Mono is always UPPERCASE.
• Don't let mint and ultraviolet appear as 背景 washes — they're hazard accents, not canvas tints.
• Don't use 渐变 anywhere. The 系统 is solid 颜色 blocks only.
• Don't introduce new accent 颜色 outside the declared mint / purple / yellow / pink / orange 图块 palette.
• Don't pair Manuka with FK Roman Standard in the same 标题 cluster — Manuka is the only display shout, serif pulls are 专用于 正文 moments.
• Don't use #3cffd0 文本 on a #131313 背景 at 在……下方 16px — the contrast vibrates at small sizes.

8. 响应式行为

断点

The dembrandt sweep detected 26 intermediate breakpoints (1300 → 1280 → 1200 → 1181 → 1180 → 1179 → 1024 → 1023 → 901 → 900 → 897 → 896 → 890 → 769 → 768 → 620 → 605 → 600 → 550 → 549 → 530 → 426 → 425 → 400 → 320). The Verge tunes its 网格 at virtually every major device boundary — an unusually aggressive responsive strategy.

触控目标

• 主色 pill 按钮 are ~44px 最小 高度 (10px 垂直 内边距 + 16px 文本 + 2px 边框) — 满足 WCAG AA.
• Mono uppercase nav 链接 are smaller (~28–32px tall) — for derivative work, pad to 44px on 移动端.
• Circle 图标 按钮 are 40–44px circles, 适合触控.

折叠策略

• Nav: 字标 从……缩放 首屏 (Manuka 60–107px) to ~24–32px on 移动端. 类别 链接 collapse to a hamburger 抽屉 below 900px.
• 网格: 4-col → 3-col → 2-col → 1-col. 特性 卡片 that span 2 列 on 桌面端 reflow to 全宽 单列 on 移动端.
• 间距: 区块 内边距 tightens from 64px → 32px → 20px. 图块 interior 内边距 tightens from 32px → 20px.
• Type: Manuka 首屏 从……缩放 107px to ~48–54px on 移动端. PolySans 标题 scale from 34px → 24px. Mono 标签 stay pinned at 11–12px (they don't shrink further or they become 不可读).
• 颜色 图块: accent story blocks never lose saturation on 移动端 — they just reflow to full 宽度.

图像行为

• 响应式栅格图像 via srcset, aspect ratios preserved.
• 不进行艺术指导裁剪切换 — 相同裁剪 scales 贯穿 all 视口.
• loading="lazy" on everything 首屏之下, eager on the masthead 首屏.
• 图像 inside 颜色-block 图块 inherit the 图块's inner 圆角 (4px or 20px nested).

9. 智能体提示指南

快速配色参考

• 主色 CTA: "Jelly Mint (#3cffd0)"
• 背景 (Canvas): "Canvas Black (#131313)"
• Accent (次色 Hazard): "Verge Ultraviolet (#5200ff)"
• 标题 文本: "Hazard White (#ffffff)"
• 正文 文本: "Hazard White (#ffffff)" (primary) or "Muted 文本 (#e9e9e9)"
• 次色 文本 / 元数据: "次色 文本 (#949494)"
• 卡片 边框: "Hazard White (#ffffff)" hairline on dark, "Console Mint Border (#309875)" on mint variants
• 链接 悬停: "Deep Link Blue (#3860be)"

组件提示示例

1. "Create a StoryStream 时间线 item on a #131313 canvas: a 20px-圆角 rectangle with a 1px solid #ffffff 边框, a PolySans Mono 11px / 600 / UPPERCASE / 1.1px tracking 时间戳 on the left 轨道, a 12px PolySans UPPERCASE kicker in mint (#3cffd0), and a 24px / 700 PolySans 标题 in white below. 无阴影, no lift — 悬停 only shifts the 标题 颜色 to #3860be."
2. "Design a primary subscribe 按钮 with a Jelly Mint (#3cffd0) fill, black 文本 in PolySans Mono 12px / 600 / UPPERCASE / 1.5px tracking, 24px 边框 圆角, 10px × 24px 内边距. 悬停状态 shifts to rgba(255, 255, 255, 0.2) 背景 with a 1px #c2c2c2 ring 阴影, 180ms ease."
3. "Build a 特性 首屏 with a 107px Manuka 900 标题 in white with 1.07px letter-间距 and 0.80 line-高度, a thin-字重 300 PolySans 20px capitalized kicker above with 1.9px tracking, on a #131313 canvas with 64px 垂直 内边距."
4. "Create a 颜色-block accent 图块 filled with Verge Ultraviolet (#5200ff) at 0.9 alpha, 24px 边框 圆角, white 文本, a PolySans Mono 11px UPPERCASE 类别 标签 with 1.5px tracking at the top, and a 32px PolySans 400 capitalized 标题 with 0.32px tracking below."
5. "Design a dark slate secondary 按钮 with a #2d2d2d 背景, #e9e9e9 PolySans 16px 文本, 24px 圆角 pill shape, 10px × 24px 内边距. 悬停 匹配 the primary 按钮 — translucent white rgba(255, 255, 255, 0.2) bg with black 文本."

迭代指南

When refining existing screens generated with this design 系统:

1. Audit the canvas. If you see a light 背景 anywhere on the 主页, flatten it to #131313. There is 无浅色模式.
2. Audit corners. Every rectangle should land on 2/3/4/20/24/30/40px or 50%. Square corners break the voice.
3. Audit 阴影. Strip every box-shadow that isn't a 1px inset underline or a 1px hazard-颜色 边框. The Verge uses 颜色 for 层次, not 阴影.
4. Audit type roles. Manuka only ≥60px. PolySans Mono only UPPERCASE. PolySans 300 at 19–20px should have 1.9px tracking. FK Roman only for 正文/magazine moments, never UI.
5. Audit accent usage. Mint and ultraviolet should appear as hazard accents — 按钮, 1px borders, 激活 underlines, saturated 图块 填充. If they're appearing as 背景 washes or 渐变 fades, correct to solid blocks.
6. Audit 标签. Every kicker, 时间戳, 类别 tag, and 按钮 标签 should be ALL CAPS with 1.1–1.9px letter-间距. Missing tracking = missing voice.
7. Audit 链接 悬停. Every 链接, regardless of its base 颜色, should 悬停 to #3860be deep link blue with no underline. Any other 悬停 颜色 is drift.