Shopify

version: alpha name: Shopifi-Inspired-design-analysis description: An inspired interpretation of Shopifi's design language — a cinematic commerce platform that runs two parallel design tracks. The marketing-hero and product-narrative pages live on near-black canvases with full-bleed photography of merchants, giant Neue Haas Grotesk display type at thin weights, and a single black-pill CTA stroked in white. The transactional pages (pricing, signup, dashboards) flip to a cream-mint canvas with pastel aloe and pistachio greens, the same pill button vocabulary, and Inter for UI body. The two tracks share typographic DNA but diverge sharply in canvas polarity — and that choice is the brand.

colors: primary: "#000000" ink: "#000000" on-primary: "#ffffff" on-dark: "#ffffff" canvas-night: "#000000" canvas-night-elevated: "#0a0a0a" canvas-light: "#ffffff" canvas-cream: "#fbfbf5" surface-elevated-dark: "#1e2c31" shade-30: "#d4d4d8" shade-40: "#a1a1aa" shade-50: "#71717a" shade-60: "#52525b" shade-70: "#3f3f46" hairline-light: "#e4e4e7" hairline-dark: "#1e2c31" aloe-10: "#c1fbd4" pistachio-10: "#d4f9e0" link-cool-1: "#9dabad" link-cool-2: "#9797a2" link-cool-3: "#bdbdca" link-mint: "#99b3ad"

typography: display-xxl: fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif" fontSize: 96px fontWeight: 330 lineHeight: 1.0 letterSpacing: 2.4px fontFeature: ss03 display-xl: fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif" fontSize: 70px fontWeight: 330 lineHeight: 1.0 letterSpacing: 0 fontFeature: ss03 display-lg: fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif" fontSize: 55px fontWeight: 330 lineHeight: 1.16 letterSpacing: 0 fontFeature: ss03 display-md: fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif" fontSize: 48px fontWeight: 330 lineHeight: 1.14 letterSpacing: 0 fontFeature: ss03 heading-xl: fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif" fontSize: 28px fontWeight: 500 lineHeight: 1.28 letterSpacing: 0.42px fontFeature: ss03 heading-lg: fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 1.14 letterSpacing: 0.36px fontFeature: ss03 heading-md: fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif" fontSize: 20px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.3px fontFeature: ss03 heading-sm: fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0.72px fontFeature: ss03 body-lg: fontFamily: "Inter Variable, Inter, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 550 lineHeight: 1.56 letterSpacing: 0 fontFeature: ss03 body-md: fontFamily: "Inter Variable, Inter, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 420 lineHeight: 1.5 letterSpacing: 0 fontFeature: ss03 body-strong: fontFamily: "Inter Variable, Inter, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 550 lineHeight: 1.5 letterSpacing: 0 fontFeature: ss03 caption: fontFamily: "Inter Variable, Inter, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.49 letterSpacing: 0.28px fontFeature: ss03 micro: fontFamily: "Inter Variable, Inter, Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 1.5 letterSpacing: -0.13px fontFeature: ss03 eyebrow-cap: fontFamily: "Inter Variable, Inter, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.72px fontFeature: ss03 code: fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 fontFeature: ss03

rounded: xs: 4px sm: 5px md: 8px lg: 12px xl: 20px pill: 9999px

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

components: button-primary-pill: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.pill}" padding: 12px 24px button-primary-pill-pressed: backgroundColor: "{colors.shade-70}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.pill}" padding: 12px 24px button-outline-on-dark: backgroundColor: "{colors.canvas-night}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.pill}" padding: 12px 26px button-outline-on-light: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.pill}" padding: 12px 24px button-aloe-pill: backgroundColor: "{colors.aloe-10}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.pill}" padding: 12px 24px text-input: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 10px 12px card-pricing: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-pricing-featured: backgroundColor: "{colors.aloe-10}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-feature-cinematic: backgroundColor: "{colors.canvas-night-elevated}" textColor: "{colors.on-primary}" typography: "{typography.body-lg}" rounded: "{rounded.lg}" padding: 32px card-pistachio-band: backgroundColor: "{colors.pistachio-10}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-photo-frame: backgroundColor: "{colors.canvas-night}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: 0px pill-tag-mint: backgroundColor: "{colors.aloe-10}" textColor: "{colors.ink}" typography: "{typography.eyebrow-cap}" rounded: "{rounded.pill}" padding: 4px 12px pill-tag-shade: backgroundColor: "{colors.shade-30}" textColor: "{colors.ink}" typography: "{typography.eyebrow-cap}" rounded: "{rounded.pill}" padding: 4px 12px nav-bar-light: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 16px 24px nav-bar-dark: backgroundColor: "{colors.canvas-night}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 16px 24px link-on-dark: backgroundColor: "{colors.canvas-night}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 0px footer-dark: backgroundColor: "{colors.canvas-night}" textColor: "{colors.on-primary}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 64px 24px footer-light: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 64px 24px

概述

Shopifi 同时运行两条平行的设计轨道，它们共享字体排版基因与同一套按钮词汇，但在画布极性上分歧。营销轨道建立在 {colors.canvas-night}（#000000）之上——商户的全幅电影质感摄影、巨型的 {typography.display-xxl} Neue Haas Grotesk Display 标题以 330 字重（细到几乎编辑性的剪裁）、以及唯一的 CTA：白描边的黑色胶囊，形态为 button-outline-on-dark。这些页面读起来像高端印刷杂志的跨页：大量黑色、大量留白、不与文字争抢的摄影，以及每段只有一个唯一的操作。

交易型轨道翻转到 {colors.canvas-light} 与 {colors.canvas-cream}（一种比纯白略暖的近白色）。定价层级、对比表与注册流程位于这个更亮的画布上，使用相同的胶囊按钮系统但极性反相（实心黑色胶囊配白色文字，或 {colors.aloe-10} 薄荷胶囊用于特色/"Start free trial"层级）。强调色——{colors.aloe-10} 薄荷与 {colors.pistachio-10} 开心果——只出现在浅色轨道上，从不出现在电影感的深色首屏页面上。

字体排版分为三个字体族。Neue Haas Grotesk Display 在细字重（330–500）下处理每个展示、标题与编辑瞬间——品牌的身份就是那个细的展示剪裁。Inter Variable 在 420–550 字重下处理每个 UI 正文、按钮标签、说明与表单字段——不与展示字体争抢的实用文字。ui-monospace 只出现在代码块与罕见的技术小标签中。在三个字体族中，OpenType ss03 风格集都是启用的——这是品牌的字符级签名，跨两条轨道统一应用。

关键特征：

• 双画布系统：{colors.canvas-night} 用于电影感营销，{colors.canvas-light} / {colors.canvas-cream} 用于交易型表面——永不混用。
• 胶囊形（{rounded.pill}）是两条轨道上唯一的按钮形状；按钮上不存在圆角矩形。
• 细字重（330）展示字体排版是品牌的签名；{typography.display-xxl} 96px / 字重 330 是品牌最响亮的视觉。
• Aloe 与开心果绿（{colors.aloe-10}、{colors.pistachio-10}）保留给浅色轨道——它们标志着商务、增长、交易成功。
• 摄影是全幅的、边到边的，在电影感轨道上从不嵌入卡片内；商户与店面图像承担着渐变与插画在其他地方会做的繁重视觉工作。
• OpenType ss03 风格集在每个文本角色上都启用——一个字符级的统一器，跨两条轨道贯穿。
• 展示尺寸的紧凑字距（96px 展示上 2.4px 正字距）为细字重提供额外的光学空气。

配色

来源页面： 首页（/）、/start、/website/builder、/pricing。

品牌与强调色

• Aloe（{colors.aloe-10} — #c1fbd4）：特色层级与"增长"强调。作为浅色表面上的胶囊按钮背景，以及定价对比带中作为功能卡片填充。
• Pistachio（{colors.pistachio-10} — #d4f9e0）：比 aloe 更柔和；用作浅色轨道上的宽段带填充，以在不脱离绿色家族的前提下标示不同类别的功能。
• Cool Link Tones（{colors.link-cool-1} #9dabad、{colors.link-cool-2} #9797a2、{colors.link-cool-3} #bdbdca、{colors.link-mint} #99b3ad）：深色表面上柔和的页脚/三级链接颜色，用于在主白色文字下营造安静的层级。

表面

• Canvas Night（{colors.canvas-night} — #000000）：纯黑首屏、电影感功能页、页脚。
• Canvas Night Elevated（{colors.canvas-night-elevated} — #0a0a0a）：电影感表面上的卡片、视频帧。
• Surface Elevated Dark（{colors.surface-elevated-dark} — #1e2c31）：深色偏青色表面，用在一小部分深色卡片上，以引入微妙的深度而不打破黑色。
• Canvas Light（{colors.canvas-light} — #ffffff）：定价、注册、对比表。
• Canvas Cream（{colors.canvas-cream} — #fbfbf5）：略暖的近白色，用于定价页背景画布——与 #ffffff 几乎无差，但增加了编辑性温度。
• Hairline Light（{colors.hairline-light} — #e4e4e7）：浅色卡片上的 1px 边框，表格分隔线。
• Hairline Dark（{colors.hairline-dark} — #1e2c31）：罕见的、带有可见外壳的深色卡片上的 1px 边框。

灰阶梯度

• Shade-30（{colors.shade-30} — #d4d4d8）：浅色上的标签/芯片背景，深色上的页脚细线。
• Shade-40（{colors.shade-40} — #a1a1aa）：浅色上的三级文本，深色上的次级文本。
• Shade-50（{colors.shade-50} — #71717a）：浅色上的次级文本。
• Shade-60（{colors.shade-60} — #52525b）：浅色上的三级文本，深色上的深色。
• Shade-70（{colors.shade-70} — #3f3f46）：主胶囊按钮的按下态；深色表面强调。

文本

• Ink（{colors.ink} — #000000）：浅色画布上的所有文本。
• On Primary（{colors.on-primary} — #ffffff）：深色画布上的所有文本 + 填充胶囊标签。

字体排版

字体族

展示层级是 Neue Haas Grotesk Display，使用细字重（330–500）。不可用时回退到细字重的 Helvetica，再回退到 Arial。细字重的剪裁就是品牌——任何替代都不应默认为 400+ 字重。

UI 层级是 Inter Variable，字重 420–550——一种可变字体，借助子字重精度让系统在正文（420）、强调（550）、说明（500）之间切换而不跳到更重的层级。Inter 通过 Google Fonts 开源。

代码层级是 ui-monospace，系统等宽字体——优先于 webfont 等宽字体以避免不必要的下载。

OpenType ss03 风格集在每个角色上都启用。它会改变特定的字形形态（小写 a、g、单层数字），呈现略微更具几何感的字符。通过 font-feature-settings: "ss03" 在 body 元素或根上应用。

层级

原则

• 展示字体的细是品牌。 始终以 330 字重渲染展示尺寸——绝不 400+。这种细是有意的编辑性选择，让巨型尺寸读起来更安静。
• 展示用 NHGD，正文用 Inter。 不要将正文角色上推到 NHGD；不要将展示角色下推到 Inter。
• 展示上提升字距。 96px 首屏获得 +2.4px 正字距——细字形需要空气。在 70px 及以下，字距回到 0。

字体替代说明

Neue Haas Grotesk Display 的开源替代：Helvetica Now Display（专有）或 Inter Display 的细字重（开源）是最接近的匹配。避免默认字重的 Helvetica Neue——它对该品牌的细字重来说太重了。Inter Variable 通过 Google Fonts 开源，是规范的正文字体——无需替代。

布局

间距系统

• 基础单位：8px（配有更密的子单位 1、2、3、4 用于精细工作）。
• Tokens：{spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.huge} 64px。
• 段内边距：电影感营销页 {spacing.huge} 64–128px（极端留白就是要点）；交易型页折叠为约 48px，密度优先。
• 卡片内边距：定价卡片 {spacing.xxl} 32px；紧凑标签行 {spacing.xl} 24px。

网格与容器

• 电影感首屏页使用宽最大宽度容器（约 1440–1600px），边缘流血的摄影超出容器。
• 定价根据视口折叠 4 列 → 2 列 → 1 列。
• 正文内容在长文页上居中于约 720–840px 阅读列。

留白哲学

电影感轨道将留白视为品牌最有价值的资产——内容块之间经常有 128–192px 的垂直空气，摄影填补其余。交易型轨道收紧到约 48–64px 的段间距，因为用户在扫描、比较与行动。两种留白哲学之间的对比是品牌声音的一部分。

层次与深度

装饰性深度

在电影感轨道上，深度来自摄影——铺满卡片背景的全幅商户图像，配以微妙的顶部边缘内嵌高光，营造光线照在玻璃表面的错觉。在浅色轨道上，分层的小阴影栈（Level 3）产生柔和、纸感的光晕包裹定价卡片——深度而不生硬。

形状

圆角比例

摄影几何

摄影是全幅无边框的。在电影感页面上它完全逃出容器；在交易型页面上它位于 {rounded.lg} 容器内无阴影。客户 logo 条中的头像处理是简单的灰阶字标，高度统一（约 24–32px），在单个水平条中排列。

组件

按钮

button-primary-pill — 系统的主导 CTA。

• 背景 {colors.primary}（黑），文本 {colors.on-primary}，字体 {typography.body-md}，内边距 {spacing.md} {spacing.xl}（12px 24px），圆角 {rounded.pill} 9999px。
• 按下态 button-primary-pill-pressed：背景抬升到 {colors.shade-70}。

button-outline-on-dark — 电影感首屏的 CTA。

• 背景 {colors.canvas-night}（画布上透明），2px solid {colors.on-primary} 边框，文本 {colors.on-primary}，相同的胶囊几何。

button-outline-on-light — 浅色轨道的等价物。

• 背景 {colors.canvas-light}，1px solid {colors.ink} 边框，文本 {colors.ink}，相同的胶囊几何。

button-aloe-pill — 定价页的特色 CTA。

• 背景 {colors.aloe-10}，文本 {colors.ink}，相同的胶囊几何。用于"Start free trial"层级。

卡片与容器

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

• 背景 {colors.canvas-light}，内边距 {spacing.xxl}，圆角 {rounded.lg} 12px，1px {colors.hairline-light} 边框。标题使用 {typography.heading-xl}，价格使用 {typography.display-md}，正文使用 {typography.body-md}，CTA 钉到底部作为 button-primary-pill。

card-pricing-featured — 高亮的定价层级。

• 背景 {colors.aloe-10}，其他与 card-pricing 相同。薄荷填充（而非品牌色边框）是品牌的特色层级标志性选择。

card-feature-cinematic — 电影感轨道上的功能卡片。

• 背景 {colors.canvas-night-elevated}，文本 {colors.on-primary}，圆角 {rounded.lg}，经常配以顶部边缘内嵌高光（Level 1 高度）。容纳全幅摄影或单个大型陈述。

card-pistachio-band — 浅色轨道上用于强调某类功能的宽水平带卡片。

• 背景 {colors.pistachio-10}，文本 {colors.ink}，圆角 {rounded.lg} 12px，内边距 {spacing.xxl}。

card-photo-frame — 电影感页面上的全幅摄影容器。

• 背景 {colors.canvas-night}，内边距 0，圆角 {rounded.xl} 20px（经常仅顶部）。照片本身就是内容；无内边距，卡片内无叠加文字。

输入与表单

text-input — 浅色表面上的标准文本输入框。

• 背景 {colors.canvas-light}，文本 {colors.ink}，字体 {typography.body-md}，内边距 {spacing.sm}+ {spacing.md}（10px 12px），圆角 {rounded.md} 8px，1px {colors.hairline-light} 边框。

导航

nav-bar-light — 浅色页面的顶部导航。

• 背景 {colors.canvas-light}，文本 {colors.ink}，内边距 {spacing.lg} {spacing.xl}。左侧 logo 字标，中间导航项，右侧两个胶囊按钮（"Log in" 用 button-outline-on-light，"Start free trial" 用 button-primary-pill）。

nav-bar-dark — 电影感页面的顶部导航。

• 背景 {colors.canvas-night}，文本 {colors.on-primary}，其他结构相同。右侧两个胶囊按钮（都用 button-outline-on-dark，最右侧通过字重微妙地更突出）。

胶囊、标签与芯片

pill-tag-mint — 浅色表面上的小标签，标示功能类别。

• 背景 {colors.aloe-10}，文本 {colors.ink}，字体 {typography.eyebrow-cap}，内边距 {spacing.xs} {spacing.md}，圆角 {rounded.pill}。

pill-tag-shade — 浅色表面上的中性标签。

• 背景 {colors.shade-30}，文本 {colors.ink}，其他形状与 pill-tag-mint 相同。

标志性组件

电影感摄影层 — 首屏上的全幅商户照片。无叠加暗幕，无图上文；取而代之，文字位于照片上方或下方的干净留白中。品牌将摄影视为编辑性跨页，而非装饰。

堆叠小阴影（Level 3 高度） — 浅色轨道上的定价卡片使用 4 个堆叠的小投影阴影（每个 1–8px Y 偏移，10% 黑），产生柔和、分层的纸张光晕。这是品牌在浅色上的标志性深度。

link-on-dark — 电影感页面上的行内链接。

• 颜色 {colors.on-primary}，默认无下划线（链接依赖上下文）；对于三级页脚链接，颜色切换为冷色静音调之一（{colors.link-cool-1} 等），并带有持续的下划线。

footer-dark — 电影感轨道上的全页宽页脚。

• 背景 {colors.canvas-night}，文本 {colors.on-primary}，字体 {typography.caption}，内边距 {spacing.huge} {spacing.xl}。包含 4–5 列静音调链接组、社交图标，以及小法律行。

footer-light — 交易型轨道上的等价物。

• 背景 {colors.canvas-light}，文本 {colors.ink}，其他结构相同。

推荐与避免

推荐

• 将 {colors.aloe-10} 与 {colors.pistachio-10} 保留给浅色轨道——它们不出现在电影感黑色页面上。
• 始终为按钮使用 {rounded.pill}；不要使用 {rounded.md} 或 {rounded.lg}。
• 以 330 字重渲染展示层级；提升到 400 或 500 会破坏品牌的细展示签名。
• 在电影感页面上使用全幅摄影——让它逃出容器。
• 全局应用 font-feature-settings: "ss03"；风格集是品牌的字体排版签名。
• 黑画布配白字与白描边胶囊；浅画布配黑字与填充黑胶囊。

避免

• 不要引入第三种画布颜色——坚持黑色或浅色/奶油色。灰色、米色与蓝色都不在系统中。
• 不要在电影感深色卡片上添加超过微妙内嵌顶部高光的投影阴影；电影感轨道要的是扁平的黑色。
• 不要在首屏上将展示层级缩到 {typography.display-md}（48px）以下；低于此尺寸读起来像段标题，而非展示。
• 不要在 aloe / 开心果绿后放置文字——它们是表面填充，不是文字颜色。
• 不要在任何地方用圆角矩形按钮取代胶囊形。

响应式行为

断点

触控目标

• 胶囊按钮在移动端通过 12px 垂直内边距 × 16px 行高达到 ≥ 44×44px。符合 WCAG AAA。
• 表单字段在所有断点下保持 44px 最小高度。

折叠策略

• 展示尺寸沿断点阶梯缩放：移动端 96 → 70 → 55 → 48 → 36px。
• 电影感摄影在较小宽度下激进裁剪，优先焦点主体而非边缘流血。
• 定价层级阶梯式折叠 4 列 → 2 列 → 1 列；特色 aloe 层级在每一步都保持视觉区别。
• 顶部导航在 768px 以下折叠为汉堡；菜单继承画布极性。

图像行为

摄影使用带艺术方向裁剪的响应式 srcset，对应主要断点。移动端裁剪优先特写主体；宽幅裁剪优先环境/店面背景。

迭代指南

1. 一次专注于一个组件。
2. 直接引用组件名与 token（{colors.aloe-10}、{button-primary-pill}-pressed、{rounded.pill}）。
3. 编辑后运行 npx @google/design.md lint DESIGN.md。
4. 将新变体作为单独条目添加。
5. 正文默认使用 {typography.body-md}；营销引导保留 {typography.body-lg}。
6. 让两个画布轨道保持分离——设计新页面时，选择电影感或交易型，而非两者。
7. 胶囊形不可妥协；新按钮变体变化的是填充/边框/画布，而非形状。