version: alpha name: Spacex-Inspired-design-analysis description: An inspired interpretation of Spasex's design language — a mission-oriented aerospace brand built on pure black canvas, full-bleed photographic and video heroes of rockets and Mars landscapes, and uppercase D-DIN display type set in tight vertical leading. UI chrome is intentionally minimal a single ghost outlined pill button per band, all-caps eyebrow microtext, and a fixed top nav over photography. The system is unapologetically austere — black, white, and the imagery itself.
colors: primary: "#000000" ink: "#000000" on-primary: "#ffffff" on-primary-mute: "#f0f0fa" canvas-night: "#000000" canvas-night-soft: "#0a0a0a" canvas-light: "#ffffff" canvas-cool: "#f0f0fa" hairline-on-dark: "#3a3a3f" hairline-on-light: "#e0e0e8" link-on-dark: "#ffffff" link-blue-fallback: "#0000ee" ink-mute: "#5a5a5f"
typography: display-xxl: fontFamily: "D-DIN-Bold, Arial Narrow, Arial, Verdana, sans-serif" fontSize: 80px fontWeight: 700 lineHeight: 0.95 letterSpacing: 1.6px display-xl: fontFamily: "D-DIN-Bold, Arial Narrow, Arial, Verdana, sans-serif" fontSize: 60px fontWeight: 700 lineHeight: 1.2 letterSpacing: 1.2px display-lg: fontFamily: "D-DIN-Bold, Arial Narrow, Arial, Verdana, sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0.96px body-lg: fontFamily: "D-DIN, Arial, Verdana, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.32px body-md: fontFamily: "D-DIN, Arial, Verdana, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.32px button-cap: fontFamily: "D-DIN, Arial, Verdana, sans-serif" fontSize: 13.008px fontWeight: 700 lineHeight: 0.94 letterSpacing: 1.17px micro-cap: fontFamily: "D-DIN, Arial, Verdana, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.96px caption: fontFamily: "D-DIN, Arial, Verdana, sans-serif" fontSize: 13.008px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0
rounded: xs: 4px sm: 8px md: 16px pill: 32px full: 9999px
spacing: xxs: 4px xs: 8px sm: 12px md: 16px lg: 18px xl: 24px xxl: 32px huge: 48px
components: button-ghost-on-dark: backgroundColor: "{colors.canvas-night}" textColor: "{colors.on-primary}" typography: "{typography.button-cap}" rounded: "{rounded.pill}" padding: 18px 24px button-ghost-on-light: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" typography: "{typography.button-cap}" rounded: "{rounded.pill}" padding: 18px 24px button-filled-cool: backgroundColor: "{colors.canvas-cool}" textColor: "{colors.ink}" typography: "{typography.button-cap}" rounded: "{rounded.pill}" padding: 18px 24px text-input: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 12px 16px card-photo-band: backgroundColor: "{colors.canvas-night}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 0px card-shop-product: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 16px nav-bar-overlay: backgroundColor: "{colors.canvas-night}" textColor: "{colors.on-primary}" typography: "{typography.button-cap}" rounded: "{rounded.xs}" padding: 24px 32px link-on-dark: backgroundColor: "{colors.canvas-night}" textColor: "{colors.link-on-dark}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 0px link-on-light: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" 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: 32px 24px
概述
Spasex 的设计语言是一场关于否定的练习：纯黑画布、紧凑纵向行高大写白色展示字体、全幅摄影或自动播放的火箭发射视频作为唯一的外壳。黑白之外没有品牌色；没有装饰形状；在营销页上没有卡片网格或定价表。每个带都是一张全视口的照片或视频，配以 {typography.display-xxl}（80px D-DIN-Bold）的单个全大写标题以及一个幽灵描边胶囊 CTA。构图更像电影片头卡，而非 SaaS 落地页。
品牌的深度来自摄影。火星地貌、火箭尾焰、日落时发射台上的 F9 助推器——这些才是设计系统。文字以高不透明度置于其上，无暗幕、无渐变叠加；照片被调色以让文字清晰落地。当文字确实需要背景时，它落在 {colors.canvas-night-soft}（一个勉强抬起的近黑）上，配 {colors.hairline-on-dark} 中的 1px 细线。
字体排版分为 D-DIN-Bold 用于展示层级（大写、紧凑字距、紧凑感）与 D-DIN 常规体用于正文与按钮标签。没有第三个字体族——甚至商店网站的定价也使用同样两种剪裁。展示尺寸在纵向行高上异常紧凑（0.95–1.25），在横向字距上异常宽松（80px 上 1.6px 正字距）——品牌感觉是被工程化而非被设计的。
关键特征：
- 单一画布：营销使用纯
{colors.canvas-night}（#000000）；仅商店网站使用{colors.canvas-light}。 - 展示层级使用大写 D-DIN-Bold 配正横向字距（80px 上 1.6px）——品牌的字体排版签名。
- 全幅摄影或自动播放视频作为主导装饰元素；文字直接置于图像上无暗幕。
- 每带单个幽灵描边胶囊 CTA，使用
{rounded.pill}32px 圆角——永不填充、永不强调色。 - 全大写小标签微文本（
{typography.micro-cap}与{typography.button-cap}）配正字距 0.96–1.17px——每个外壳元素都大写宣示。 - 固定顶部导航叠加在摄影之上——无不透明背景，只是白字于图上。
- 80px 展示的紧凑 0.95 行高——纵向压缩是工程的审美。
配色
来源页面： 首页（
/）、/shop、/vehicles/starship、/humanspaceflight/overview、/mission。
品牌与强调色
品牌没有强调色。黑白承担所有色彩工作；摄影提供其他一切色相。
表面
- Canvas Night（
{colors.canvas-night}—#000000）：默认营销画布。纯黑，无偏色。 - Canvas Night Soft（
{colors.canvas-night-soft}—#0a0a0a）：勉强抬起的近黑色，用于需要与纯黑首屏微妙分隔的内容段。 - Canvas Light（
{colors.canvas-light}—#ffffff）：商店网站的产品表面。 - Canvas Cool（
{colors.canvas-cool}—#f0f0fa）：淡冷蓝白色，用作商店网站上的次级表面以及某些幽灵按钮的悬停画布。 - Hairline on Dark（
{colors.hairline-on-dark}—#3a3a3f）：深色表面外壳上的 1px 边框。 - Hairline on Light（
{colors.hairline-on-light}—#e0e0e8）：商店网站卡片上的边框。
文本
- On Primary（
{colors.on-primary}—#ffffff）：深色画布上的默认文本；营销网站上的主导文本颜色。 - On Primary Mute（
{colors.on-primary-mute}—#f0f0fa）：略冷的白色，用于深色表面上的次级文本——与{colors.on-primary}几乎无法区分，但足以暗示层级。 - Ink（
{colors.ink}—#000000）：浅色表面上的默认文本（商店网站）。 - Ink Mute（
{colors.ink-mute}—#5a5a5f）：浅色表面上的次级文本。
链接
- Link on Dark（
{colors.link-on-dark}—#ffffff）：深色画布上的下划线行内链接。 - Link Blue Fallback（
{colors.link-blue-fallback}—#0000ee）：出现在无样式回退语境中的浏览器默认色——为完整性记录，但不用作品牌色。
字体排版
字体族
展示层级是 D-DIN-Bold——一种紧凑的工业无衬线字体，灵感来自德国 DIN 1451 标准（用于高速公路标志与工程蓝图）。不可用时回退到 Arial Narrow，然后 Arial，然后 Verdana——回退链优先考虑宽度压缩而非装饰。
UI 层级是 D-DIN（常规字重）——同字体族的标准宽度——用于正文、按钮标签与说明。
D-DIN 可从 DIN Type Foundry 免费获取（同名免费版本广泛分发）。为了最大的品牌保真度，直接使用 D-DIN；作为替代，Inter 在重字重（700+）下配 1.6px 正字距近似其节奏。避免使用衬线或人文无衬线替代。
层级
| Token | 尺寸 | 字重 | 行高 | 字距 | 用途 |
|---|---|---|---|---|---|
{typography.display-xxl} | 80px | 700 | 0.95 | 1.6px | 首屏标题（大写） |
{typography.display-xl} | 60px | 700 | 1.2 | 1.2px | 段开放器（大写） |
{typography.display-lg} | 48px | 700 | 1.25 | 0.96px | 子段标题（大写） |
{typography.body-lg} | 16px | 400 | 1.7 | 0.32px | 营销正文引导 |
{typography.body-md} | 16px | 400 | 1.5 | 0.32px | 默认 UI 正文 |
{typography.button-cap} | 13.008px | 700 | 0.94 | 1.17px | 全大写按钮标签 |
{typography.micro-cap} | 12px | 400 | 2.0 | 0.96px | 全大写小标签 / 导航项 |
{typography.caption} | 13.008px | 400 | 1.5 | 0 | 辅助 / 页脚文本 |
原则
- 全大写横跨展示。 每个展示层级都使用大写渲染。品牌从不在展示标题中使用句式大小写。
- 紧凑的展示纵向行高。 80px 上 0.95，60px 上 1.2——字体像工程一样紧密堆叠。
- 宽横向字距。 展示尺寸 0.96–1.6px 正字距；大写小标签 0.96–1.17px 正字距。宽字距是品牌标志性的光学空气。
- 无等宽字体。 代码块不属于品牌的字体排版系统。
字体替代说明
D-DIN 免费可用（同名原始 DIN 风格字体广泛分发）。不可用时，对展示尺寸使用 Inter 在 700 字重下配 letter-spacing: 1.6px、text-transform: uppercase 与 line-height: 0.95——这匹配其节奏。避免默认字重的 Helvetica 或 Arial——品牌需要紧凑的工业剪裁。完全避免衬线回退。
布局
间距系统
- 基础单位：8px（配有更密的子单位 4 / 12 / 16 / 18 / 24）。
- Tokens：
{spacing.xxs}4px ·{spacing.xs}8px ·{spacing.sm}12px ·{spacing.md}16px ·{spacing.lg}18px ·{spacing.xl}24px ·{spacing.xxl}32px ·{spacing.huge}48px。 - 段内边距：营销上是全视口带——上方/下方无内边距；照片本身就是段。在商店网站上，段使用 48–64px 垂直内边距。
网格与容器
- 营销页面没有容器——每个带都是全视口宽、全视口高（或接近），摄影填满整个画面。
- 商店产品网格：桌面 4 列，平板 2 列，移动 1 列。
- 文字落在居中的约 1200px 内部阅读列内，位于全幅照片之上。
留白哲学
营销页面上的传统留白极少——照片占据所有空间。"留白"在此处意味着火箭照片中的暗黑天空或火星地形的空白延伸。负空间是摄影性的，不是 UI 选择。在商店网站上，留白回到标准的 32px 网格槽。
层次与深度
| 层级 | 处理方式 | 用途 |
|---|---|---|
| 0 | 扁平 | 默认——也是营销表面上唯一的层级 |
| 1 | 摄影性——全幅图像或视频 | 主要深度媒介；照片完成所有抬起 |
品牌不使用投影阴影、模糊、光晕或渐变叠加。深度来自摄影：在暮色中发射的火箭具有自然的氛围深度，没有任何 CSS 阴影能模拟。当文字需要从图像中分离时，图像被调得更暗而非加暗幕。
装饰性深度
摄影与自动播放的火箭发射视频是唯一的装饰性深度。除了导航与 CTA 悬停态中几个极简的 SVG 箭头，没有插画、没有图标。
形状
圆角比例
| Token | 值 | 用途 |
|---|---|---|
{rounded.xs} | 4px | 表单输入框（商店网站） |
{rounded.sm} | 8px | 商店产品卡片外壳、视频帧 |
{rounded.md} | 16px | 较大的表面外壳 |
{rounded.pill} | 32px | 幽灵描边胶囊 CTA（品牌标志性按钮形状） |
{rounded.full} | 9999px | 视频帧上的圆形播放按钮叠加 |
摄影几何
每张照片都是全视口流血的、边到边的，在营销网站上从不嵌入卡片内。在商店网站上，产品摄影位于 {rounded.sm} 8px 容器内无阴影。营销摄影上的宽高比随源图像变化——没有强制比例；照片先行。
组件
按钮
button-ghost-on-dark — 营销表面的通用 CTA。
- 背景
{colors.canvas-night}（在照片画布上透明），1px solid {colors.on-primary}边框，文本{colors.on-primary}，字体{typography.button-cap}（大写，13px / 700 / 1.17px 字距），内边距{spacing.lg} {spacing.xl}（18px 24px），圆角{rounded.pill}32px。
button-ghost-on-light — 商店 / 浅色页面上相同的按钮。
- 背景
{colors.canvas-light}（在浅色画布上透明），1px solid {colors.ink}边框，文本{colors.ink}，其他相同。
button-filled-cool — 商店产品卡片上的填充变体。
- 背景
{colors.canvas-cool}，文本{colors.ink}，相同的胶囊几何。用作"Add to cart"或类似的产品 CTA。
卡片与容器
card-photo-band — 营销页面上的全幅摄影带。
- 背景
{colors.canvas-night}，内边距 0，圆角{rounded.xs}。照片填满整条带；文字与 CTA 叠加其上。
card-shop-product — 商店网站上的产品卡片。
- 背景
{colors.canvas-light}，内边距{spacing.md}16px，圆角{rounded.sm}8px，1px {colors.hairline-on-light}边框。产品照片在顶部，名称使用{typography.body-md}，价格使用{typography.body-md}700 字重，底部为"Add to cart"按钮。
输入与表单
text-input — 商店网站上的表单输入框。
- 背景
{colors.canvas-light}，文本{colors.ink}，字体{typography.body-md}，内边距{spacing.sm} {spacing.md}（12px 16px），圆角{rounded.xs}4px，1px {colors.hairline-on-light}边框。
导航
nav-bar-overlay — 营销网站的顶部导航。
- 背景
{colors.canvas-night}（在首屏照片上透明），文本{colors.on-primary}，字体{typography.button-cap}（大写）。左侧约 147×19px 的字标 logo，导航项水平排列为大写，内边距{spacing.xl} {spacing.xxl}（24px 32px）。导航在滚动时固定/粘性，保持叠加处理。
标志性组件
全幅照片 / 视频首屏 — 每个营销带都是一张全视口照片或自动播放的火箭发射视频。文字与 CTA 以高不透明度叠加在照片上无暗幕。照片被调色以让文字清晰落地，无需叠加层。
大写展示标题 — 80px D-DIN-Bold 大写标题配 1.6px 正字距是品牌最具辨识度的字体排版瞬间。始终大写，始终粗体，始终正字距。
link-on-dark — 深色画布上的行内链接。
- 文本
{colors.link-on-dark}（白色），带持续的下划线。
link-on-light — 浅色画布上的行内链接。
- 文本
{colors.ink}，带持续的下划线。
footer-dark — 全站页脚。
- 背景
{colors.canvas-night}，文本{colors.on-primary}，字体{typography.caption}，内边距{spacing.xxl} {spacing.xl}（32px 24px）。容纳{typography.micro-cap}（大写）中的导航列，以及最底部的小法律/版权行。
推荐与避免
推荐
- 在每个营销带上使用全幅摄影或自动播放视频作为主导装饰元素。
- 以大写 D-DIN-Bold 配正字距 0.96–1.6px 渲染展示层级——宽字距是签名。
- 每带使用单个
{button-ghost-on-dark}——品牌不在营销表面上并排显示两个 CTA。 - 让每张照片配以尊重图像的文字——无暗幕、无渐变、无叠加。调照片，而非画布。
- 在营销页面上保持导航叠加风格（透明、白字于图上）。
避免
- 不要引入品牌强调色——黑白与摄影是整套调色板。
- 不要在深色画布上使用投影阴影或渐变叠加——它们与摄影冲突。
- 不要在句式大小写或标题大小写下渲染展示层级——大写是品牌。
- 不要在营销表面上放填充按钮——幽灵描边胶囊是唯一的营销 CTA。
- 不要使用衬线或人文无衬线替代——紧凑的工业 DIN 剪裁不可妥协。
响应式行为
断点
| 名称 | 宽度 | 关键变化 |
|---|---|---|
| Wide | ≥ 1500px | 完整首屏照片；最大文字列 1200px |
| Desktop | 1280–1499px | 默认桌面布局 |
| Laptop | 961–1279px | 文字列收紧；照片裁剪调整 |
| Tablet | 768–960px | 展示从 80 降到 60px；导航压缩 |
| Mobile | 600–767px | 展示降到 48px；幽灵按钮保持胶囊形 |
| Small Mobile | < 600px | 展示降到 40px；导航变为汉堡 |
触控目标
- 幽灵胶囊按钮由于 18px 垂直内边距 × 13px 行高达到 ≥ 50×50px。符合 WCAG AAA。
- 表单字段保持 44px 最小高度。
折叠策略
- 展示尺寸沿断点阶梯变化 80 → 60 → 48 → 40px。
- 摄影在较小宽度下重新裁剪到焦点主体（火箭居中、火星景观居中）。
- 顶部导航在 768px 以下折叠为汉堡；菜单保留深色叠加处理。
- 商店产品网格阶梯式折叠 4 列 → 2 列 → 1 列。
图像行为
营销摄影使用 srcset 处理桌面 / 平板 / 移动端，配主要断点处的艺术方向裁剪。移动端裁剪优先中心焦点主体；宽幅裁剪优先环境背景（完整发射台、完整火星地平线）。
迭代指南
- 一次专注于一个组件。
- 直接引用组件名与 token（
{colors.canvas-night}、{button-ghost-on-dark}、{rounded.pill}）。 - 编辑后运行
npx @google/design.md lint DESIGN.md。 - 将新变体作为单独条目添加。
- 正文默认使用
{typography.body-md}；营销引导保留{typography.body-lg}。 - 仅黑白规则承重——添加品牌强调色会破坏系统。
- 幽灵胶囊是唯一的营销 CTA；填充按钮仅出现在商店网站上。