OpenDesign·你的设计资产库

网页参考

Omnivore

一款免费、开源的稍后阅读应用,专为严肃的阅读者和终身学习者设计。

ProductivityReading
Omnivore 网站截图

01

设计气质 DNA

稍后阅读开源隐私专注知识管理

一个供知识工作者使用的私密、免干扰阅读室。

02

色彩

#FFD234Accent
#3D3D3DInk
#FEFCF5BG
#666666Muted
rgba(61, 61, 61, 1)Line

温暖、高对比度的配色方案,优先考虑可读性和专注度,而非装饰性。

03

字体

humanist-sans

  • display45px · 700
  • heading32px · 700
  • body18px · 400
  • small14px · 400

为长篇阅读保持充裕的行高。 · 使用高对比度(浅色背景上的深灰色)以实现最佳易读性。 · 限制字重:标题使用粗体,正文使用常规体。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

充裕的留白以支持专注并降低认知负荷。

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)用于行动号召。字体依赖于人文主义无衬线字体类别,并配以充裕的行高,以优先确保长篇阅读的舒适度。布局严格居中并采用单栏设计,利用充裕的留白来降低认知负荷。关键约束包括:不使用深色模式作为默认设置,不引入装饰性渐变,不使用多个相互竞争的强调色,不使用密集、杂乱的布局,不在组件上使用投影,以及不在主内容区域使用复杂的多栏网格。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。