PostHog

version: alpha name: PostHog-design-analysis description: | A playful developer-tools system rendered on a warm cream canvas with hand-drawn hedgehog mascots dotted across every page like marginalia in a sketchbook. The chrome reads like a friendly engineering blog: olive-gray ink (#4d4f46) for body, deep olive-charcoal (#23251d) for headlines, IBM Plex Sans Variable typography in tight 1.43-line-height paragraphs, and a single saturated yellow-orange CTA pill (#f7a501) carrying every primary action. The system actively rejects the genre's typical somber dark-tech aesthetic in favor of a creamy, textbook-illustration sensibility — bordered cards stack on the cream canvas with 4–6px radii, doc sidebars use rounded outline-icon mini-illustrations, and the home page leans on cartoon characters (hedgehogs in lab coats, hedgehogs at terminals, hedgehogs in lounge chairs) as its signature decoration. Code samples and product analytics charts live inside white-on-cream cards with thin olive borders; the contrast between the playful illustration and the data-dense product imagery is the brand's signature voice.

colors: primary: "#f7a501" primary-pressed: "#dd9001" primary-active: "#b17816" on-primary: "#23251d" ink: "#23251d" body: "#4d4f46" charcoal: "#33342d" mute: "#6c6e63" ash: "#9b9c92" stone: "#b6b7af" hairline: "#bfc1b7" hairline-soft: "#dcdfd2" on-dark: "#ffffff" canvas: "#eeefe9" surface-soft: "#e5e7e0" surface-card: "#ffffff" surface-doc: "#fcfcfa" surface-dark: "#23251d" link-blue: "#1d4ed8" link-teal: "#1078a3" accent-blue: "#2c84e0" accent-blue-soft: "#dceaf6" accent-red: "#cd4239" accent-red-soft: "#f7d6d3" accent-green: "#2c8c66" accent-green-soft: "#d9eddf" accent-purple: "#7c44a6" accent-purple-soft: "#e7d8ee" focus-ring: "rgba(59,130,246,0.5)"

typography: display-xl: fontFamily: IBM Plex Sans Variable fontSize: 36px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0 display-lg: fontFamily: IBM Plex Sans Variable fontSize: 24px fontWeight: 800 lineHeight: 1.33 letterSpacing: -0.6px heading-lg: fontFamily: IBM Plex Sans Variable fontSize: 21px fontWeight: 700 lineHeight: 1.4 letterSpacing: -0.5px heading-md: fontFamily: IBM Plex Sans Variable fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0 heading-sm: fontFamily: IBM Plex Sans Variable fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0 textTransform: uppercase heading-sm-mixed: fontFamily: IBM Plex Sans Variable fontSize: 18px fontWeight: 600 lineHeight: 1.56 letterSpacing: 0 body-md: fontFamily: IBM Plex Sans Variable fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-strong: fontFamily: IBM Plex Sans Variable fontSize: 16px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: IBM Plex Sans Variable fontSize: 15px fontWeight: 400 lineHeight: 1.71 letterSpacing: 0 body-sm-strong: fontFamily: IBM Plex Sans Variable fontSize: 15px fontWeight: 600 lineHeight: 1.71 letterSpacing: 0 body-xs: fontFamily: IBM Plex Sans Variable fontSize: 14px fontWeight: 500 lineHeight: 1.43 letterSpacing: 0 caption-md: fontFamily: IBM Plex Sans Variable fontSize: 14px fontWeight: 700 lineHeight: 1.71 letterSpacing: 0 caption-sm: fontFamily: IBM Plex Sans Variable fontSize: 13px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0 caption-xs: fontFamily: IBM Plex Sans Variable fontSize: 12px fontWeight: 600 lineHeight: 1.33 letterSpacing: 0 textTransform: uppercase utility-xs: fontFamily: IBM Plex Sans Variable fontSize: 12px fontWeight: 700 lineHeight: 1.33 letterSpacing: 0 textTransform: uppercase link-md: fontFamily: IBM Plex Sans Variable fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 button-md: fontFamily: IBM Plex Sans Variable fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0 button-sm: fontFamily: IBM Plex Sans Variable fontSize: 13px fontWeight: 500 lineHeight: 1 letterSpacing: 0 code-sm: fontFamily: ui-monospace fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0 code-xs: fontFamily: Source Code Pro fontSize: 14px fontWeight: 500 lineHeight: 1.43 letterSpacing: 0

rounded: none: 0px xs: 2px sm: 4px md: 6px lg: 8px full: 9999px

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

components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 8px 16px height: 40px button-primary-pressed: backgroundColor: "{colors.primary-pressed}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" button-secondary: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 8px 16px height: 40px button-tertiary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 8px 12px button-disabled: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ash}" rounded: "{rounded.md}" text-input: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 8px 12px height: 36px text-input-focused: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.md}" search-input: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 8px 12px height: 36px product-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 24px doc-card: backgroundColor: "{colors.surface-doc}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 24px feature-tile: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.heading-sm-mixed}" rounded: "{rounded.md}" padding: 20px pricing-tier-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 32px hedgehog-mascot-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 24px product-tab: backgroundColor: "transparent" textColor: "{colors.body}" typography: "{typography.body-strong}" rounded: "{rounded.md}" padding: 8px 12px product-tab-active: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-strong}" rounded: "{rounded.md}" pill-tab: backgroundColor: "transparent" textColor: "{colors.body}" typography: "{typography.button-sm}" rounded: "{rounded.full}" padding: 6px 14px pill-tab-active: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.button-sm}" rounded: "{rounded.full}" badge-uppercase: backgroundColor: "transparent" textColor: "{colors.body}" typography: "{typography.utility-xs}" rounded: "{rounded.none}" badge-promo: backgroundColor: "{colors.accent-blue-soft}" textColor: "{colors.link-blue}" typography: "{typography.caption-xs}" rounded: "{rounded.full}" padding: 2px 8px banner-tip-blue: backgroundColor: "{colors.accent-blue-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 16px 20px banner-tip-green: backgroundColor: "{colors.accent-green-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 16px 20px banner-tip-red: backgroundColor: "{colors.accent-red-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 16px 20px banner-tip-purple: backgroundColor: "{colors.accent-purple-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 16px 20px code-block: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.code-sm}" rounded: "{rounded.md}" padding: 16px 20px inline-code: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.code-xs}" rounded: "{rounded.xs}" padding: 2px 6px primary-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-strong}" rounded: "{rounded.none}" height: 56px sub-nav-strip: backgroundColor: "{colors.surface-soft}" textColor: "{colors.body}" typography: "{typography.body-xs}" rounded: "{rounded.none}" height: 40px doc-sidebar: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-xs}" rounded: "{rounded.none}" width: 240px footer-section: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-xs}" rounded: "{rounded.none}" padding: 32px 24px link-inline: textColor: "{colors.link-teal}" typography: "{typography.link-md}"

概述

PostHog 的营销体系建立在品牌内核的视觉矛盾之上：一个严肃的开源产品分析平台，却以友好的工程速写本形式呈现。chrome 在温暖的米色画布（{colors.canvas} — #eeefe9）上运行——不是白色——每一页都点缀着手绘刺猬吉祥物，它们穿着白大褂、坐在躺椅上、对着终端、戴着老花镜，像教科书页边的批注一样散落在版式中。字体采用 IBM Plex Sans Variable，正文为橄榄灰（{colors.body} — #4d4f46），标题为深橄榄炭黑（{colors.ink} — #23251d），字重在 400、600、700、800 之间紧密递进，通过字重而非颜色构建层级。单一饱和的黄橙胶囊（{colors.primary} — #f7a501）是品牌唯一的响亮彩色时刻；其余一切都是米色、橄榄色、白色卡片，以及偶尔的柔和色横幅。

系统具有标志性的双模式正文布局：营销页（首页、workflows、定价）依赖柔和交替的色带和米色上的白色卡片特性 tile，而文档页增加了一个 240px 的粘性左侧栏，配带圆角描边图标的小型插图。代码样例是 {colors.surface-dark} 上的全宽深色块（与正文 ink 相同的橄榄炭黑，反相使用）嵌于白色文档卡片内，造就了系统最具辨识度的视觉时刻：一个深底反相的代码岛漂浮在米色画布上的白色卡片里，页边点缀着一只刺猬吉祥物。

各 section 以 {spacing.section}（80px）节奏堆叠，米色画布在它们之间边到边延续。中断米色的色带只有文档文章内部的柔和 {component.banner-tip-blue} / -green / -red / -purple 横幅面板——柔和的染色框承载 "💡 Tip"、"✅ Success"、"⚠️ Warning"、"📘 Info" 行内注释。没有装饰性渐变，没有氛围网格背景，没有全幅深色首屏章节；米色画布从上到下贯穿不间断，刺猬们就是完整的视觉身份。

关键特征：

• 温暖的米色画布（{colors.canvas} — #eeefe9）端到端，section 之间无表面切换——页面是一张连续的纸
• 单一黄橙 CTA 胶囊（{colors.primary} — #f7a501）配深橄榄文字（{colors.on-primary}）——品牌唯一的饱和色
• IBM Plex Sans Variable 覆盖每一个文字角色，字重 400/500/600/700/800——系统中没有其他字体
• 手绘刺猬吉祥物散落在版式中，作为完整的装饰系统——没有渐变、没有网格、没有氛围背景
• 4–8px 圆角卡片词表：大多数组件使用 {rounded.md}（6px），少数容器使用 {rounded.lg}（8px），胶囊芯片使用全圆角
• 柔和色横幅（{colors.accent-blue-soft}、{colors.accent-green-soft}、{colors.accent-red-soft}、{colors.accent-purple-soft}）以柔和染色侧栏打破文档正文，用于提示/警告/信息
• 文档页增加一个 240px 粘性 {component.doc-sidebar}，配圆角描边图标 section 导航，顶部有 "Ask PostHog AI" CTA

配色

来源页面： /（首页）、/pricing（定价详情）、/docs/product-analytics（文档文章）、/workflows（产品特性页）。所有四个页面的 chrome 调色板完全相同——只有文档专属点缀（横幅柔和色、代码块深色表面）出现在文档体验内。

品牌与点缀

• PostHog Yellow（{colors.primary} — #f7a501）：通用主 CTA。每个导航右上角粘性的 "Get started — free" 胶囊、首屏 CTA、定价订阅按钮、页脚注册胶囊。系统中唯一的饱和彩色时刻。
• Yellow Pressed（{colors.primary-pressed} — #dd9001）：主胶囊的按下状态。
• Yellow Active（{colors.primary-active} — #b17816）：深度按下的黄，以及系统的金色调边框点缀（行内表单元素上罕见的 1px 金色细线）。

表面

• Canvas（{colors.canvas} — #eeefe9）：温暖的米色页面背景。在每个页面上端到端使用；品牌最具辨识度的表面选择。
• Soft Surface（{colors.surface-soft} — #e5e7e0）：button-secondary 填充、子导航条背景、行内代码芯片背景。
• Surface Card（{colors.surface-card} — #ffffff）：位于米色画布上方的纯白卡片和 tile 背景。主导卡片表面。
• Surface Doc（{colors.surface-doc} — #fcfcfa）：文档文章正文卡片内使用的微微泛暖的白色——比纯白略柔，以保持页面色调统一。
• Surface Dark（{colors.surface-dark} — #23251d）：作为代码块背景反相使用的深橄榄炭黑。与 {colors.ink} 同色——品牌对正文 ink 和深色代码表面使用同一橄榄近黑。
• Hairline（{colors.hairline} — #bfc1b7）：1px 卡片边框、表格线、页脚列分隔。
• Hairline Soft（{colors.hairline-soft} — #dcdfd2）：卡片内行分隔、柔和的内嵌分隔线。
• On Dark（{colors.on-dark} — #ffffff）：{colors.surface-dark} 代码块上的主文字。

文字

• Ink（{colors.ink} — #23251d）：浅色上的标题、按钮文字、主导航链接——在米色背景上读起来近黑的深橄榄炭黑。
• Body（{colors.body} — #4d4f46）：默认段落文字、文档文章正文、悬停前的行内链接颜色。品牌使用最多的文字颜色。
• Charcoal（{colors.charcoal} — #33342d）：body 显得过柔时的强调正文。
• Mute（{colors.mute} — #6c6e63）：元数据、页脚链接文字、列表内次要注释。
• Ash（{colors.ash} — #9b9c92）：禁用状态文字和最低强调度工具文字。
• Stone（{colors.stone} — #b6b7af）：最低强调度的说明文字和禁用图标色。

语义

• Link Blue（{colors.link-blue} — #1d4ed8）：正文段落内的行内锚链接。系统的主要信息链接颜色。
• Link Teal（{colors.link-teal} — #1078a3）：文档文章行内链接变体，配正文文字。
• Accent Blue（{colors.accent-blue} — #2c84e0）+ Accent Blue Soft（{colors.accent-blue-soft} — #dceaf6）：文档内的 "💡 Tip / Info" 横幅。
• Accent Red（{colors.accent-red} — #cd4239）+ Accent Red Soft（{colors.accent-red-soft} — #f7d6d3）："⚠️ Warning / Caution" 横幅。
• Accent Green（{colors.accent-green} — #2c8c66）+ Accent Green Soft（{colors.accent-green-soft} — #d9eddf）："✅ Success / Positive" 横幅。
• Accent Purple（{colors.accent-purple} — #7c44a6）+ Accent Purple Soft（{colors.accent-purple-soft} — #e7d8ee）："📘 Note / Reference" 横幅。
• Focus Ring（{colors.focus-ring} — rgba(59,130,246,0.5)）：交互元素周围的半透明蓝色浏览器默认聚焦环。

字体排版

字体族

IBM Plex Sans Variable 是系统的主字体——在每个页面的每个文字角色上使用，字重 400（常规）、500（中）、600（半粗）、700（粗）和 800（特粗）。回退链为 IBM Plex Sans → -apple-system → system-ui → 跨平台 sans 通用栈。

ui-monospace + Source Code Pro 在 14px / 1.43 行高下承载代码样例和行内代码芯片。Source Code Pro 是显式的展示级 monospace；ui-monospace 处理行内 <code> 芯片。

品牌最具辨识度的选择是混合字重阶梯（400 / 500 / 600 / 700 / 800）——大多数 chrome 位于 400–700 区间，weight 800 仅用于首页和定价页较大的展示标题。这赋予系统其"工程博客"的感觉：层级由字重对比而非尺寸驱动。

层级

原则

层级显式地由字重 + 尺寸 + 偶尔的 uppercase 转换构建——没有斜体样式、没有装饰性展示变体、没有专有字体。最大的展示时刻使用 weight 800 和 -0.6px 字距，正文固定在 400 和 1.5 行高；其余填充之间的区间。section 眉头（{typography.heading-sm} 和 {typography.utility-xs}）始终以 uppercase 渲染，这赋予文档布局其教科书章节的感觉。

关于字体替代

IBM Plex Sans Variable 是开源且由 Google Fonts 提供托管。无需替代——直接加载。如果确实需要替代，Inter 是所有五个字重下最接近的几何匹配；在展示尺寸上使用 Inter 的 -0.5 到 -0.6px 字距以近似 Plex 的展示字距。monospace 方面，JetBrains Mono 是 Source Code Pro 在正文尺寸下的完美替代。

布局

间距系统

• 基础单位： 8px（在紧凑行内间隙和胶囊按钮上有更细的 2/4/6px 步长）。
• Token（frontmatter）： {spacing.xxs}（2px）· {spacing.xs}（4px）· {spacing.sm}（8px）· {spacing.md}（12px）· {spacing.lg}（16px）· {spacing.xl}（24px）· {spacing.xxl}（32px）· {spacing.section}（80px）。
• 通用 section 节奏： 这一组中每个页面使用 {spacing.section}（80px）作为主要内容块之间的纵向间距。卡片网格使用 {spacing.lg}（16px）间隔；卡片内 padding 在产品卡片上为 {spacing.xl}（24px），在定价等级卡片上为 {spacing.xxl}（32px）。

网格与容器

• 最大宽度： 桌面正文内容区约 1280px，24px 间隔（约 48px at ultrawide）。文档文章正文最大宽度约 720px，240px 侧栏将文章栏推到中心右侧。
• 营销卡片网格： 桌面 4 列，1024px 时 3 列，768px 时 2 列，480px 时 1 列。卡片保持固定的 1:1 或 4:3 比例。
• 定价等级网格： 桌面 3 列，左侧计划信息栏，平板降为 2+1，移动端 1 列。
• 文档布局： 桌面 240px 粘性左侧栏 + 约 720px 文章正文 +（可选）200px 右侧 TOC 栏 = 约 1160px 内容宽度。
• 页脚： 桌面 6 列水平链接网格，平板 3 列，移动端 2 列。

留白哲学

营销页留白充裕，文档页留白紧凑。首页和 workflows 页以 {spacing.lg}（16px）间隔和 24px 内 padding 堆叠特性 tile，而文档文章将段内间距收紧到 {spacing.md}（12px），以最大化信息密度。米色画布在每个 section 间连续运行——没有装饰性分隔、没有阴影 section 带；只有 section 眉头的 1px 发丝线和页脚列分隔。

层次与深度

营销或产品 chrome 中没有投影层级。卡片平铺在米色画布上，配细橄榄边框。唯一的反相时刻是文档文章正文卡片内使用的深色代码块表面。

装饰性深度

深度完全来自插图和柔和横幅系统，而非 CSS 效果：

• 手绘刺猬吉祥物——穿着各种服装（白大褂、终端、躺椅、放大镜、吊床、帽子）的角色散落在页面上作为页边注释。始终以平面彩色插图渲染，从不使用照片。
• 柔和横幅——{component.banner-tip-blue} / -green / -red / -purple 柔和染色侧栏面板位于文档文章内，每个前缀为 emoji 图标（💡 ✅ ⚠️ 📘）承载提示/警告/注释文案。
• 代码块——{colors.surface-dark} 上的全宽深橄榄炭黑面板，承载白色代码文字。系统最具电影感的表面，用于白色文档卡片内。
• 文档侧栏中的描边产品图标——小型圆角方形迷你插图（图表图标、漏斗、会话回放图标）标记每个主要产品 section。

形状

圆角刻度

圆角词表大多数集中在 4–6px；唯一的全圆角元素是胶囊风格的粘性导航 CTA 和行内胶囊芯片。

摄影几何

没有摄影。视觉元素限于：

• 刺猬角色插图——平面彩色卡通刺猬，从约 80px（卡片内吉祥物）到约 240px（首屏插图）。始终保持原生比例，从不裁剪到框内。
• 文档侧栏中的描边产品图标——20–24px 圆角方形插图。
• 行内 emoji 在 14–16px，位于横幅内（💡 ✅ ⚠️ 📘）——用作功能图标而非装饰。
• 首页 section 插图——小型刺猬小图配每个 "Understand product usage" / "Build sticky habits" / "Test before launch" 特性行。

组件

未记录 hover 状态，遵循系统策略。每个规范仅涵盖 Default 和 Active/Pressed。

按钮

button-primary——通用 PostHog CTA

• 背景 {colors.primary}（黄橙），文字 {colors.on-primary}（深橄榄），字号 {typography.button-md}，padding 8px 16px，高 40px，圆角 {rounded.md}。
• 用于 "Get started — free"（粘性顶部导航 CTA）、"Sign up"、"Try it free"、"Subscribe"——每个主动作。
• 按下状态位于 button-primary-pressed——背景降为 {colors.primary-pressed}。

button-secondary——米色画布上的柔和备选

• 背景 {colors.surface-soft}（#e5e7e0），文字 {colors.ink}，字号 {typography.button-md}，padding 8px 16px，高 40px，圆角 {rounded.md}。
• "Talk to sales"、"Read docs"、"Watch demo"——配黄色主按钮的二线动作。

button-tertiary——幽灵文本按钮

• 背景透明，文字 {colors.ink}，字号 {typography.button-md}，padding 8px 12px，圆角 {rounded.md}。
• 最低强调度动作："See all docs →"、"Browse all features"。

button-disabled

• 背景 {colors.surface-soft}，文字 {colors.ash}——扁平的柔和米灰。

Tab 与芯片

product-tab + product-tab-active——主要产品 section tab

• 默认：背景透明，文字 {colors.body}，字号 {typography.body-strong}，padding 8px 12px，圆角 {rounded.md}。
• 激活：背景翻转为 {colors.surface-card}（白色），文字 {colors.ink}——tab 卡片从米色画布上抬起，作为选中状态的视觉信号。

pill-tab + pill-tab-active——紧凑筛选胶囊

• 默认：背景透明，文字 {colors.body}，字号 {typography.button-sm}，padding 6px 14px，圆角 {rounded.full}。
• 激活：背景翻转为 {colors.ink}，文字 {colors.on-dark}——芯片在选中时完全反相。

badge-uppercase——纯文本工具标签

• 背景透明，文字 {colors.body} 在 {typography.utility-xs}（uppercase）——用作列表内类别前缀（"FEATURE FLAG"、"EXPERIMENT"、"HEATMAP"）。

badge-promo——小型行内胶囊芯片

• 背景 {colors.accent-blue-soft}，文字 {colors.link-blue}，字号 {typography.caption-xs}，padding 2px 8px，圆角 {rounded.full}。
• 卡片上叠加的 "New"、"Beta"、"Coming soon" 标签。

输入与表单

text-input + text-input-focused

• 默认：背景 {colors.surface-card}，文字 {colors.ink}，1px 实线 {colors.hairline} 边框，字号 {typography.body-md}，padding 8px 12px，高 36px，圆角 {rounded.md}。
• 聚焦：相同表面；1px 边框变为 2px 实线 {colors.accent-blue} 加上半透明 {colors.focus-ring} 描边。

search-input——工具搜索字段（文档侧栏、"Ask PostHog AI"）

• 与 text-input 尺寸相同，左边缘带放大镜字形于 {colors.mute}。

卡片与容器

product-card——营销 tile / 特性卡片

• 容器：背景 {colors.surface-card}（白色），1px 实线 {colors.hairline} 边框，padding {spacing.xl}（24px），圆角 {rounded.md}。
• 布局：左上角小型刺猬插图，{typography.heading-sm-mixed} 标题，{typography.body-sm} 描述，可选 {component.button-tertiary} "Learn more →" 链接。

doc-card——文档文章正文卡片

• 容器：背景 {colors.surface-doc}（#fcfcfa 暖白），1px 实线 {colors.hairline} 边框，padding {spacing.xl}（24px），圆角 {rounded.md}。
• 在文档页内承载文章正文 section、代码块、横幅和表格。

feature-tile——小型营销特性 tile

• 容器：背景 {colors.surface-card}，1px 实线 {colors.hairline} 边框，padding {spacing.lg}（20px），圆角 {rounded.md}。
• 用于首页和 workflows 页上的 3 列或 4 列网格——配小图标和 1 行描述。

pricing-tier-card——定价计划卡片

• 容器：背景 {colors.surface-card}，1px 实线 {colors.hairline} 边框，padding {spacing.xxl}（32px），圆角 {rounded.md}。
• 布局：等级名以 {typography.display-lg}（24px / 800 / -0.6px），大号价格 + 周期，带勾选图标的特性清单，底部主或次 CTA。

hedgehog-mascot-card——配边距锚定刺猬的特性卡片

• 与 {component.product-card} 相同的 chrome，但带有一只手绘刺猬插图锚定在右侧边距或右上角——品牌标志性的卡片变体。

横幅

banner-tip-blue + banner-tip-green + banner-tip-red + banner-tip-purple

• 背景 {colors.accent-blue-soft} / {colors.accent-green-soft} / {colors.accent-red-soft} / {colors.accent-purple-soft}，文字 {colors.ink}，字号 {typography.body-md}，padding 16px 20px，圆角 {rounded.md}。
• 每个以行内 emoji 图标（💡 / ✅ / ⚠️ / 📘）为前缀，后跟行内标签和正文文案。
• 仅出现在文档文章正文内。四色横幅家族是品牌在长篇文档内承载行内提示/警告/信息的信息架构词表。

代码

code-block——文档卡片内的深色代码样例

• 容器：背景 {colors.surface-dark}（深橄榄炭黑），文字 {colors.on-dark} 在 {typography.code-sm}，padding 16px 20px，圆角 {rounded.md}。
• 语法高亮使用柔和点缀色（关键字蓝、字符串绿、数字紫）——从不使用横幅中使用的亮色点缀。

inline-code——小型行内 <code> 芯片

• 背景 {colors.surface-soft}，文字 {colors.ink} 在 {typography.code-xs}，padding 2px 6px，圆角 {rounded.xs}（2px）。
• 在正文段落中标记代码片段和标识符。

导航

primary-nav

• 背景 {colors.canvas}（米色——与页面相同），文字 {colors.ink}，高 56px，字号 {typography.body-strong}，圆角 {rounded.none}。
• 布局（桌面）：左侧 PostHog 字标 + 刺猬 logo，居中导航菜单簇（"Pricing · Docs · Community · Company"），右侧簇带搜索图标、"Login" 链接，以及始终为黄色的 {component.button-primary} "Get started — free" 胶囊锚定在最右侧。

sub-nav-strip——次级导航条（位于主导航下）

• 背景 {colors.surface-soft}，文字 {colors.body} 在 {typography.body-xs}，高 40px，圆角 {rounded.none}。
• 直接位于 workflows / 产品页的主导航下方，带 section 锚链接和右侧上下文 "Get started →" 链接。

doc-sidebar——文档页粘性左侧栏

• 背景 {colors.canvas}，文字 {colors.body} 在 {typography.body-xs}，宽 240px，圆角 {rounded.none}。
• 布局：顶部 search-input "Ask PostHog AI"，然后是垂直 section 标题列表，每个配小型圆角描边图标迷你插图，然后在激活标题下缩进嵌套项目链接。

顶部导航（移动端）

• 左侧汉堡菜单图标，居中 PostHog 字标 + 刺猬，右侧搜索 + 粘性黄色 "Get started — free" CTA。主导航折叠为从左侧滑入的全高抽屉。

页脚

footer-section

• 背景 {colors.canvas}，文字 {colors.body} 在 {typography.body-xs}，padding 32px 24px，圆角 {rounded.none}，顶部 1px {colors.hairline} 细线。
• 布局：6 列水平链接网格（Product · Resources · Company · Community · Pricing · Legal），每列配 {typography.utility-xs}（uppercase）标题和 {typography.body-xs} {colors.body} 的垂直链接列表。
• 底部行：PostHog 字标 + 小型刺猬插图，版权在 {typography.caption-xs} {colors.mute}，最右侧社交图标行。

行内

link-inline——正文段落锚链接

• {colors.link-teal}（#1078a3）在正文中，默认无下划线；聚焦时出现下划线。品牌主要的行内链接颜色。

推荐与避免

推荐

• 使用 {colors.canvas}（米色 — #eeefe9）作为页面正文。永远不要用纯白替代画布。
• 将 {colors.primary}（黄橙）保留给主 CTA 胶囊。"Get started — free" 处理是品牌的锚点。
• 将品牌字标与刺猬插图一起渲染，而非单独字标。刺猬就是品牌身份。
• 在每个文字角色使用 IBM Plex Sans Variable——正文 400，强调 600/700，展示 800。
• 内容 section 以 {spacing.section}（80px）节奏堆叠，section 之间无装饰分隔；让米色画布不间断延续。
• 仅在文档文章正文内使用 {component.banner-tip-blue} / -green / -red / -purple 作为提示/警告/注释面板——保持营销 chrome 在四色横幅家族之外。
• 每个代码样例都配深色 {component.code-block} 表面；行内 <code> 芯片使用 {component.inline-code}（米色 surface-soft 芯片）。
• 在首页和 workflows 页的特性 tile 边距上锚定一只刺猬吉祥物插图——系统的标志性装饰。

避免

• 不要在卡片上引入投影。卡片平铺在米色上，只用细橄榄边框。
• 不要添加第二个饱和彩色 CTA。黄橙是系统中唯一的响亮颜色。
• 不要用纯白或全幅深色首屏带替代米色画布。米色就是品牌。
• 不要将四色横幅柔和色（{colors.accent-blue-soft}、-green、-red、-purple）用作营销卡片背景。它们仅属于行内文档内容。
• 不要用通用图标集替代刺猬插图。角色系统就是品牌。
• 不要在 {typography.heading-sm}、{typography.utility-xs} 和 {typography.caption-xs} 之外使用 uppercase 转换。uppercase 仅保留给眉头和页脚类别标题。
• 不要在所有边上对卡片使用 32px+ padding，定价等级卡片 {component.pricing-tier-card} 除外。标准卡片固定在 24px 内 padding。

响应式行为

断点

触控目标

所有交互元素均满足 WCAG AA（≥ 40×40px）。{component.button-primary} 和 {component.button-secondary} 高 40px，padding 16px。{component.text-input} 高 36px（AAA 之下但在此尺寸 AA 之上）。{component.pill-tab} 高约 32–36px，padding 14px 通过内联 padding 扩展至约 44px 可点击。文档侧栏项使用 14px 文字加约 32px 行高 + 6px 垂直 padding 实现约 44px 的点击行。

折叠策略

• 主导航： 桌面水平簇 → 768px 时平板汉堡抽屉。黄色 "Get started — free" CTA 在每个断点都保持可见。
• 子导航条： 桌面水平锚点行 → 平板水平滚动 → 移动端 select 下拉。
• 营销卡片网格： 4 列 → 3 列 → 2 列 → 1 列，在 1024、768 和 480px；移动端间隔从 16px 降至 12px。
• 定价网格： 3 列 → 2+1 → 1 列堆叠，在平板及以下。
• 文档布局： 桌面 240px 侧栏 + 720px 文章 → 平板侧栏折叠为顶部折叠面板 → 移动端完全折叠为手风琴。
• 页脚： 6 列链接列 → 平板 3 列 → 移动端 2 列。
• Section padding： {spacing.section}（80px）桌面 → 64px 平板 → 48px 移动端。
• 首屏标题： {typography.display-xl}（36px）桌面，移动端缩放至约 28px，行高固定在 1.5。

图像行为

系统中唯一的"图像"是作为行内 SVG 渲染的手绘刺猬插图。它们在每个断点保持自然比例并通过 CSS width: auto; max-width: 100% 缩放。由于没有摄影，因此不需要响应式 art-direction。

迭代指南

1. 一次专注于一个组件。提取其 YAML 条目并验证每个属性都能解析。
2. 直接引用组件名和 token（{colors.primary}、{component.button-primary-pressed}、{rounded.md}）——不要转述。
3. 编辑后运行 npx @google/design.md lint DESIGN.md——broken-ref、contrast-ratio 和 orphaned-tokens 警告会自动标记问题。
4. 添加新变体作为单独的组件条目（-pressed、-disabled、-focused）——不要将它们埋在正文里。
5. 默认正文为 {typography.body-md}（16px / 400 / 1.5）；将 {typography.body-strong} 用于强调；将 {typography.display-lg}（24px / 800）严格保留给营销展示时刻。
6. 让 {colors.primary} 在每个视口都稀缺——每屏最多一个黄橙胶囊。
7. 引入新组件时，问自己它是否能用现有的卡片 + 6px 圆角 + 米色画布词汇表达，再添加新 token。系统的强项在于几乎从不需要新 token。

已知缺口

• 未捕获移动端截图——响应式行为综合了 PostHog 已知的移动端模式（汉堡抽屉、单列网格、文档侧栏折叠面板），依据是桌面证据和断点阶梯。
• hover 状态 按系统策略未记录。
• 产品内应用 chrome（PostHog 仪表板、图表、会话回放播放器）不在捕获集中——此处记录的是营销站点，而非产品内分析界面。
• 认证 chrome（登录模态、账户仪表板、计费设置）不在捕获页面内。
• 聚焦输入之外的表单验证状态不在已捕获的表面内。
• 营销插图集——刺猬角色姿势的完整库未在此枚举；具体姿势（白大褂刺猬、终端刺猬、吊床刺猬）已注明在截图中可见，但完整资源库是页面专属的。