01
设计气质 DNA
阅读知识记忆间隔重复高亮
一位私人图书馆助手,提醒你回顾读过的精华内容。
02
色彩
#478CD0Accent#1F1F1FInk#FFFFFFBG#F5F5F5BG soft#808080Mutedrgba(0,0,0,0.1)Line高对比度的单色基底,搭配单一的功能性蓝色用于操作和链接。
03
字体
- display
50px · 800 - h2
28px · 700 - body
16px · 400
标题使用过渡衬线字体,唤起文学与教育感。 · 正文使用人文主义无衬线字体,确保高可读性与现代美感。 · 宽松的行高,使长篇内容阅读更舒适。
04
间距
4px8px12px16px24px32px48px64px96px基于一致的 4px 基础网格,内容区块使用充足的内边距(24px-35px)。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 10px
pill · 999px
主要用于导航下划线和输入状态的细微 1px 边框。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中的单栏布局,图文区域交替出现。
07
动效与交互
200msmicro
400mssmall
800msmedium
cubic-bezier(1, 0.3, 0.54, 1.39)easing
hover 时简单的背景色和颜色过渡。 · 交互元素平滑的透明度与变换过渡效果。
背景色或颜色变化,配合 0.2 秒过渡。 · 通过状态变化提供即时反馈。
08
组件
- button 实心蓝色填充配白色文字、圆角,或采用深色边框的描边样式。
- card 主要用于产品截图中,展示嵌套的界面元素。
- chip 带有不同背景色的小型圆角标签,用于分类。
- input 标准表单字段,带有细微边框和清晰的聚焦状态。
- hero 大型居中标题、辅助副文本以及一个主要的行动召唤按钮。
09
文案语气与禁用清单
- 语气 教育性、鼓励性,并专注于个人成长。
- 标题风格 清晰、以益处为导向的陈述,使用大号衬线字体。
- 按钮文案 直接且以行动为导向,例如“免费开始使用”。
- 不要为使用界面设置深色背景——截图显示的是以白色为主的背景。
- 不要使用等宽字体作为正文——截图使用的是人文主义无衬线字体以保证可读性。
- 不要使用霓虹或过于鲜艳的强调色——截图显示的是一种功能性、柔和的蓝色(#478CD0)。
- 不要为主按钮使用复杂的渐变——截图显示的是纯色填充。
- 不要在卡片上使用高对比度的投影——截图显示的是简洁的、基于边框或扁平化的 UI。
- 不要为标题使用压缩或装饰性字体——截图使用的是清晰的过渡衬线字体。
- 避免: 堆砌术语的语言
- 避免: 过于企业化的语调
- 避免: 激进的销售策略
10
包内真实截图
11
System Prompt
Readwise 是一款面向读者的生产力工具,专注于通过间隔重复来增强记忆和知识留存。其设计 DNA 是干净、简约的美学,优先考虑可读性。核心配色方案是单色:白色背景(#FFFFFF)搭配近黑色墨水(#1F1F1F),辅以功能性蓝色(#478CD0)点缀。字体采用精致的组合:标题使用过渡衬线字体(唤起文学感),正文使用人文主义无衬线字体(确保易读性)。关键设计约束:不要使用深色模式或深色背景,不要使用霓虹或高饱和度的强调色,不要使用复杂的渐变或繁杂的背景图案。布局宽敞居中,将用户的注意力集中在内容和他们阅读高亮的价值上。









