version: alpha name: Warp-Inspired-design-analysis description: An inspired interpretation of Warp's design language — an agentic terminal-and-development-environment brand whose surface is a warm near-charcoal canvas (a tint warmer than pure black), broken only by clean Inter typography, the occasional Instrument Serif italic moment, and dense terminal-mockup imagery; CTAs are unusually understated, with shape geometry running tighter than most marketing sites.

colors: primary: "#f7f5f0" on-primary: "#2b2622" ink: "#f7f5f0" body: "#c9c0ad" body-strong: "#dad2c1" mute: "#aea69c" canvas: "#2b2622" canvas-soft: "#383330" hairline: "#3f3a36"

typography: display-xl: fontFamily: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif fontSize: 64px fontWeight: 400 lineHeight: 70.4px letterSpacing: -1.6px display-lg: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 48px fontWeight: 400 lineHeight: 52.8px letterSpacing: -1.2px display-md: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 32px fontWeight: 500 lineHeight: 40px letterSpacing: -0.8px display-sm: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 24px fontWeight: 500 lineHeight: 32px letterSpacing: -0.4px display-serif: fontFamily: Instrument Serif, Georgia, "Times New Roman", serif fontSize: 48px fontWeight: 400 lineHeight: 52px letterSpacing: -0.5px body-lg: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 18px fontWeight: 400 lineHeight: 28px body-md: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 16px fontWeight: 400 lineHeight: 24px body-md-strong: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 16px fontWeight: 500 lineHeight: 24px body-sm: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 14px fontWeight: 400 lineHeight: 20px body-sm-strong: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 14px fontWeight: 500 lineHeight: 20px caption: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 12px fontWeight: 400 lineHeight: 16px code: fontFamily: DM Mono, ui-monospace, SFMono-Regular, Menlo, monospace fontSize: 13px fontWeight: 400 lineHeight: 18px code-md: fontFamily: DM Mono, ui-monospace, SFMono-Regular, Menlo, monospace fontSize: 14px fontWeight: 400 lineHeight: 20px button-md: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 14px fontWeight: 500 lineHeight: 20px

rounded: none: 0px xxs: 1px xs: 2px sm: 3px md: 4px lg: 6px pill: 9999px full: 9999px

spacing: xxs: 2px xs: 4px sm: 8px md: 10px lg: 16px xl: 24px 2xl: 32px 3xl: 48px 4xl: 64px 5xl: 96px

components: nav-bar: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm-strong}" padding: "{spacing.md} {spacing.xl}" nav-link: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm-strong}" rounded: "{rounded.sm}" padding: "{spacing.xs} {spacing.md}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "{spacing.sm} {spacing.lg}" button-secondary-ghost: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "{spacing.sm} {spacing.lg}" button-icon-circular: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" padding: "{spacing.xs}" text-input: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-sm}" rounded: "{rounded.sm}" padding: "{spacing.sm} {spacing.md}" card-content: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.xl}" card-mockup: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.code}" rounded: "{rounded.md}" padding: "{spacing.lg}" download-tile: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-md-strong}" rounded: "{rounded.md}" padding: "{spacing.xl}" press-row: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" borderColor: "{colors.hairline}" typography: "{typography.body-md}" padding: "{spacing.lg} 0" job-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-md-strong}" padding: "{spacing.lg} 0" hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "{spacing.5xl} {spacing.xl}" content-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "{spacing.5xl} {spacing.xl}" partner-logo-tile: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.body-md-strong}" rounded: "{rounded.md}" padding: "{spacing.lg}" testimonial-card: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.xl}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" padding: "{spacing.3xl} {spacing.xl}"

─── Examples (illustrative) — auto-derived; resolve any TO_FILL markers below ───

ex-pricing-tier: description: "Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface." backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" rounded: "{rounded.lg}" padding: "{spacing.xl}" ex-pricing-tier-featured: description: "Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode)." backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" rounded: "{rounded.lg}" padding: "{spacing.xl}" ex-product-selector: description: "What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery)." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.lg}" padding: "{spacing.xl}" ex-cart-drawer: description: "Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart)." backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xl}" item-divider: "{colors.hairline}" ex-app-shell-row: description: "Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator." backgroundColor: "{colors.canvas}" activeIndicator: "{colors.primary}" rounded: "{rounded.sm}" padding: "{spacing.sm} {spacing.md}" ex-data-table-cell: description: "Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm." headerBackground: "{colors.canvas-soft}" headerTypography: "{typography.caption}" bodyTypography: "{typography.body-sm}" cellPadding: "{spacing.sm} {spacing.md}" rowBorder: "{colors.hairline}" ex-auth-form-card: description: "Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.lg}" padding: "{spacing.xl}" ex-modal-card: description: "Modal dialog surface — same chrome as feature-card with elevated shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xl}" ex-empty-state-card: description: "Empty-state illustration frame." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.lg}" padding: "{spacing.2xl}" captionTypography: "{typography.body-md}" ex-toast: description: "Toast notification surface — feature-card shape + medium shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.sm} {spacing.md}" typography: "{typography.body-sm}"

概览

Warp 是一个"智能体开发环境"——一个包裹 AI 智能体的终端应用程序——其营销网站反映了产品的姿态:整页贯穿单一的深色色带，比纯黑更温暖({colors.canvas} #2b2622 从品牌的 oklch 定义温暖值中透出一丝棕米色)，副本几乎全部以 Inter 设置。页面读起来更像开发者的阅读模式编辑器，而非营销表面。

装饰是克制的。两个终端截图打开首屏(在两个主要产品模式——智能体 + 终端——之间分割)。一个合作伙伴 logo 条(Anthropic / OpenAI / Google / Stanford)位于首屏下方，坐落在稍温暖的瓦片表面上。一张带肖像的推荐语卡片。一份媒体覆盖列表。然后页面以 Mac / Linux / Windows 下载瓦片结束。没有渐变，没有氛围背景，没有插图系统。

字体是第二个决定性的声音。首屏展示字号 64 px Inter 400 字重,字距 -1.6px——对于首屏来说是克制的,有意保持安静。品牌以 DM Mono 作为等宽字体用于代码块,Instrument Serif 斜体偶尔出现在编辑瞬间。文字正文为 16 px Inter,行高 1.5,极具可读性。

关键特征:

• 单一主"颜色"——实为偏白 {colors.primary}(#f7f5f0)——兼作画布上的文字和 button-primary 填充。没有彩色品牌点缀。
• 温暖的深色画布({colors.canvas} #2b2622)是唯一的页面表面。品牌的标志性色调是棕色调的温暖,而不是纯黑。
• 极紧凑的按钮圆角——3 / 4 px(品牌 {rounded.md} 4 px 基础的 1 / 2×)——品牌从不在 CTA 上使用宽松的胶囊形状。只有图标容器使用 {rounded.full}。
• Inter 无衬线 + DM Mono 等宽字体是标准配对。Instrument Serif 作为第三种编辑字体出现在偶发的斜体中。
• 终端模拟图像是品牌唯一的持续装饰系统——没有渐变,没有氛围覆盖。
• 一丝温暖的色调贯穿每个中性色;甚至正文文字和分隔符也带有温暖感而非中性灰。

配色

品牌与点缀

• 偏白主色({colors.primary} — #f7f5f0):品牌的"主色"是一种温暖的偏白色。用作 button-primary 填充、画布上的默认文字、文字商标颜色。没有彩色品牌点缀——偏白本身就是品牌的标志性色调。

表面

• 画布({colors.canvas} — #2b2622):温暖的深色页面背景。从 oklch(22.0% 0.004 84.6) 解析。比纯黑略偏棕,比中性灰略偏暖——温暖感本身就是品牌的身份。
• 柔和画布({colors.canvas-soft} — #383330):用于卡片、模拟外壳和合作伙伴 logo 瓦片的较浅温暖深色填充。
• 细线({colors.hairline} — #3f3a36):深色表面上的 1 px 实心分隔符。

文字

• 墨色({colors.ink} — #f7f5f0):画布上的默认文字——与主色相同的偏白色,有意保持统一。
• 强正文({colors.body-strong} — #dad2c1):中等强调的正文文字。
• 正文({colors.body} — #c9c0ad):次要正文文字——说明文字、辅助副本、媒体覆盖行。
• 静音({colors.mute} — #aea69c):最低优先级文字——时间戳、细字脚注、页脚次要行。从 oklch(71.5% 0.008 84.6) 解析。

语义

品牌在其营销页面上不展示独立的错误 / 警告 / 成功调色板。验证提示来自统一的偏白系统;产品内语义颜色存在于终端应用程序本身中。

字体排版

字体族

三张字体阶梯化系统:

1. Inter 用于每个展示字、正文、按钮、链接和标签角色。字重 400 / 500 是工作配对。使用品牌的"Inter Fallback" 定制字体作为度量兼容的系统回退。
2. DM Mono 用于终端模拟、命令片段和代码块。仅使用 400 字重。作为 --font-dm-mono 加载。
3. Instrument Serif 用于偶发的编辑斜体瞬间——在营销表面上罕见,但记录为第三种字体用于强调标语式短语。Abel 也作为第四种标题强调回退加载。

层级

原则

• 首屏展示 400 字重——品牌读起来是安静自信的,而不是广告牌式的。
• 负字距是声音的一部分。 首屏 64 px 下 -1.6 px,通过展示级别向下缩放。
• Inter 用于叙述,DM Mono 用于技术。 严格的角色分离。

字体替代品说明

所有三张字体都是开源或可自由加载的:

• Inter——直接从 Google Fonts 或 Vercel 托管 CDN 加载。
• DM Mono——Google Fonts 上的开源字体。
• Instrument Serif——Google Fonts 上的开源字体。

布局

间距系统

• 基础单位:4 px(在按钮内边距中偶尔出现 10 px 和 6 px 值)。
• Token:{spacing.xxs} 2 px · {spacing.xs} 4 px · {spacing.sm} 8 px · {spacing.md} 10 px · {spacing.lg} 16 px · {spacing.xl} 24 px · {spacing.2xl} 32 px · {spacing.3xl} 48 px · {spacing.4xl} 64 px · {spacing.5xl} 96 px。
• 章节内边距:桌面端首屏 / 内容色带使用 {spacing.5xl} 96 px。
• 卡片内部:卡片使用 {spacing.xl} 24 px。

网格与容器

• 营销内容居中于约 1200 px 宽度。
• 首屏:桌面端 2 栏(在两个终端截图之间分割),移动端堆叠。
• 合作伙伴 logo:5 栏包装 flex 行。
• 下载瓦片:桌面端 3 栏(Mac / Linux / Windows),移动端 1 栏。

响应式策略

断点

触控目标

按钮渲染约 36 px 高(8 px 垂直内边距 + 20 px 行高)。移动端通过额外内边距膨胀触摸区域以满足 WCAG 44 × 44 px 下限。

折叠策略

• 导航:桌面端为完整链接行 + 登录 / 下载右侧群组。移动端为汉堡菜单。
• 首屏终端模拟分割:移动端垂直堆叠。
• 媒体 / 职位行:全宽单栏;在所有宽度下保持可读。

图像行为

• 终端模拟:渲染为深色卡片,内部包含实际的终端 UI(温暖画布 + 彩色语法)。宽高比约 3:2。
• 合作伙伴 logo:深色瓦片卡片上的单色 SVG。
• 推荐语肖像:1:1 正方形裁剪嵌入 {rounded.md} 卡片外壳内。

层次与深度

品牌使用表面对比和细线边框来营造抬升;柔和投影不出现在营销表面上。

形状

圆角刻度

摄影几何

• 终端模拟:约 3:2 嵌入 {rounded.md} 卡片外壳内。
• 合作伙伴 logo:在瓦片卡片内统一 24 px 高度的单色 SVG。
• 推荐语肖像:1:1 正方形嵌入 {rounded.md} 内。

组件

按钮

button-primary——深色画布上的偏白 CTA。

• 背景 {colors.primary}(偏白),文字 {colors.on-primary}(温暖深色),标签 {typography.button-md},内边距 {spacing.sm} {spacing.lg},形状 {rounded.sm} 3 px。紧凑。

button-secondary-ghost——用于导航和三级动作的幽灵样式次级按钮。

• 背景 {colors.canvas},文字 {colors.ink},无边框,相同的字体 / 形状。

button-icon-circular——圆形图标容器。

• 背景 {colors.canvas},墨色图标,形状 {rounded.full}。用于导航控件(搜索、主题)。

卡片与容器

card-content——画布柔上的默认内容卡片。

• 背景 {colors.canvas-soft},文字 {colors.ink},1 px 实心 {colors.hairline},内边距 {spacing.xl},形状 {rounded.md}。

card-mockup——终端截图模拟卡片。

• 与 card-content 相同的外壳,但在内部出现文字时正文使用 {typography.code}(DM Mono)。

download-tile——Mac / Linux / Windows 下载瓦片。

• 背景 {colors.canvas-soft},文字 {colors.ink},细线边框,内边距 {spacing.xl},形状 {rounded.md}。承载平台图标 + 标签 + 下载 CTA。

partner-logo-tile——承载合作伙伴 logo 的画布柔瓦片。

• 背景 {colors.canvas-soft},内部为单色 logo SVG,内边距 {spacing.lg},形状 {rounded.md}。

testimonial-card——带肖像的单一引用样式卡片。

• 背景 {colors.canvas-soft},文字 {colors.ink},内边距 {spacing.xl},形状 {rounded.md}。肖像 1:1 + 正文使用 {typography.body-md}。

press-row——媒体覆盖列表项。

• 背景 {colors.canvas}(无填充——位于画布色带上),1 px 实心底边 {colors.hairline},正文 {typography.body-md},内边距 {spacing.lg} 0。

job-row——"Join our team" 列表项(每个开放职位一行)。

• 背景 {colors.canvas},1 px 实心底边,正文 {typography.body-md-strong},内边距 {spacing.lg} 0。

输入与表单

text-input——深色画布文本输入。

• 背景 {colors.canvas-soft},文字 {colors.ink},1 px 实心 {colors.hairline},正文 {typography.body-sm},内边距 {spacing.sm} {spacing.md},形状 {rounded.sm}。

导航

nav-bar——固定顶部导航。

• 背景 {colors.canvas},文字 {colors.ink},内边距 {spacing.md} {spacing.xl}。

nav-link——导航中的链接项。

• 背景 {colors.canvas},文字 {colors.ink},正文 {typography.body-sm-strong},内边距 {spacing.xs} {spacing.md},形状 {rounded.sm}。

footer——页脚色带。

• 背景 {colors.canvas},文字 {colors.body},内边距 {spacing.3xl} {spacing.xl}。正文 {typography.body-sm}。

标志性组件

hero-band——承载 64 px Inter 标题的深色首屏色带。

• 背景 {colors.canvas},文字 {colors.ink},内边距 {spacing.5xl} {spacing.xl}。标题 {typography.display-xl}(64 px / 400 / -1.6 px)。下方:2 栏终端模拟分割。

content-band——标准内容色带。

• 背景 {colors.canvas},文字 {colors.ink},内边距 {spacing.5xl} {spacing.xl}。分区标题 {typography.display-md}。

示例(说明性)

自动派生的工具镜像演示表面(scripts/derive-examples-block.mjs)。每个 ex-* 条目引用品牌原生基元,因此下游消费者(/preview-design、/generate-kit)以一致的方式重新设置相同的 10 个表面。TO_FILL 标记表示缺失的基元——在 LLM 判断步骤中解决。

ex-pricing-tier——默认价格层卡片。重用功能卡片外壳,使用品牌 canvas-soft 表面。

• 属性:backgroundColor、textColor、borderColor、rounded、padding

ex-pricing-tier-featured——特色 / 高亮价格层——极性翻转表面(亮模式下深色填充 + 浅色文字,暗模式下浅色填充 + 深色文字)。

• 属性:backgroundColor、textColor、rounded、padding

ex-product-selector——What's Included 摘要卡片——为 SaaS / B2B 垂直领域重新利用(不是字面意义上的产品画廊)。

• 属性:backgroundColor、rounded、padding

ex-cart-drawer——订阅摘要——为 SaaS / B2B 重新利用(按附加项的逐项条目,不是字面意义上的购物车)。

• 属性:backgroundColor、rounded、padding、item-divider

ex-app-shell-row——App Shell 示例内的侧边栏导航行。激活态使用品牌主色作为指示器。

• 属性:backgroundColor、activeIndicator、rounded、padding

ex-data-table-cell——默认数据表 th + td 外壳。表头使用 mono-caps 标题字体;正文使用 body-sm。

• 属性:headerBackground、headerTypography、bodyTypography、cellPadding、rowBorder

ex-auth-form-card——登录 / 注册卡片。重用功能卡片外壳,内含 text-input 基元。

• 属性:backgroundColor、rounded、padding

ex-modal-card——模态对话框表面——与功能卡片外壳相同,带抬升阴影。

• 属性:backgroundColor、rounded、padding

ex-empty-state-card——空状态插图框。

• 属性:backgroundColor、rounded、padding、captionTypography

ex-toast——Toast 通知表面——功能卡片形状 + 中等阴影。

• 属性:backgroundColor、rounded、padding、typography

推荐与避免

推荐

• 为每个主 CTA 胶囊和默认文字保留 {colors.primary} 偏白色。没有彩色点缀。
• 使用紧凑的 {rounded.sm} 3 px 或 {rounded.md} 4 px 按钮圆角。品牌从不在 CTA 上使用宽松的胶囊。
• 以 Inter 400 字重、-1.6 px 字距设置首屏标题。品牌读起来是安静自信的。
• 将 Inter(句首大写)与 DM Mono(代码块、终端模拟)配对。
• 保持温暖的深色画布色调——纯黑破坏品牌的身份。

避免

• 不要引入彩色品牌点缀。温暖深色上的偏白本身就是品牌的声音。
• 不要以粗体(700+)渲染首屏标题。品牌的展示字号有意保持轻盈。
• 不要使用宽松的胶囊 CTA。品牌的按钮圆角是 3-4 px，几乎是矩形。
• 不要用中性灰或纯黑替换温暖的深色画布。温暖感本身就是品牌。
• 不要在卡片上投下柔和投影。细线 + 表面对比承担抬升。