精选 · 开放 · 免费
Granola
为奔波于连续会议中的人们打造的AI记事本。
aiproductivity
01
设计气质 DNA
会议笔记AI记事本效率轻松
一位沉静而智能的助手,默默整理你的一天。
02
色彩
#B2C248Accent
#0E0F0CInk
#536471Ink soft
#FBFBF6BG
#EAEDE5BG soft
#F7F7F2BG quiet
#D5D5D2Muted
rgba(227, 227, 227, 1)Line
质朴、有机的中性色系,搭配独特的哑光橄榄绿作为点缀。
03
字体
transitional-serif · geometric-sans
- display
56px · 400 - h2
36px · 400 - body
16px · 400
展示字体使用过渡衬线体,营造平静、编辑感的氛围。 · 正文字体使用清晰的几何无衬线体,确保易读性。 · 标题采用紧凑的字距,呈现现代、自信的视觉效果。 · 字体粗细克制,主要使用400。
04
间距
4px
8px
12px
16px
20px
24px
32px
48px
64px
96px
充裕的留白,基于4px构建清晰的垂直节奏。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
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
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中的单列内容流,配有充裕的内边距。
07
动效与交互
150msmicro
300mssmall
0msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素上的平滑颜色过渡。 · hover 状态下背景色与文字色的过渡。 · focus 状态下的 box-shadow 过渡。
按钮与链接上的细微颜色变化。 · 平滑过渡到按压状态。
08
组件
- button 高对比度的胶囊形主按钮。
- card 带有微弱阴影和浅色边框的柔和圆角卡片。
- chip 用于特性或标签的胶囊形标签。
- input 简洁、极简的输入框。
- hero 居中放大的衬线体主标题,配有清晰的行动号召按钮。
09
文案语气与禁用清单
- 语气 乐于助人、直接且略带俏皮。
- 标题风格 直接且以利益为导向,使用大号衬线字体。
- 按钮文案 行动导向、清晰且高对比。
- 不要使用高饱和度的霓虹色 — 截图显示的是哑光的橄榄绿和温暖的灰色。
- 不要使用粗重、夸张的展示字体 — 截图显示的是优雅、轻至常规字重的衬线体标题。
- 不要创建拥挤、密集的布局 — 截图显示的是充裕的留白和简洁、居中的排版流。
- 不要使用尖锐、方正的边角 — 截图显示的是柔和、圆润的边角(8px、12px、胶囊形)。
- 不要使用深色模式或厚重的深色背景 — 截图显示的是浅色、温暖的米白色(#FBFBF6)主题。
- 不要使用复杂、嘈杂的渐变 — 截图显示的是干净、实色的色块和微弱的阴影。
- 避免: 使用过于技术化的行话。
- 避免: 显得强迫或咄咄逼人。
- 避免: 使用复杂、多行的标题。
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个用于会议笔记的AI效率工具着陆页,设计简洁专业。其设计DNA建立在一个沉静、质朴的调色板上,以温暖的米白色(#FBFBF6)和独特的哑光橄榄绿(#B2C248)为核心。字体搭配使用优雅的过渡衬线体作为展示标题,搭配清晰的几何无衬线体作为正文。布局居中且留白充裕,优先考虑可读性。关键颜色为:#FBFBF6(背景色)、#0E0F0C(文字色)、#B2C248(点缀色)和 #EAEDE5(浅背景色)。关键禁忌:1)不要使用高饱和度的霓虹色;调色板有意设定为哑光色调。2)不要使用粗重的展示字体;标题是精致且轻盈的。3)不要创建拥挤、密集的布局;设计依赖于充裕的间距和单列排版流来聚焦内容。
en · zh-CN · zh-TW · ja · ko