精选 · 开放 · 免费

Granola

为奔波于连续会议中的人们打造的AI记事本。

01

设计气质 DNA

一位沉静而智能的助手，默默整理你的一天。

02

色彩

质朴、有机的中性色系，搭配独特的哑光橄榄绿作为点缀。

03

字体

transitional-serif · geometric-sans

• display56px · 400
• h236px · 400
• body16px · 400

展示字体使用过渡衬线体，营造平静、编辑感的氛围。 · 正文字体使用清晰的几何无衬线体，确保易读性。 · 标题采用紧凑的字距，呈现现代、自信的视觉效果。 · 字体粗细克制，主要使用400。

04

间距

充裕的留白，基于4px构建清晰的垂直节奏。

05

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

1px solid rgba(227, 227, 227, 1)

rgba(0, 0, 0, 0.03) 0px 0px 2px 0px inset · rgba(0, 0, 0, 0.03) 0px 0px 36px 0px · rgba(0, 0, 0, 0.15) 0px 8px 48px 0px

06

布局

居中的单列内容流，配有充裕的内边距。

07

动效与交互

交互元素上的平滑颜色过渡。 · hover 状态下背景色与文字色的过渡。 · focus 状态下的 box-shadow 过渡。

按钮与链接上的细微颜色变化。 · 平滑过渡到按压状态。

08

组件

• button 高对比度的胶囊形主按钮。
• card 带有微弱阴影和浅色边框的柔和圆角卡片。
• chip 用于特性或标签的胶囊形标签。
• input 简洁、极简的输入框。
• hero 居中放大的衬线体主标题，配有清晰的行动号召按钮。

09

文案语气与禁用清单

• 语气 乐于助人、直接且略带俏皮。
• 标题风格 直接且以利益为导向，使用大号衬线字体。
• 按钮文案 行动导向、清晰且高对比。

• 不要使用高饱和度的霓虹色 — 截图显示的是哑光的橄榄绿和温暖的灰色。
• 不要使用粗重、夸张的展示字体 — 截图显示的是优雅、轻至常规字重的衬线体标题。
• 不要创建拥挤、密集的布局 — 截图显示的是充裕的留白和简洁、居中的排版流。
• 不要使用尖锐、方正的边角 — 截图显示的是柔和、圆润的边角（8px、12px、胶囊形）。
• 不要使用深色模式或厚重的深色背景 — 截图显示的是浅色、温暖的米白色（#FBFBF6）主题。
• 不要使用复杂、嘈杂的渐变 — 截图显示的是干净、实色的色块和微弱的阴影。
• 避免: 使用过于技术化的行话。
• 避免: 显得强迫或咄咄逼人。
• 避免: 使用复杂、多行的标题。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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