Substack
编辑部办公桌上的橙色墨水
Substack 的外观就像一个熟悉的编辑室仪表盘——白色的画布，温暖的近乎黑色的文字，以及一个醒目的橙色点缀，标示着内容创作的各个阶段。视觉层级建立在密度而非装饰之上：细细的灰色线条分隔信息流元素，头像很小，元数据低调，读者的目光自然而然地聚焦在橙色的行动号召、橙色的 Logo、橙色的“订阅”链接和橙色的“创建”按钮上。界面保持平坦简洁——没有卡片阴影，也没有 Chrome 面板元素——让字体（一个紧凑的 Chrome 系统 UI 元素搭配自定义衬线标题字体）承担起大部分的编辑重任。其标志性风格是克制的 Chrome 元素和鲜艳的单色点缀：一款阅读应用，却拥有出版工具般的体验。
桌面布局采用三栏式设计：左侧固定边栏（约 200 像素，带有图标和标签的导航，置顶显示）、中间信息流（最大宽度约 600 像素，垂直滚动的文章列表）和右侧固定边栏（约 300 像素，包含搜索、推荐和注册功能）。中间信息流是编辑核心——没有卡片式布局，文章以细线分隔，各部分之间留有 32 像素的间距，并堆叠显示。主横幅位于信息流顶部，以单张全宽卡片的形式呈现。左侧边栏包含品牌标识（带有叠加线条的橙色标志）、六个导航项以及底部的全宽橙色“创建”按钮。右侧边栏包含搜索框、注册卡和“接下来阅读”列表。导航设计极简——没有顶部栏，也没有面包屑导航；侧边栏即为导航。内容密度高：帖子使用 12-13px 元数据和 15-19px 正文，营造出类似报纸的节奏感，而不是市场卡片网格的感觉。
照片均为用户生成内容（作者头像、文章缩略图、文章图片）——Substack 不提供任何装饰性图片。主页面采用由蓝绿色渐变至绿色的抽象插画元素（几何图形、钢笔和便签等风格化物体）作为背景。右侧边栏的文章缩略图较小（64 像素），半径为 8 像素，用于预览阅读列表。整体视觉语言以文本为主：界面是一个阅读画布，图片仅作为视觉锚点，而非营造氛围。
调色板
品牌
- Signal Orange
#ff6719— 橙色用作装饰细节的辅助点缀色，以及突出不常用的提示信息。它不应作为行动号召的主色调。
中性的
- Ink
#363737— 正文——主要文本、标题、帖子标题、时间戳和作者姓名；采用温暖的近乎黑色的颜色，而不是纯#000，以便于阅读。 - Paper
#ffffff— 页面画布、卡片表面、输入字段和导航背景是占据界面绝大部分的主要表面。 - Charcoal
#232525— 悬停状态可添加更多文本和链接，并支持更高选择级别；比墨迹模式更能处理代码块和选择块。 - Stone
#777777— 辅助 UI 元素、分隔线和低调标签支持使用中性色。但中性色不应用于作为行动号召按钮的主色。 - Ash
#b6b6b6— 细边框线、按钮轮廓线、图标轮廓线、禁用控件的边框。 - Mist
#c8c8c8— 分隔线，图标的不显眼背景，以骨架的形式填充空白单元格。
排版
从 12 像素到 32 像素 · 5 步
- system-ui — 替代品： -apple-system · 轮廓 400, 500, 600 · 用户界面和正文的主要字体用于导航标签、按钮、消息文本、元数据、输入框以及所有界面元素。元数据采用 12-13 像素的紧凑字号，正文采用 15-19 像素的紧凑字号，营造出密集的新闻推送效果。正文的字重为 400，导航元素和按钮标签的字重为 500，高亮显示的消息标题和章节标题的字重为 600。
- Cahuenga — 替代品： Charter · 轮廓 500 · 这是一款专为产品级标题（侧边栏标题、注册卡标题、正文）设计的标志性装饰衬线字体。其中等字重和略高的行高使其外观独特而不显臃肿；除了橙色之外，它是唯一能够代表 Substack 品牌标识的字体。
- Spectral — 替代品： Charter · 轮廓 400 · 这是一款适用于长篇帖子的衬线字体，常用于阅览室和新闻推送内容，旨在提升编辑材料的可读性。略微收紧的行距（1.20）确保段落阅读舒适，同时保持新闻编辑室常见的紧凑风格。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 稠密 |
| 基本步骤 | 8px |
| 按钮半径 | 9999px |
| 卡片半径 | 12px |
| 阴影 | 无边框，取而代之的是阴影 |
| 各部分之间 | 32px |
| 页面宽度 | 1200px |
AI 将按照Substack风格构建您的网站并填充内容。
- 通过链接（ Instagram 、 TikTok 、 Facebook ）发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计： React （ Next.js ），开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化，支持搜索结果和神经网络推荐。
相似风格
- ElevenLabs — 一组以温暖奶油色调为主、标题简洁的摄影作品。一本包豪斯风格的笔记本——蛋壳色纸张，黑色墨水，仅以一抹紫色和橙色点缀，用于产品展示。
- Awesomic — 编辑用的锌网布，上面点缀着橙色的标点符号，让人联想起五彩纸屑。
- Monad — 关于温暖羊皮纸的编辑技术期刊
- Dub — Link的哑光宣纸控制面板
- Seline Analytics — 温暖的纸张上摆放着一张安静的分析表格。
- Notion — 正午阳光下，一本温暖的纸质笔记本映入眼帘
- Anthropic — 一本印在温暖羊皮纸上的科学野外考察日志——平静的象牙色表面，衬线字体的编辑标题，以及一个仅在需要行动时才会出现的粘土色点缀。
- Calendly — 冷大理石纹上印有深蓝色墨水。
- Augen Pro — 苹果的白色展示柜以单色调空间为背景，仅以清冷、轻盈的电光蓝作为点缀。
- Antimetal — 一篇印在米色纸上的社论——科学期刊一个宁静的早晨，克制传达着自信，衬线字体则承担着重要的作用。
- Perk — 温暖的羊皮纸上的电光石灰
- Ditto — 阳光洒满工作室，人们正在制作野花样本。温暖的奶油色底色，鲜艳的黄色底色，深邃的藏蓝色墨水，以及作品背后绽放的自然色彩。