精选 · 开放 · 免费

Buttondown

一个为独立创作者设计的、务实且人性化的电子邮件通讯平台。

01

设计气质 DNA

为数字创作者打造的、沉稳可靠的邮局。

02

色彩

采用高对比度的黑白配色以获得最佳可读性，使用活力主蓝色作为操作按钮色，并以暖调柔和色作为点缀。

03

字体

transitional-serif · humanist-sans

• display96px · 900
• heading48px · 700
• body18px · 400
• caption14px · 400

标题排版使用粗重、字距紧凑的衬线字体。 · 正文使用清晰的无衬线字体以确保高可读性。 · 行长保持较短，以实现舒适阅读。

04

间距

采用标准4像素基线网格，各区块间保留充裕的垂直内边距。

05

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

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

0 4px 6px -1px rgba(0, 0, 0, 0.1) · 0 2px 4px -2px rgba(0, 0, 0, 0.1)

06

布局

标准居中布局，从主视觉区到功能介绍再到用户评价，层次清晰。

07

动效与交互

交互元素上细微的颜色和背景过渡效果。

交互元素上细微的背景颜色变化。 · 视觉状态变化以指示操作。

08

组件

• button 高对比度的蓝色胶囊形按钮，配白色文字，或简单的文字链接。
• card 用户评价模块，采用柔和黄色背景和醒目的署名。
• hero 白色背景上醒目的大号衬线标题，两侧配以鲜明的扁平风格插图。

09

文案语气与禁用清单

• 语气 自信、略带随性、令人安心。
• 标题风格 直接、使用反问句式以及大胆、清晰的陈述。
• 按钮文案 以行动为导向，直接明了。

• 不要使用深色模式——截图显示为纯白色背景。
• 不要使用霓虹色——截图使用主色调蓝色（#0069ff）和柔和色点缀。
• 不要对标题使用无衬线字体——截图对标题使用了粗重的过渡衬线字体。
• 不要到处使用尖锐的直角——截图显示的是胶囊形按钮和圆角卡片元素。
• 不要使界面显得拥挤——截图在元素间保留了大量留白。
• 不要使用密集的多栏布局进行阅读——截图对段落宽度进行了限制。
• 避免: 企业术语
• 避免: 模糊承诺
• 避免: 过于复杂的技术语言

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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