精选 · 开放 · 免费

Substack

一个简洁、内容优先的发布平台，以醒目的橙色为点缀，专注于可读性。

01

设计气质 DNA

一个专注于编辑内容的简洁平台，给人感觉像是一本现代数字杂志，或为独立作家和读者策划的信息流。

02

色彩

采用白色背景与高对比度文字以确保可读性；单一的鲜亮橙色点缀用于提升活力并聚焦行动号召。

03

字体

transitional-serif · humanist-sans · monospace

• display40px · 600
• h124px · 600
• h220px · 600
• body15px · 400
• caption13px · 400

重要标题和编辑展示使用衬线字体族。 · 正文、导航和UI元素使用系统无衬线字体栈。 · 通过标题与正文在字号和字重上的差异来维持清晰的层次结构。

04

间距

元素间采用基于8px的统一垂直节奏，更紧凑的间距则以4px为增量。

05

表面 (圆角 / 阴影 / 边线)

1px solid rgba(0,0,0,0.1)

0 1px 0 0 rgba(255,255,255,0.2) inset, 0 -1px 0 0 rgba(0,0,0,0.1) inset · 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 6px -1px rgba(0,0,0,0.1)

06

布局

桌面端：固定左侧导航栏、中央信息流栏、右侧登录/搜索栏；移动端：单栏堆叠式布局，配有底部导航。

07

动效与交互

交互元素的颜色、背景色和边框属性过渡采用平滑的250毫秒过渡。 · 悬停状态使用Transform过渡。 · 无复杂动画；动效保持含蓄且实用。

链接和按钮等交互元素在悬停时有细微的背景色或文字颜色变化。 · 通过标准的浏览器焦点状态提供即时反馈。

08

组件

• button 主要行动号召按钮（如‘创建’、‘开始你的Substack’）采用实心橙色；次要按钮使用白色背景，配以细微边框或浅灰色填充。
• card 信息流项目由细边框分隔，包含作者头像、元数据、文本内容、媒体以及操作栏（点赞、评论、分享）。
• chip 极少使用；‘订阅’文本作为次要操作链接存在。
• input 搜索框使用干净的白色背景，配以细微边框和圆角。
• hero 大型深青色横幅，包含衬线标题和两个明确的行动号召选项（实心橙色按钮 vs. 白色文字链接）。

09

文案语气与禁用清单

• 语气 自信、直接、以创作者为中心。
• 标题风格 简洁有力，常使用衬线字体以增强编辑感。
• 按钮文案 直接且以行动为导向，使用清晰的动词，如‘开始’、‘登录’、‘注册’。

• 不要使用深色主题——截图显示的是以白色为主、浅灰色为辅的背景。
• 不要使用多种点缀色——截图显示橙色是唯一的主导高饱和度颜色。
• 不要为信息流中的主要卡片使用圆角设计——截图显示项目由简单的水平线分隔。
• 不要为重要标题使用无衬线字体——截图显示展示性文字使用衬线字体（如Cahuenga/Spectral）。
• 不要在卡片上使用厚重的投影——截图显示信息流项目上的投影非常细微或无投影。
• 不要使用密集的多栏网格布局来呈现内容——截图显示主要信息流为单一、聚焦的栏。
• 不要在UI中使用装饰性元素或插图——截图显示的是仅包含图标和照片的干净、功能化布局。
• 避免: 过于随意的俚语
• 避免: 技术术语
• 避免: 炒作性词汇

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko