精选 · 开放 · 免费

Readwise Reader

一个简洁、以排版驱动的平台，用于重温并从阅读高亮中学习。

01

设计气质 DNA

一位私人图书馆助手，提醒你回顾读过的精华内容。

02

色彩

高对比度的单色基底，搭配单一的功能性蓝色用于操作和链接。

03

字体

transitional-serif · humanist-sans · monospace

• display50px · 800
• h228px · 700
• body16px · 400

标题使用过渡衬线字体，唤起文学与教育感。 · 正文使用人文主义无衬线字体，确保高可读性与现代美感。 · 宽松的行高，使长篇内容阅读更舒适。

04

间距

基于一致的 4px 基础网格，内容区块使用充足的内边距（24px-35px）。

05

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

主要用于导航下划线和输入状态的细微 1px 边框。

06

布局

居中的单栏布局，图文区域交替出现。

07

动效与交互

hover 时简单的背景色和颜色过渡。 · 交互元素平滑的透明度与变换过渡效果。

背景色或颜色变化，配合 0.2 秒过渡。 · 通过状态变化提供即时反馈。

08

组件

• button 实心蓝色填充配白色文字、圆角，或采用深色边框的描边样式。
• card 主要用于产品截图中，展示嵌套的界面元素。
• chip 带有不同背景色的小型圆角标签，用于分类。
• input 标准表单字段，带有细微边框和清晰的聚焦状态。
• hero 大型居中标题、辅助副文本以及一个主要的行动召唤按钮。

09

文案语气与禁用清单

• 语气 教育性、鼓励性，并专注于个人成长。
• 标题风格 清晰、以益处为导向的陈述，使用大号衬线字体。
• 按钮文案 直接且以行动为导向，例如“免费开始使用”。

• 不要为使用界面设置深色背景——截图显示的是以白色为主的背景。
• 不要使用等宽字体作为正文——截图使用的是人文主义无衬线字体以保证可读性。
• 不要使用霓虹或过于鲜艳的强调色——截图显示的是一种功能性、柔和的蓝色（#478CD0）。
• 不要为主按钮使用复杂的渐变——截图显示的是纯色填充。
• 不要在卡片上使用高对比度的投影——截图显示的是简洁的、基于边框或扁平化的 UI。
• 不要为标题使用压缩或装饰性字体——截图使用的是清晰的过渡衬线字体。
• 避免: 堆砌术语的语言
• 避免: 过于企业化的语调
• 避免: 激进的销售策略

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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