精选 · 开放 · 免费
Matter
一款屡获殊荣的现代稍后阅读应用，旨在帮助用户专注阅读与个人成长。
productivityreading
01
设计气质 DNA
稍后阅读简约现代屡获殊荣精心打造
一个高端的数字阅读伴侣
02
色彩
#6D7EECAccent
#FFFFFFInk
#969698Ink soft
#0D0D0DBG
#1E1F22BG soft
rgba(150, 150, 152, 1)Line
采用深邃、高对比度的画布，以提升可读性并缓解视觉疲劳。
03
字体
geometric-sans · monospace
- display
56px · 500 - h2
40px · 700 - h3
32px · 700 - body
16px · 400 - small
14px · 400 - micro
12px · 400
所有标题和UI元素均使用几何无衬线字体。 · 为大尺寸展示文本保持紧凑的负字间距。 · 确保文字与背景之间的高对比度，以保证可读性。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
采用一致的4px基础网格，并配合充足的留白以突出内容。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 30px
1px solid rgba(150, 150, 152, 0.1)
0px 4px 12px rgba(0, 0, 0, 0.3)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
采用居中内容与单列布局，适用于长文阅读和用户评价。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素上微妙的悬停过渡效果。 · 平滑的页面滚动与过渡。
交互元素上微妙的背景或不透明度变化。 · 通过轻微的缩放或颜色偏移提供即时反馈。
08
组件
- button 采用实色点缀色和高对比度文字的药丸形按钮。
- card 带有微妙边框的深色圆角容器，用于展示用户评价和应用截图。
- chip 小巧的圆角标签，使用低对比度的背景与文字。
- input 极简的文本输入框，采用简洁边框，无任何装饰元素。
- hero 居中的大号标题，附带简短描述和社交证明标志。
09
文案语气与禁用清单
- 语气 专业、自信，并聚焦于用户价值。
- 标题风格 直接、面向行动，并以利益为驱动。
- 按钮文案 简洁、清晰，并带有鼓励性。
- 不要使用浅色背景——截图显示的是深色主题。
- 不要对正文使用衬线字体——截图使用的是无衬线字体。
- 不要使用繁忙或混乱的布局——截图展示了简洁、居中的内容。
- 不要使用广泛的色域——截图依赖于有限的调色板。
- 不要使用小而局促的按钮——截图使用了充足的内边距和药丸形状。
- 不要使用低对比度的文字——截图保持了高对比度以确保可读性。
- 避免: 避免过于随意或充斥俚语的语言。
- 避免: 避免杂乱或繁忙的布局。
- 避免: 避免分散注意力的动画或效果。
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
一款屡获殊荣的现代稍后阅读应用，旨在帮助用户专注阅读与个人成长。设计采用深邃、高对比度的画布，主点缀色为 #6D7EEC，文字颜色为 #FFFFFF，背景色为 #0D0D0D。字体采用几何无衬线体，标题使用紧凑字间距，并通过充足的留白保证可读性。关键禁忌：避免使用浅色背景、避免对正文使用衬线字体、避免杂乱的布局、避免使用广泛的色域、避免使用小按钮，以及避免使用低对比度文字。整体感觉是冷静、精致且以内容为中心。
en · zh-CN · zh-TW · ja · ko