OpenDesign·你的设计资产库

网页参考

Bear

一款界面精致、文本优先的专注型 markdown 笔记应用。

ProductNotes
Bear 网站截图

01

设计气质 DNA

极简markdown专注Apple 原生

为 Apple 生态打造的简洁现代笔记本

02

色彩

#DD4C4FAccent
#444444Ink
#FFFFFFBG
#888888Muted
rgba(68,68,68,1)Line

以洁净白色画布为底，搭配高对比度文字，并以单一暖红色作为品牌点缀。

03

字体

humanist-sans · monospace

  • display56px · 700
  • heading40px · 700
  • body16px · 400
  • caption14px · 400

标题采用字距紧凑的简洁人文主义无衬线字体 · 正文使用同族字体，并设置充裕行高以提升可读性 · 等宽字体严格限定用于代码片段与技术参考

04

间距

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

主要区块间采用充裕的 64px 垂直节奏

05

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

sm · 4px
md · 8px
lg · 16px
pill · 999px

1px solid #444444

0px 13px 34px 0px rgba(0, 0, 0, 0.12) · 0px -5px 15px 1px rgba(0, 0, 0, 0.2)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中单栏布局，内容与应用截图区块交替呈现

07

动效与交互

200msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

内容区块平滑淡入 · 应用截图呈现细微浮动效果

导航与按钮采用细微的透明度或色彩变化 · 即时反馈，视觉状态变化极小

08

组件

  • button 简约胶囊形或圆角矩形，搭配细边框与透明背景
  • card 洁净白色卡片，带有细微投影，有时悬浮于彩色背景之上
  • chip 用于应用分类的简约圆角标签
  • input 带底部细边框的极简文本输入框
  • hero 居中文字配合设备选择器，下方悬浮大幅应用截图

09

文案语气与禁用清单

  • 语气 友好、自信且克制
  • 标题风格 简短有力，聚焦核心收益
  • 按钮文案 直接且行动导向，通常关联 App Store
  • 切勿将深色模式作为主要界面——截图显示为洁净白色背景
  • 切勿使用厚重投影——截图显示为非常细微、大半径的阴影
  • 切勿采用密集的多栏布局——截图显示为居中的单栏文本流
  • 切勿使用激进的渐变背景——截图显示为纯色或简洁有机形状
  • 切勿使用粗重边框——截图显示为极细、几乎不可见的边框
  • 切勿使用复杂动画——截图显示为静态、宁静的界面
  • 避免: 过度技术化的行话
  • 避免: 主标题区域的密集段落
  • 避免: 喧嚣、激进的行动号召
  • 避免: 杂乱的视觉层次

10

包内真实截图

Bear — 桌面首屏（hero）
桌面首屏（hero）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Bear — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Bear 是一款专为 Apple 生态设计的专注型 markdown 笔记应用。其设计 DNA 以极致克制为特征：洁净的白色画布，以及单一暖红色（#DD4C4F）点缀。字体采用精致的人文主义无衬线字体（bearsans/bearsansheadline），同时用于标题与正文，主标题采用粗体、字距紧凑处理。布局严格采用居中单栏，拥有充裕的垂直节奏（64px）和宽边距。关键禁忌：切勿将深色模式作为主要界面，避免厚重投影，永不使用激进渐变，切勿以密集多栏布局使界面杂乱，所有边框保持纤薄、克制。交互模式极简，依赖 hover 状态与细微过渡，而非复杂动效。文案风格友好且克制，聚焦于应用核心的简洁 markdown 写作体验。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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