Sentry

version: alpha name: Sentri-Inspired-design-analysis description: An inspired interpretation of Sentri's design language — a developer-tools brand built on a deep purple-violet midnight canvas, electric lime accents, and a slightly subversive illustrated personality. The system pairs a custom display sans (chunky, playful, near-condensed) with the open Rubik family for UI copy and Monaco for code, then leans on dark-on-light pricing surfaces, sticker-style mascots, and a single-color CTA hierarchy where black-violet buttons read as the primary action against either polarity.

colors: primary: "#150f23" ink-deep: "#1f1633" on-primary: "#ffffff" accent-lime: "#c2ef4e" accent-pink: "#fa7faa" accent-violet: "#6a5fc1" accent-violet-deep: "#422082" accent-violet-mid: "#79628c" surface-canvas-dark: "#1f1633" surface-canvas-light: "#ffffff" surface-night: "#150f23" surface-press-light: "#f0f0f0" surface-press-stronger: "#efefef" hairline-violet: "#362d59" hairline-cool: "#cfcfdb" hairline-cloud: "#e5e7eb" ink: "#1f1633" ink-press: "#1a1a1a" on-dark-muted: "#bdb8c0" on-dark-faint: "#3f3849" ring-focus: "#9dc1f5"

typography: display-hero: fontFamily: "Sentri Display, Rubik, system-ui, sans-serif" fontSize: 88px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0 display-large: fontFamily: "Sentri Display, Rubik, system-ui, sans-serif" fontSize: 60px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0 heading-xl: fontFamily: "Rubik, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 30px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0 heading-lg: fontFamily: "Rubik, -apple-system, system-ui, sans-serif" fontSize: 27px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0 heading-md: fontFamily: "Rubik, -apple-system, system-ui, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0 heading-sm: fontFamily: "Rubik, -apple-system, system-ui, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 1.25 letterSpacing: 0 body-lg: fontFamily: "Rubik, -apple-system, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0 body-strong: fontFamily: "Rubik, -apple-system, system-ui, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0 body-md: fontFamily: "Rubik, -apple-system, system-ui, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0 eyebrow: fontFamily: "Rubik, -apple-system, system-ui, sans-serif" fontSize: 15px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 button-cap: fontFamily: "Rubik, -apple-system, system-ui, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.14 letterSpacing: 0.2px button-cap-light: fontFamily: "Rubik, -apple-system, system-ui, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.29 letterSpacing: 0.2px caption: fontFamily: "Rubik, -apple-system, system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0 micro-cap: fontFamily: "Rubik, -apple-system, system-ui, sans-serif" fontSize: 10px fontWeight: 600 lineHeight: 1.8 letterSpacing: 0.25px code: fontFamily: "Monaco, Menlo, Ubuntu Mono, monospace" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 code-strong: fontFamily: "Monaco, Menlo, Ubuntu Mono, monospace" fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0

rounded: xs: 4px sm: 6px md: 8px lg: 10px xl: 12px xxl: 18px full: 9999px

spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px section: 96px

components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-cap}" rounded: "{rounded.md}" padding: 12px 16px button-primary-pressed: backgroundColor: "{colors.surface-press-stronger}" textColor: "{colors.ink-press}" typography: "{typography.button-cap}" rounded: "{rounded.md}" padding: 12px 16px button-inverted: backgroundColor: "{colors.on-primary}" textColor: "{colors.ink-deep}" typography: "{typography.button-cap}" rounded: "{rounded.md}" padding: 12px 16px button-inverted-pressed: backgroundColor: "{colors.surface-press-light}" textColor: "{colors.ink-press}" typography: "{typography.button-cap}" rounded: "{rounded.md}" padding: 12px 16px button-ghost-on-dark: backgroundColor: "{colors.on-dark-faint}" textColor: "{colors.on-primary}" typography: "{typography.button-cap}" rounded: "{rounded.xl}" padding: 8px button-violet-token: backgroundColor: "{colors.accent-violet-mid}" textColor: "{colors.on-primary}" typography: "{typography.button-cap-light}" rounded: "{rounded.xl}" padding: 8px 16px button-disabled: backgroundColor: "{colors.hairline-cloud}" textColor: "{colors.on-dark-muted}" typography: "{typography.button-cap}" rounded: "{rounded.md}" padding: 12px 16px pill-neutral-dark: backgroundColor: "{colors.surface-night}" textColor: "{colors.on-primary}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 4px 8px chip-lime-keyword: backgroundColor: "{colors.accent-lime}" textColor: "{colors.ink-deep}" typography: "{typography.display-hero}" rounded: "{rounded.xs}" padding: 0 12px text-input: backgroundColor: "{colors.surface-canvas-light}" textColor: "{colors.ink-deep}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 8px 12px text-input-focused: backgroundColor: "{colors.surface-canvas-light}" textColor: "{colors.ink-deep}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 8px 12px select-violet: backgroundColor: "{colors.accent-violet-deep}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 8px 16px card-pricing: backgroundColor: "{colors.surface-canvas-light}" textColor: "{colors.ink-deep}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: 32px card-pricing-featured: backgroundColor: "{colors.surface-night}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: 32px card-feature-dark: backgroundColor: "{colors.ink-deep}" textColor: "{colors.on-primary}" typography: "{typography.body-lg}" rounded: "{rounded.xxl}" padding: 32px card-spotlight-violet: backgroundColor: "{colors.accent-violet-deep}" textColor: "{colors.on-primary}" typography: "{typography.body-lg}" rounded: "{rounded.xxl}" padding: 32px code-block: backgroundColor: "{colors.surface-night}" textColor: "{colors.on-primary}" typography: "{typography.code}" rounded: "{rounded.md}" padding: 16px link-on-dark: backgroundColor: "{colors.surface-canvas-dark}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 0px link-on-light: backgroundColor: "{colors.surface-canvas-light}" textColor: "{colors.ink-deep}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 0px nav-bar-light: backgroundColor: "{colors.surface-canvas-light}" textColor: "{colors.ink-deep}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 16px 24px footer-light: backgroundColor: "{colors.surface-canvas-light}" textColor: "{colors.ink-deep}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 32px 24px

概述

Sentri 的设计语言读起来像一件穿着皮夹克的调试控制台。首页与产品表面建立在一个近黑紫色午夜（{colors.surface-canvas-dark} / {colors.surface-night}）上，撒满了星空纹理与漂浮的贴纸风格吉祥物——宇航员、怪兽、交通锥——它们刺破了可观测性产品的那种严肃感。标题使用一款粗壮的专有展示无衬线字体，其中最重要的关键词被包裹在柠檬绿高亮芯片（{colors.accent-lime}）里，仿佛文案本身被一个开发者在自己的控制台输出上做了标注。

调色板被刻意收窄：深午夜作为主导画布，电光柠檬绿作为主要吸睛色，亮粉色（{colors.accent-pink}）作为次级点缀，以及中紫（{colors.accent-violet-mid}）用于标签芯片与细线描边。白色以两种角色出现——作为深色上的文字，以及作为定价、联系、内容密集型页面的画布，让开发者可以扫描密集的表格。"单一主 CTA"在不同语境下视觉上是反相的：在浅色表面上使用填充的黑紫色（{colors.primary}）配白色字，在深色表面上使用填充的白色配深色字。无论哪种极性，按钮始终呈现为最强的 UI 元素。

字体排版清晰地分为三个字体族：一款用于首屏与段落的专有展示无衬线（粗壮、略紧凑、略带玩味），Rubik 用于所有 UI 文本角色（正文、说明、小标签、按钮标签），Monaco 用于代码。按钮与小标签几乎总是大写，并提升 0.2px 字距，给它们带来控制台输出的干脆感。

关键特征：

• 双极性画布系统：深紫色午夜（{colors.surface-canvas-dark}）用于营销首屏与产品功能页，白色（{colors.surface-canvas-light}）用于定价、联系与密集参考内容——系统从不试图模糊二者。
• 柠檬绿关键词高亮（{colors.accent-lime}）被视为一种字体排版手段，而非色卡——它在展示标题内包裹单个词，作为阅读流上的语法高亮。
• 贴纸插画系统：漂浮的吉祥物角色配手绘轮廓，出现在段落交界处，从不出现在卡片内——它们在密集的信息块之间营造节奏与个性。
• {typography.button-cap} 与 {typography.eyebrow} 中的大写小标签与按钮文本，统一提升 0.2px 字距，赋予品牌"开发者控制台"的节奏感。
• 单一主 CTA 层级：每个页面都有一个填充按钮，在浅色表面读为 {colors.primary}，在深色表面读为 {colors.on-primary}；描边与幽灵变体为降级选项。
• 卡片表面跟随画布：深色段嵌套深色卡片（{colors.ink-deep} 带微妙细线），浅色段嵌套带 {colors.hairline-cloud} 边框的白色卡片——外壳保持一致，只有极性翻转。
• 定价页的色彩节奏：奶油白层级加一个深色反相的"特色"层级（{colors.surface-night}），避开典型的强调色边框特色样式。

配色

来源页面： 首页（/welcome/）、产品/错误监控、联系/企业、定价。

品牌与强调色

• Midnight Violet（{colors.primary} — #150f23）：系统的主操作色，也是最深的表面调。用于浅色表面的填充主按钮、代码块背景与最强的深色卡片。
• Ink Violet（{colors.ink-deep} — #1f1633）：相对 primary 略浅，是营销首屏的画布，也是浅色表面上的默认正文颜色——一个 token 同时承担背景与墨水双重角色。
• Electric Lime（{colors.accent-lime} — #c2ef4e）：标志性的高亮色。包裹在展示标题中的单个关键词周围作为语法高亮芯片（{rounded.xs} 圆角，无垂直内边距，12px 水平内边距）。也用作页脚波浪分隔描边。从不用作按钮背景。
• Hot Pink（{colors.accent-pink} — #fa7faa）：次级点缀色，用于贴纸描边、图表点与辅助强调——从不用于按钮，从不用于正文字号。
• Violet Link（{colors.accent-violet} — #6a5fc1）：当需要超出下划线的强调时的行内链接颜色。
• Deep Violet（{colors.accent-violet-deep} — #422082）：联系表单上的下拉框填充；也用于深色段内的焦点卡片。
• Mid Violet（{colors.accent-violet-mid} — #79628c）：标签芯片填充与深色表面上的微弱强调。

表面

• Dark Canvas（{colors.surface-canvas-dark} — #1f1633）：首屏、产品与功能页背景。承载最深的氛围重量。
• Night（{colors.surface-night} — #150f23）：深色画布上的卡片、代码块以及"特色"定价层级。
• Light Canvas（{colors.surface-canvas-light} — #ffffff）：定价、联系与密集参考页背景。
• Surface Press Light（{colors.surface-press-light} — #f0f0f0）与 Press Stronger（{colors.surface-press-stronger} — #efefef）：深色表面上反相按钮的按下/激活填充。
• Hairline Violet（{colors.hairline-violet} — #362d59）：深色卡片上的 1px 边框。
• Hairline Cool（{colors.hairline-cool} — #cfcfdb）：文本输入框与表单字段上的 1px 边框。
• Hairline Cloud（{colors.hairline-cloud} — #e5e7eb）：浅色画布上的定价表分隔线与定价卡片边框。

文本

• On Primary（{colors.on-primary} — #ffffff）：深色画布上的所有文本，填充深色按钮上的所有 CTA 标签。
• Ink（{colors.ink} — #1f1633）：浅色画布上的正文；与深色画布十六进制相同，被重新用作文字。
• Ink Press（{colors.ink-press} — #1a1a1a）：保留给反相按钮的按下/激活状态。
• On Dark Muted（{colors.on-dark-muted} — rgba(255,255,255,0.72))：深色画布上的次级文本、说明与表格单元格值。
• On Dark Faint（{colors.on-dark-faint} — rgba(255,255,255,0.18))：半透明表面于深色之上——用于幽灵按钮填充与弱化的导航项。

语义色

• Focus Ring（{colors.ring-focus} — rgba(59,130,246,0.5)）：半透明蓝色焦点环——系统中唯一的蓝色，保留给表单字段的键盘焦点。

字体排版

字体族

展示层级是一款专有的几何无衬线字体，具有粗壮、近乎紧凑的比例与略带反叛的个性（收紧的字怀、可视化字形）。不可用时回退到 Rubik 的较重字重视觉延续。

UI 层级是 Rubik——一款开源的希伯来/拉丁无衬线字体，在 Google Fonts 上——配合系统回退（-apple-system, system-ui, Segoe UI, Helvetica, Arial）。Rubik 承担所有正文、说明、按钮与小标签角色。

代码层级是 Monaco，配合 Menlo 与 Ubuntu Mono 回退——用于代码块、安装代码片段与行内 token。

层级

原则

• 两种行高世界。 营销文案在 {typography.body-lg} 上使用 2.0 行高——极度轻盈、慷慨的呼吸空间。功能 UI 文案在 {typography.body-md} 上使用 1.5 行高——更密集，更接近控制台输出。这个选择是有意为之：营销读起来像散文，产品读起来像日志。
• 大写配字距。 所有按钮标签与小标签都是大写并提升 0.2px 字距。这是品牌的字体排版签名——一种应用到 UI 元素上的控制台提示符节奏。
• 标题即语法。 首屏展示被结构化为可以包裹一个 {colors.accent-lime} 高亮芯片而不打断阅读顺序。将柠檬绿芯片视为字符级装饰，而非独立组件。

字体替代说明

Rubik 是 Google Fonts 上的开源字体，是除首屏展示外所有内容的稳妥默认。对于专有展示无衬线字体，合适的开源替代品包括 Space Grotesk（较重字重）、Archivo（半紧凑字重）或较重端的 Hubot Sans 带 optical-size 轴——都具备相同的粗壮、接近紧凑的轮廓。替代时将行高下调 0.05，因为专有字体在大尺寸下行距更紧。

布局

间距系统

• 基础单位：8px
• Tokens：{spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.section} 96px
• 段内边距：桌面端主要页带之间为 {spacing.section} 96px，移动端折叠为 {spacing.xxl} 32px–48px。
• 卡片内边距：定价卡片与大功能卡片为 {spacing.xxl} 32px；紧凑标签/徽标组为 {spacing.lg} 16px。
• 表单字段内边距：{spacing.sm} 8px 垂直，{spacing.md} 12px 水平——与 text-input token 直接匹配。

网格与容器

• 营销页面使用宽居中容器与慷慨的外槽；最大宽度约 1152px（其中一个提取出的断点），内容在 12 个概念列中弹性分布。
• 定价页分为桌面的 4 层卡片行，中宽度折叠为 2 列，移动端折叠为 1 列。
• 联系表单使用 2 列字段布局（姓/名并排），位于单个浅色画布面板内。
• 断点阶梯为 1440 → 1152 → 992 → 768 → 640 → 576——参见响应式行为。

留白哲学

深色画布吸收留白的方式与浅色不同。在深色表面上，品牌将 {spacing.section} 慷慨地延伸到带与带之间，让漂浮的吉祥物与星空纹理拥有呼吸空间。在浅色表面（定价、联系）上，留白收紧——内容密度优先，因为用户在扫描、比较与行动。经验法则：首屏与功能表面宽裕，交易型表面密集。

层次与深度

装饰性深度

Sentri 的深度不来自投影阴影——而来自首屏画布上的星空纹理（低透明度的白底紫点）、漂浮的贴纸吉祥物（配手绘轮廓与饱和填充，分层在画布之上无阴影），以及页脚上方的柠檬绿波浪分隔线。这些插画元素承担了较扁平的设计系统中阴影栈的工作——它们告诉眼睛一段在哪里结束、下一段在哪里开始。

形状

圆角比例

摄影几何

网站不使用传统摄影——而是使用插画贴纸与产品 UI 截图，扮演相当的几何角色。产品 UI 模型位于 {rounded.xxl} 18px 容器内，通常略微倾斜偏离轴线，置于深色画布上无边框。贴纸吉祥物完全没有容器——它们直接分层在画布之上，经常跨越段边界以打破网格。头像处理（客户 logo 条中）是简单的灰阶字标，而非照片。

组件

未记录任何悬停态。 以下每个规范仅展示 Default 与 Pressed/Active 状态。变体作为正式条目列在 front-matter 的 components: 块中。

按钮

button-primary — 浅色表面上的主导 CTA。

• 背景 {colors.primary}，文本 {colors.on-primary}，字体 {typography.button-cap}（大写、14px / 700、0.2px 字距），内边距 {spacing.md} {spacing.lg}（12px 16px），圆角 {rounded.md}。在深色首屏表面上，添加 level-3 光晕以强调。
• 按下态存在于 button-primary-pressed：背景翻转到 {colors.surface-press-stronger}，文本翻转到 {colors.ink-press}。按钮在按下时实际上交换极性。

button-inverted — 深色画布上的主导 CTA；视觉上相同的层级，极性翻转。

• 背景 {colors.on-primary}（白），文本 {colors.ink-deep}，相同的 {typography.button-cap}，圆角 {rounded.md}。
• 按下态存在于 button-inverted-pressed：背景降至 {colors.surface-press-light}，文本降至 {colors.ink-press}。

button-ghost-on-dark — 深色画布上的次级 CTA（例如"Get Demo"在"Get Started"旁边）。

• 半透明填充 {colors.on-dark-faint}，文本 {colors.on-primary}，字体 {typography.button-cap}，内边距 {spacing.sm}（8px），圆角 {rounded.xl}。半透明填充让画布纹理透出。

button-violet-token — 胶囊形标签/分类按钮，内联用于产品导航。

• 背景 {colors.accent-violet-mid}，文本 {colors.on-primary}，字体 {typography.button-cap-light}，内边距 {spacing.sm} {spacing.lg}（8px 16px），圆角 {rounded.xl}，1px 略深的紫色细线边框。

button-disabled

• 背景 {colors.hairline-cloud}，文本 {colors.on-dark-muted}，其他与 button-primary 相同。

卡片与容器

card-pricing — 定价页上的标准层级卡片。

• 背景 {colors.surface-canvas-light}，文本 {colors.ink-deep}，内边距 {spacing.xxl} 32px，圆角 {rounded.xl} 12px，1px {colors.hairline-cloud} 边框。顶部标题使用 {typography.heading-md}，价格使用 {typography.display-large}，功能列表使用 {typography.body-md}，主 CTA 钉在卡片底部。

card-pricing-featured — 深色反相的"特色"层级（Sentri 使用 Business 层作为特色层）。

• 背景 {colors.surface-night}，文本 {colors.on-primary}，其他结构与 card-pricing 相同。反相（而非强调色边框的浅色卡片）是品牌的标志性选择——特色层读起来像品牌的声音，而非营销装饰。

card-feature-dark — 深色表面上的大功能带卡片，用于锚定产品功能说明。

• 背景 {colors.ink-deep}，文本 {colors.on-primary}，内边距 {spacing.xxl} 32px，圆角 {rounded.xxl} 18px。通常包含 UI 模型加 27px 标题加 16px 正文。

card-spotlight-violet — 强调色功能卡片，使用更深的紫色填充，用于"Sentry 独有"能力带。

• 背景 {colors.accent-violet-deep}，文本 {colors.on-primary}，内边距 {spacing.xxl}，圆角 {rounded.xxl}。深紫色读起来像功能高亮，同时不脱离品牌的紫色家族。

code-block — 代码/安装代码片段。

• 背景 {colors.surface-night}，文本 {colors.on-primary} 使用 {typography.code} 渲染。内边距 {spacing.lg} 16px，圆角 {rounded.md}。在深色画布上代码块几乎与画布齐平——只有略深的填充区分。

输入与表单

text-input — 联系表单的姓/名/邮箱等字段。

• 背景 {colors.surface-canvas-light}，文本 {colors.ink-deep}，字体 {typography.body-md}，内边距 {spacing.sm} {spacing.md}（8px 12px），圆角 {rounded.sm} 6px，1px {colors.hairline-cool} 边框。
• 焦点态存在于 text-input-focused：相同填充，但增加内阴影 rgba(0,0,0,0.15) 0 2px 10px inset 以暗示向内的深度。

select-violet — 深色联系面板内使用的下拉变体。

• 背景 {colors.accent-violet-deep}，文本 {colors.on-primary}，字体 {typography.body-md}，内边距 {spacing.sm} {spacing.lg}，圆角 {rounded.md}。特色在于它不模仿普通文本输入——它读起来像有意的品牌表面。

导航

nav-bar-light — 浅色页面（定价、联系、文档）的标准顶部导航。

• 背景 {colors.surface-canvas-light}，文本 {colors.ink-deep}，字体 {typography.body-md}。左侧约 145×32px 的字标 logo，中部主导航项配下拉箭头，右侧 Get Demo 幽灵 + Get Started 填充 button-primary 一对。内边距 {spacing.lg} {spacing.xl}（16px 24px）。

顶部导航（深色变体） — 用于首页；结构相同但极性反相，位于 {colors.surface-canvas-dark} 上。右侧按钮变为 button-inverted。

移动端导航 — 在 768px 断点以下折叠为汉堡切换；下拉箭头变为全宽折叠项。

胶囊、徽标与高亮芯片

pill-neutral-dark — 深色表面上的小状态/分类胶囊。

• 背景 {colors.surface-night}，文本 {colors.on-primary}，字体 {typography.caption} 12px，内边距 {spacing.xs} {spacing.sm}（4px 8px），圆角 {rounded.xs} 4px。

chip-lime-keyword — 包裹首屏展示标题中单个单词的标志性行内高亮。

• 背景 {colors.accent-lime}，文本 {colors.ink-deep}，字体与周围的 {typography.display-hero} 匹配，圆角 {rounded.xs} 4px，内边距 0 {spacing.md}（12px 水平，0 垂直，所以芯片紧贴字高）。

标志性组件

贴纸吉祥物层 — 插画角色（宇航员、卡通怪兽、交通锥、调试头像）配手绘轮廓与饱和的 {colors.accent-pink} / {colors.accent-lime} 填充。吉祥物置于段交界处，经常跨越段边界 30–40% 自身高度，无容器或阴影。它们充当装饰性段标识与品牌个性载体——从不位于卡片内，从不作为按钮。

柠檬绿波浪页脚分隔线 — 一条手绘的 {colors.accent-lime} 波浪线，约 3px 描边，位于页脚上方的全容器宽度。取代了本应是 1px 细线分隔线的地方，化为充满个性的修饰。

星空首屏纹理 — 一层淡淡的白底紫点图案覆盖在首屏画布上，透明度极低。在不显式装饰的情况下为深色画布增加氛围深度。作为背景图像实现，而非重复的 CSS。

窗口外壳 UI 模型 — 产品 UI 截图被 {rounded.xxl} 容器框住，经常倾斜 ±2–3 度偏离轴线，置于深色功能页上跨越段边界。窗口外壳本身只是一个圆角图像配以微妙的细线；内容就是实际的产品 UI。

link-on-dark — 深色表面上正文中的行内链接。默认文本为 {colors.on-primary}，使用 {typography.body-md} 渲染，带持续的下划线；下划线就是整个可点击暗示，无颜色变化。贴齐文案无内边距，除继承的 {rounded.xs} 外无圆角。

link-on-light — 浅色表面上正文中的行内链接。形状契约与 link-on-dark 相同，但文本为 {colors.ink-deep}。用于定价、联系与文档表面。

footer-light — 浅色画布模板（定价、联系、文档）的全站页脚。

• 背景 {colors.surface-canvas-light}，文本 {colors.ink-deep}，字体 {typography.caption}，内边距 {spacing.xxl} {spacing.xl}（32px 24px）。顶部为柠檬绿波浪分隔线——参见标志性组件。包含 3 到 4 列链接组、底部右侧横向排列的社交图标，以及最底部使用 {typography.caption} 的小法律/版权行。

推荐与避免

推荐

• 将 {colors.accent-lime} 保留给展示标题中的关键词高亮芯片以及页脚波浪分隔线——永远不要用作按钮背景，永远不要用作正文。
• 每个 button-primary 配 {typography.button-cap} 大写并提升 0.2px 字距——节奏是品牌的一部分，而非风格选项。
• 将深色画布（{colors.surface-canvas-dark}）与浅色画布（{colors.surface-canvas-light}）视为两个完整的世界——让一个掌管营销/功能页，另一个掌管交易型页面，不要走中间路线。
• 使用贴纸吉祥物打破段边界——让它们重叠、倾斜、漂浮；将它们约束在卡片内会削弱它们的个性。
• 使用 card-pricing-featured（深色反相层级）代替强调色边框的浅色层级，作为特色定价列。
• 功能 UI 表面默认正文行高 1.5，营销表面 2.0——差异是有意为之。

避免

• 不要在 {colors.accent-lime} 与 {colors.accent-pink} 之外引入额外的强调色——添加青色、橙色或黄色会稀释紫与柠檬绿的标志性。
• 不要在深色画布上的卡片上应用投影阴影——深度来自纹理与插画，而非会弄脏紫色的浅底深阴影。
• 不要将 {typography.display-hero}（88px）用于营销首屏以外的任何地方——甚至子页面也最多用 {typography.display-large}（60px）。
• 不要将正文设为 {colors.accent-lime}——它是芯片颜色，不是正文字色，在正文字号下会破坏对比度。
• 不要把 {colors.primary} 按钮柔化为品牌紫——近黑就是要点；无论画布极性如何，它都读为最具权威感的操作。
• 不要把插画吉祥物放进卡片或受限容器内——它们的工作是打破网格，而非占据网格。

响应式行为

断点

触控目标

• 主按钮在移动端达到最小 44×44px（12px 垂直内边距 × 16px 字体 + 行高 ≈ 44px）。符合 WCAG AAA 触控目标规范。
• 导航与功能表面上的胶囊标签与徽标即使在小移动断点下也保持高于 32×32px；必要时放大而非缩小。
• 表单字段在移动端联系页上保持 44px 最小高度。

折叠策略

• 首屏展示标题 从 88px → 60px → 48px 阶梯式下降；柠檬绿关键词芯片在每一步都保留内边距与圆角。
• 定价层级 4 列 → 2 列 → 1 列阶梯式折叠。特色深色层级始终保持视觉区别——在任何断点下都不会失去反相。
• 贴纸吉祥物 逐渐被弱化：桌面端跨越段边界；平板端移入段内边距；小移动端大多通过 display: none 隐藏以保持内容可扫读。
• 顶部导航 在 768px 以下折叠为汉堡；下拉菜单使用与页面相同的画布极性（首屏深色，定价浅色）。
• 代码块 在每个断点下保留 16px Monaco——从不缩小——但在溢出时切换为横向滚动而非换行。

图像行为

• 产品 UI 模型按比例缩放；在小移动端经常锚定到一侧并横向溢出，而非缩小到难以辨认。
• 贴纸吉祥物在移动断点下缩放 50–70%，保留个性但让出屏幕空间给内容。
• 柠檬绿页脚波浪线将 SVG 缩放到容器宽度，同时保持描边宽度视觉上一致。

迭代指南

1. 一次专注于一个组件。不要重建系统——而是扩展它。
2. 直接引用组件名与 token（{colors.accent-lime}、{button-primary}-pressed、{rounded.xxl}）——不要意译。
3. 编辑后运行 npx @google/design.md lint DESIGN.md ——broken-ref、contrast-ratio 与 orphaned-tokens 警告会自动标记问题。
4. 将新变体作为单独的组件条目（-pressed、-disabled、-focused）添加——不要将它们埋在散文中。
5. 产品 UI 正文默认使用 {typography.body-md}，营销散文使用 {typography.body-lg}——行高差异是有意且承重的。
6. 保持 {colors.accent-lime} 的稀缺——每个视口一个柠檬绿元素。标志性之所以有效正是因为它罕见。
7. 当为新表面选择极性时，选择一个画布（{colors.surface-canvas-dark} 或 {colors.surface-canvas-light}）并坚持下去；不要在同一页带内混用两者。