01
设计气质 DNA
稍后阅读开源隐私专注知识管理
一个供知识工作者使用的私密、免干扰阅读室。
02
色彩
#FFD234Accent#3D3D3DInk#FEFCF5BG#666666Mutedrgba(61, 61, 61, 1)Line温暖、高对比度的配色方案,优先考虑可读性和专注度,而非装饰性。
03
字体
- display
45px · 700 - heading
32px · 700 - body
18px · 400 - small
14px · 400
为长篇阅读保持充裕的行高。 · 使用高对比度(浅色背景上的深灰色)以实现最佳易读性。 · 限制字重:标题使用粗体,正文使用常规体。
04
间距
4px8px16px24px32px48px64px96px充裕的留白以支持专注并降低认知负荷。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 4px
lg · 4px
pill · 999px
细微的1px边框,用于构建结构和定义轮廓。
0px 0px 0px 1px rgba(61, 61, 61, 1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中的单栏内容,拥有充裕的边距。
07
动效与交互
50msmicro
220mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
悬停时细微的背景色过渡。
细微的背景色变化或轻微的透明度改变。 · 立即提供视觉反馈,无延迟。
08
组件
- button 实心背景填充(黄色),圆角,大写或粗体文字,不使用次要的描边按钮。
- card 极简卡片,配有细微的边框或背景变化。
- chip 用于分类的简单圆角标签。
- input 简洁、无装饰的文本输入框,带有底部边框。
- hero 居中的排版堆栈,配有一个主要的行动号召按钮。
09
文案语气与禁用清单
- 语气 直接、透明且目标明确。
- 标题风格 清晰、以益处为导向的陈述。
- 按钮文案 简单、以行动为导向的短语,例如“免费注册”。
- 不要使用投影——截图显示的是扁平的、带边框的元素。
- 不要使用渐变背景——截图显示的是纯色的、温暖的灰白色和白色背景。
- 不要使用装饰性手写字体——截图显示的是简洁的人文主义无衬线字体。
- 不要默认使用深色模式——截图显示的是浅色的、类似纸张的主题。
- 不要使用多个相互竞争的强调色——截图显示的是单一的主导黄色强调色。
- 不要使用密集、杂乱的布局——截图显示的是充裕的留白和单栏流程。
- 避免: 营销术语
- 避免: 过多的感叹号
- 避免: 模糊的语言
10
包内真实截图
11
System Prompt
一个极简、免干扰的设计系统,用于一款专注于隐私和开源价值的稍后阅读应用。它使用温暖的灰白色(#FEFCF5)背景,搭配深灰色(#3D3D3D)文字以实现高可读性,并辅以单一的醒目的黄色(#FFD234)用于行动号召。字体依赖于人文主义无衬线字体类别,并配以充裕的行高,以优先确保长篇阅读的舒适度。布局严格居中并采用单栏设计,利用充裕的留白来降低认知负荷。关键约束包括:不使用深色模式作为默认设置,不引入装饰性渐变,不使用多个相互竞争的强调色,不使用密集、杂乱的布局,不在组件上使用投影,以及不在主内容区域使用复杂的多栏网格。










