Remotion 设计语言指南：品牌色、Studio 图标参考与 GT Planar 字体系统

2026-09-06 15:18:46作者：魏侃纯Zoe

本篇基于仓库根目录的 DESIGN.md 展开。这是 Remotion 官方的品牌设计语言（design language）参考文档，规定了创建 Remotion 品牌页面与视觉资产时应遵循的三条核心规范：Studio 图标参照、品牌色板与 GT Planar 字体排版。读完本文，你将知道在 Remotion 仓库中哪里可以找到图标参考合成、品牌色与字体的真实落地实现，以及如何在自己的品牌页面中正确复用这套设计 token。

一、这份参考文档的定位

DESIGN.md 开篇即声明了适用场景：

Use this reference when creating Remotion-branded pages and assets. （创建 Remotion 品牌页面和资产时，请使用本参考。）

也就是说，它不是一份产品文档，而是面向开发者与设计者的内部设计令牌（design tokens）清单，只包含三个小节：Studio icons（图标）、Colors（颜色）、Typography（排版）。仓库中所有品牌相关的页面、视频资产、官网与文档站点，其视觉一致性都以这份文档为准。下文按这三个小节逐一展开，并给出每类规范在仓库中的实际落点。

二、Studio 图标参考：`PreviewToolbarIcons.tsx`

文档"Studio icons"一节的唯一要求是：在新增或更新图标时，使用 Studio 图标参考。该文件并不是一个普通组件库文件，而是一个可直接用 Remotion Studio 预览的图标对照合成（composition），位于私有品牌包 @remotion/brand（见 packages/brand/package.json，"private": true）。

2.1 合成结构：Before / After 两行对照

从源码结构看，该合成由三个部分构成（见 PreviewToolbarIcons.tsx）：

Icon 基础组件：统一的 SVG 外壳，默认尺寸 28 x 28，aria-hidden，通过 currentColor 继承前景色；
IconCell 单元格：每个图标渲染在 48px 的居中方框内，下方配 14px Arial 标签（标签色 #a6a6a6），形成图标字典型布局；
IconRow 行：左侧 68px 宽的分组标题列（大写、加粗、字距 0.6），右侧横向排列全部图标。

合成主体 PreviewToolbarIcons 在一个 #181818 深色背景上渲染两行 IconRow，标签分别为 "Before" 与 "After"：前一行使用当前线上的图标（MinusIcon、LoopIcon、PlayIcon 等），后一行使用一组 Proposed* 变体（ProposedLoopIcon、ProposedVolumeOffIcon、ProposedMagnetIcon 等）。可以推断，这个合成的用途是新旧图标设计的可视化评审看板——把每一组新旧图标逐格对齐，便于在 Remotion Studio 的时间线里直接逐帧比对，这正是"用 React 制作视频"理念在内部设计流程中的应用。

2.2 覆盖的图标清单

两行对照共列出 30 个图标位，覆盖了 Studio 预览工具栏与渲染设置面板的全部图标语义：

分组	图标
预览控制	Zoom out / Zoom in、Jump start、Step back、Play、Pause、Step forward、Loop、Volume on / off、In point / Out point
画布视图	Checkerboard（棋盘格透明背景）、Outlines（轮廓模式）、Snapping（吸附）、Fullscreen
渲染与操作	Render、Dropdown、More、Sidebar left / right、Undo / Redo
渲染设置分类	General、Input props、Picture、Audio、GIF、Encoding、Environment、Other、License

实现上有几个值得注意的细节：

多数图标采用 512/448 高度的大 viewBox 单 path 填充 的实体风格（例如 PlayIcon 的 viewBox 为 0 0 448 512），少数新设计（如 ProposedCheckerboardIcon、ProposedOutlineIcon）改用描边风格（stroke + strokeLinecap="round"），两种风格在同文件中并存，体现了图标重设计的过渡状态；
ProposedVolumeOnIcon 通过复用的 ProposedVolumeBase 组（带 translate(32 0) 变换）叠加不同声波 path 派生出 on/off 两个状态，ProposedVolumeOffIcon 额外叠加一条 32 宽的斜线 stroke 表示静音；
IconCell 的 flex: 1 + minWidth: 0 让图标在行内均匀分布，配合 whiteSpace: 'nowrap' 的标签，使字典型布局在不同分辨率下都保持可读。

2.3 如何运行这个参考合成

@remotion/brand 包提供了现成脚本（见 packages/brand/package.json）：

dev：remotion studio —— 启动 Studio，即可在预览工具栏中查看图标对照合成；
bundle：remotion bundle --rspack --public-path /brand/ —— 打包品牌资产页面；
render-homepage-assets：调用 render-homepage-assets.sh 批量渲染官网首页资产。

三、颜色：三个核心 token 及其真实落点

文档给出的色板只有三个条目，但它们分别对应"品牌强调色"和"明暗两套页面背景"：

用途	色值	仓库落点
品牌强调色（Brand accent）	`#0B84F3`	packages/docs/src/css/custom.css 中 Docusaurus 主题变量 `--ifm-color-primary: #0b84f3`
首页背景（浅色模式）	`#F8FAFC`	官网/品牌页面的浅色底色
首页背景（深色模式）	`#18191A`	官网/品牌页面的深色底色

在文档站点中，品牌蓝 #0B84F3 并非孤立存在，而是以 Docusaurus 的 --ifm-color-primary 系列变量落地，并派生出一整套深浅刻度（见 custom.css）：

--ifm-color-primary: #0b84f3;
--ifm-color-primary-dark: #0a77db;
--ifm-color-primary-darker: #0970cf;
--ifm-color-primary-darkest: #085caa;
--ifm-color-primary-light: #2290f5;

这意味着在 Remotion 的文档与品牌页面中，不应直接硬编码 #0B84F3，而应优先消费 --ifm-color-primary 及其派生变量，以便主题切换时保持刻度一致。品牌宣传页（@remotion/promo-pages）采用了同样的做法：colors.ts 中定义了一个 PALETTE 常量，其 BRAND、TEXT_COLOR、BORDER_COLOR 等字段全部指向 CSS 变量（var(--ifm-color-primary)、var(--text-color)、var(--border-color)），只有少量装饰性颜色（如 #e74c3c、#42e9f5 及其 transparentize 半透明变体）才以字面量存在。这是消费设计 token 时值得借鉴的模式：语义化变量优先，字面量仅限不可推导的装饰色。

四、排版：GT Planar 与 `ss03` 样式集

文档"Typography"一节要求品牌排版使用 GT Planar，并启用其 03 号样式集（stylistic set）：

font-family: 'GTPlanar', sans-serif;
font-feature-settings: 'ss03' on;

这条规则在仓库中已完整落地为字体声明。品牌宣传站的 fonts.css 为 GT Planar 声明了四个字重的 @font-face，且每一档字重都显式开启 ss03：

字重	字体文件（woff2）
400（Regular）	`gt-planar-regular.woff2`
500（Medium）	`gt-planar-medium.woff2`
700（Bold）	`gt-planar-bold.woff2`
900（Black）	`gt-planar-black.woff2`

字体二进制文件位于 packages/promo-pages/public/img/；品牌包 @remotion/brand 的 [public 目录](https://gitcode.com/GitHub_Trending/re/remotion/blob/16c0012ec5dd6db22b4fdc694d0b658c39bf91f8/packages/brand/public/GT Planar?utm_source=gitcode_repo_files) 中也保留了 GT-Planar-Medium.woff2 与 GT-Planar-Bold.woff2 两份副本供视频资产渲染使用。

组件层通过集中常量引用字体名，避免在各处散落字符串：colors.ts 中定义了 FONTS.GTPLANAR = 'GTPlanar'。从源码结构看，该常量被首页的 Pricing、TemperatureNumber、VideoAppsShowcase 等十余个组件引用（均位于 packages/promo-pages/src/components/），说明 GTPlanar + ss03 是跨页面统一的品牌排版入口，而非个别页面的私有样式。

需要说明的前提：GT Planar 是商用字体，上述 woff2 文件直接存放在仓库 public 目录中供内部页面加载；若在自己的项目中复用这套排版规范，应按自己的字体授权情况替换字体文件，但 font-feature-settings: 'ss03' on 与四档字重的组合方式可以照搬。

五、实操清单：在仓库中应用这套设计语言

综合 DESIGN.md 的三条规范与上文源码证据，创建 Remotion 品牌页面或资产时可遵循以下步骤：

图标：新增/修改 Studio 风格图标时，先在 packages/brand/src/PreviewToolbarIcons.tsx 中对照既有语义与新旧两版设计，保持 28px 展示尺寸、currentColor 填充与大 viewBox 单 path 的既有风格；
颜色：品牌强调一律使用 #0B84F3（页面中消费 --ifm-color-primary 及其 dark/light 派生变量），页面背景在浅色/深色模式间取 #F8FAFC / #18191A；
字体：品牌排版一律 font-family: 'GTPlanar' 且开启 'ss03'，按 400/500/700/900 四档字重选取，参考 fonts.css 的声明方式；
验证：品牌资产页面可用 @remotion/brand 包的 remotion studio / remotion bundle --rspack 脚本本地预览与打包。

六、相关文件索引

内容	路径
设计语言参考（本文主体文档）	DESIGN.md
Studio 图标对照合成	packages/brand/src/PreviewToolbarIcons.tsx
品牌包脚本与打包配置	packages/brand/package.json
品牌色变量（Docusaurus 主题）	packages/docs/src/css/custom.css
品牌站语义色板	packages/promo-pages/src/components/homepage/layout/colors.ts
GT Planar 字体声明	packages/promo-pages/src/fonts.css