Design System Inspired by Runway
1. 视觉主题与氛围
Runway 的界面是一段被搬到网页上的电影胶片——一种深色、编辑级、电影制作规格的设计，全幅摄影与视频本身就是主要的 UI 元素。这并不是一个典型的科技产品页面；它是 AI 驱动创造力的一份视觉宣言。每一段都像是电影中的某一帧：戏剧性的灯光、广阔的地貌、以及用高质量影像捕捉到的亲密人类瞬间，主导着整个视口。
设计语言建立在单一字体之上——abcNormal——一款干净的几何无衬线字体，能够胜任从 48px 的展示标题到 11px 大写小标签的所有场景。这种单一字体的高度统一让视觉内容比文字本身更具表达力。标题使用紧致行高（1.0）并带有负字距（-0.9px 到 -1.2px），形成压缩的文本块，更像电影标题而非营销文案。
Runway 的独特之处在于它对"以视觉内容作为设计"的彻底投入。Runway 并不用图标或示意图来解释功能，而是直接展示真实的 AI 生成与 AI 增强影像——穿过电影质感风景的汽车、艺术肖像、建筑渲染图。界面本身退到几乎不可见的状态：极少的边框、零阴影、克制的冷灰色文本，以及一种将视觉焦点最大化留给摄影的深色调色板。
关键特征：
- 电影级全幅摄影与视频作为主要 UI 元素
- 单一字体系统：abcNormal 胜任从展示标题到微标签的所有场景
- 以冷调中性色（#767d88、#7d848e）为主的深色调色板
- 零阴影、极少边框——界面刻意保持隐形
- 紧凑的展示字体排版（行高 1.0），带有负字距（-0.9px 到 -1.2px）
- 大写字母标签配正字距，承担导航结构
- 小号大写文本使用字重 450（非典型的中间值）——精密工艺
- 编辑杂志式布局，混合尺寸的图像网格
2. 配色与角色
主色
- Runway Black（
#000000）：主页面背景与最高强调级文本。 - Deep Black（
#030303）：用于分层深色表面的几乎不可察觉的变体。 - Dark Surface（
#1a1a1a）：卡片背景与抬升的深色容器。 - Pure White（
#ffffff）：深色表面上的主文本，以及浅色段落背景。
表面与背景
- Near White（
#fefefe）：最浅的表面——与纯白几乎无法区分。 - Cool Cloud（
#e9ecf2）：带冷调蓝灰倾向的浅色段落背景。 - Border Dark（
#27272a）：唯一的深色模式边框色——勉强可见的容器。
中性色与文本
- Charcoal（
#404040）：浅色表面上的主正文与次级文本。 - Near Charcoal（
#3f3f3f）：深色段上次级文本稍亮一些的变体。 - Cool Slate（
#767d88）：次级正文——一种明显的蓝灰冷中性色。 - Mid Slate（
#7d848e）：三级文本与元数据描述。 - Muted Gray（
#a7a7a7）：被弱化的内容、时间戳。 - Cool Silver（
#c9ccd1）：浅色边框与分隔线。 - Light Silver（
#d0d4d4）：最浅的边框/分隔线变体。 - Tailwind Gray（
#6b7280）：标准 Tailwind 中性色，用于补充文本。 - Dark Link（
#0c0c0c）：最深的链接文本——接近纯黑。 - Footer Gray（
#999999）：页脚链接与深度弱化的内容。
渐变系统
- 界面中不使用任何渐变。 视觉的丰富性完全来自摄影内容——AI 生成与增强的影像提供了设计所需的全部色彩与渐变。界面本身刻意保持无色。
3. 字体排版规则
字体族
- 通用：
abcNormal，备用字体：abcNormal Fallback
注：abcNormal 是一款定制几何无衬线字体。外部实现时，可使用 Inter 或 DM Sans 作为接近的替代。
层级
| 角色 | 字体 | 尺寸 | 字重 | 行高 | 字距 | 备注 |
|---|---|---|---|---|---|---|
| Display / Hero | abcNormal | 48px (3rem) | 400 | 1.00 (紧) | -1.2px | 最大尺寸，电影标题存在感 |
| Section Heading | abcNormal | 40px (2.5rem) | 400 | 1.00–1.10 | -1px 至 0px | 功能段落标题 |
| Sub-heading | abcNormal | 36px (2.25rem) | 400 | 1.00 (紧) | -0.9px | 次级段落标识 |
| Card Title | abcNormal | 24px (1.5rem) | 400 | 1.00 (紧) | normal | 文章与卡片标题 |
| Feature Title | abcNormal | 20px (1.25rem) | 400 | 1.00 (紧) | normal | 小标题 |
| Body / Button | abcNormal | 16px (1rem) | 400–600 | 1.30–1.50 | -0.16px 至 normal | 标准正文、导航链接 |
| Caption / Label | abcNormal | 14px (0.88rem) | 500–600 | 1.25–1.43 | 0.35px (大写) | 元数据、段落标签 |
| Small | abcNormal | 13px (0.81rem) | 400 | 1.30 (紧) | -0.16px 至 -0.26px | 紧凑描述 |
| Micro / Tag | abcNormal | 11px (0.69rem) | 450 | 1.30 (紧) | normal | 大写标签、微小标签 |
原则
- 一种字体，完整表达：abcNormal 胜任所有文本角色。设计通过尺寸、字重、大小写与字距的变化来表达差异，而非切换字体族。
- 全场景紧凑：几乎所有尺寸都使用 1.0–1.30 的行高——甚至正文也相对压缩。这营造出密集的编辑感。
- 字重 450——精度的细节：部分小号大写标签使用字重 450，这是介于常规（400）与中等（500）之间非常规的中间值。这一细节体现排版的精密工艺。
- 负字距作为默认：甚至正文也使用 -0.16px 到 -0.26px 的字距，让所有内容都比默认更紧致。
- 大写作为结构：14px 与 11px 的标签使用
text-transform: uppercase并搭配正字距（0.35px），形成与紧凑小写文本形成对比的导航路标。
4. 组件样式
按钮
- 文本：abcNormal 14px 字重 600
- 背景：可能透明或深色，边框极少
- 圆角：按钮式链接使用小尺寸（4px）
- 按钮设计极度克制——没有发现重填充或重边框
- 交互元素融入编辑流之中
卡片与容器
- 背景：透明或 Dark Surface（
#1a1a1a） - 边框：
1px solid #27272a（深色模式）——勉强可见的容器 - 圆角：功能元素 4–8px；横幅样式容器 16px
- 阴影：零——任何元素都没有阴影
- 卡片本质上是影像化的——图像本身就是卡片
导航
- 极简水平导航——透明地悬浮在首屏内容之上
- Logo：白/黑色的 Runway 字标
- 链接：abcNormal 16px，字重 400–600
- 悬停：文本变为白色或更高不透明度
- 极其克制——设计不与视觉内容争抢注意力
图像处理
- 电影级全幅摄影与视频占据主导
- AI 生成内容以大尺寸作为主要视觉元素
- 混合尺寸的图像网格营造编辑杂志式布局
- 首屏图像使用深色叠加以保证文字可读性
- 产品截图采用轻微圆角（8px）
特色组件
Cinematic Hero
- 全视口图像或视频，配文字叠加
- 标题使用 48px abcNormal，白色置于深色图像之上
- 图像始终保持电影质感——电影级的构图
Research Article Cards
- 带文章标题的摄影缩略图
- 混合尺寸网格布局（大特写 + 小辅图）
- 干净的文字叠加或图像下方说明样式
Trust Bar
- 各行业领军组织的公司 logo
- 干净的、单色处理
- 横向布局，间距宽裕
Mission Statement
- "We are building AI to simulate the world through imagination, art and aesthetics"
- 深色背景配白色文本
- 情绪化的收尾——艺术化与哲学化
5. 布局原则
间距系统
- 基础单位：8px
- 比例：4px, 6px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 48px, 64px, 78px
- 段垂直间距：宽裕（48–78px）
- 组件间距：16–24px
网格与容器
- 容器最大宽度：最高 1600px（影院级宽幅）
- 首屏：全视口、边到边
- 内容段：居中并保留充足外边距
- 图像网格：不对称、杂志式混合尺寸
- 页脚：全宽深色段
留白哲学
- 影院级呼吸感：段间巨大的纵向留空营造出类似观看场景切换的滚动体验。
- 图像替代留白：在其他网站使用空白的地方，Runway 用摄影填满它。视觉内容本身即是呼吸空间。
- 编辑网格的不对称性：图像网格有意采用多样化的尺寸——大尺寸首屏图像配以小尺寸辅图，营造视觉节奏。
圆角比例
- 锐利（4px）：按钮、小型交互元素
- 微妙（6px）：链接、小容器
- 舒适（8px）：标准容器、图像卡片
- 宽裕（16px）：横幅样式容器、特色元素
6. 层次与深度
| 层级 | 处理方式 | 用途 |
|---|---|---|
| 扁平（Level 0） | 无阴影、无边框 | 所有——主导状态 |
| 有边框（Level 1） | 1px solid #27272a | 仅用于横幅容器 |
| 深色段（Level 2） | 深色背景（#000000 / #1a1a1a）配浅色文本 | 首屏、功能区、页脚 |
| 浅色段（Level 3） | 白/Cool Cloud 背景配深色文本 | 内容段、研究区 |
阴影哲学：Runway 使用零阴影。这是一个电影制作层面的决策——在电影中，深度来自灯光、焦点与构图，而非投影阴影。界面也遵循这一哲学：深度通过深浅段交替、摄影的景深以及叠加透明度来表达，而非通过 CSS box-shadow。
7. 推荐与避免
推荐
- 使用电影级全幅摄影作为主要视觉元素
- 所有文本一律使用 abcNormal——保持单一字体的承诺
- 展示行高保持在 1.0，配合负字距，形成电影标题般的密度
- 使用冷调灰色调（#767d88、#7d848e）作为次级文本
- 保持零阴影——深度来自摄影与段背景
- 导航标签使用大写字母并配字距（14px，0.35px 字距）
- 使用小圆角（4–8px）——设计并非胶囊形
- 让视觉内容（照片、视频）主导——UI 应保持隐形
- 微标签使用字重 450——精度很重要
避免
- 不要在界面中加入装饰色——唯一的色彩来自摄影
- 不要使用重边框或阴影——界面必须几乎隐形
- 不要使用胶囊形圆角——Runway 的几何是微妙圆角而非圆形
- 不要使用粗体（700+）字重——400–600 是完整范围，450 作为精度工具
- 不要与视觉内容争抢注意力——文字叠加应保持克制
- 不要在界面中使用渐变背景——渐变只存在于摄影中
- 不要使用超过一种字体——abcNormal 胜任所有
- 不要让正文行高超过 1.50——紧凑的编辑感是核心
- 不要降低图像质量——电影级摄影本身就是设计
8. 响应式行为
断点
| 名称 | 宽度 | 关键变化 |
|---|---|---|
| Mobile | <640px | 单列、堆叠图像、首屏文字缩小 |
| Tablet | 640–768px | 出现 2 列图像网格 |
| Small Desktop | 768–1024px | 标准布局 |
| Desktop | 1024–1280px | 完整布局、扩展首屏 |
| Large Desktop | 1280–1600px | 最大影院宽度容器 |
触控目标
- 导航链接使用舒适的 16px
- 文章卡片作为大触控目标
- 按钮使用 14px 字重 600 并保持足够内边距
折叠策略
- 导航：移动端折叠为汉堡菜单
- 首屏：保持全幅，文字按比例缩小
- 图像网格：多列 → 2 列 → 单列
- 研究文章：特写卡片 → 堆叠为全宽
- 信任 logo：横向滚动或精简网格
图像行为
- 电影级图像按比例缩放
- 各种尺寸下都保持全幅首屏
- 图像网格重构为更少列数
- 视频内容保持宽高比
9. 智能体 Prompt 指南
颜色速查
- 深色背景："Runway Black (#000000)"
- 浅色背景："Pure White (#ffffff)"
- 深色主文本："Charcoal (#404040)"
- 次级文本："Cool Slate (#767d88)"
- 弱化文本："Muted Gray (#a7a7a7)"
- 浅色边框："Cool Silver (#c9ccd1)"
- 深色边框："Border Dark (#27272a)"
- 卡片表面："Dark Surface (#1a1a1a)"
组件 Prompt 示例
- "创建一个电影级首屏段：全幅深色背景叠加电影质感图像。标题使用 48px abcNormal 字重 400，行高 1.0，字距 -1.2px，白色。下方使用 Cool Slate (#767d88) 16px 的极简文字。"
- "设计研究文章网格：一张大卡（50% 宽度）配电影质感图像和 24px 标题，旁边堆叠两张小卡。所有图像 8px 圆角。标题白色（深色背景）或 Charcoal (#404040，浅色背景)。"
- "构建段标签：14px abcNormal 字重 500，大写，字距 0.35px，颜色 Cool Slate (#767d88)。无边框，无背景。"
- "创建信任栏：单色公司 logo，横向布局并保留宽裕间距。深色背景配白色/灰色 logo。"
- "设计使命陈述段：Runway Black 背景，白色 36px abcNormal，行高 1.0，字距 -0.9px。居中，并配充足纵向内边距。"
迭代指南
- 视觉内容优先——始终包含电影质感摄影
- 一律使用 abcNormal——指定尺寸与字重，绝不更换字体
- 让界面保持隐形——无重边框、无阴影、无亮色
- 使用冷调石板灰（#767d88、#7d848e）作为次级文本——不要用暖灰
- 大写标签需要字距（0.35px）——绝不要紧凑的大写
- 深色段必须真正深（#000000 或 #1a1a1a）——不要用中灰作为表面