精选 · 开放 · 免费
Tana
一款高端生产力工具，运用编辑字体风格和温暖、人性化摄影，让会议感觉像是积极的工作过程。
productnotes
01
设计气质 DNA
生产力会议笔记AI协作工作流程
一款精致的高端生产力应用，融合了经典编辑字体与现代应用界面模式。
02
色彩
#0C0805Ink
#3A3A3AInk soft
#FBFBFBBG
#FFF2EFBG soft
#6A6A6AMuted
rgba(12,8,5,0.1)Line
温暖、高对比度的单色调色板，辅以柔和桃色点缀，优先考虑可读性和高端质感。
03
字体
didone-serif · humanist-sans · monospace
- display
72px · 400 - headline
48px · 400 - body
17px · 400 - nav
15px · 400
大型展示文本和标题使用迪多尼衬线体（Source Serif 4）。 · 正文、UI 元素和导航使用人文主义无衬线体（Inter）。 · 展示文本保持紧凑的负字距。
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
使用 4px 为基础单位保持节奏一致，确保卡片和区块内有充裕的内边距（24px-48px）。
05
表面 (圆角 / 阴影 / 边线)
sm · 6px
md · 14px
lg · 20px
pill · 999px
使用 rgba(12,8,5,0.1) 的微妙 1px 边框进行分隔。
rgba(20, 22, 36, 0.1) 0px 6px 18px -12px · rgba(20, 22, 36, 0.28) 0px 40px 96px -28px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
英雄区块采用居中的单列布局，内容区域扩展为网格。
07
动效与交互
120msmicro
160mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
在悬停和点击时进行平滑的透明度和变换过渡。
微妙的透明度降低或背景色变化。 · 轻微缩小（变换）或透明度变化。
08
组件
- button 主要操作使用高对比度黑色圆角胶囊按钮，次要操作使用透明或浅灰色。
- card 柔和的圆角卡片，大边框半径（14px-20px），常包含媒体内容或复杂界面预览。
- chip 小型圆角胶囊状标签或状态指示器。
- input 简洁、干净的输入框，边框最小化。
- hero 全宽居中标题，垂直间距充裕，背景使用柔和渐变。
09
文案语气与禁用清单
- 语气 自信、专业，略带编辑风格。
- 标题风格 简短、有力的陈述，常将单个强调词以斜体呈现。
- 按钮文案 直接且面向利益，例如“免费开始试用”。
- 不要使用鲜艳、高饱和度的强调色——截图显示主要是单色调，搭配温暖、柔和的色调。
- 不要在标题中使用几何或技术感无衬线体——截图显示的是优雅的衬线字体。
- 不要默认使用深色模式——截图显示的是浅色、米白色的背景（#FBFBFB）。
- 不要使用尖锐的方形圆角——截图显示所有卡片和按钮都使用大边框半径（14px, 20px）。
- 不要在布局中使用密集的网格——截图显示留白充裕，聚焦于居中的英雄区块。
- 不要使用俏皮或卡通风格的插图——截图依赖高质量、电影感的摄影。
- 避免: 过度使用标点符号
- 避免: 正文使用全大写
- 避免: 过于技术化的术语
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
Tana 是一款高端生产力工具，融合了经典编辑设计与现代应用界面。视觉系统对大型展示标题使用迪多尼衬线体（Source Serif 4），对所有正文和 UI 元素使用人文主义无衬线体（Inter）。主色调为高对比度单色（墨色 #0C0805 搭配米白色 #FBFBFB），在特定部分使用柔和的桃色/暖色调（#FFF2EF）作为点缀。关键约束：绝不使用鲜艳、高饱和度的强调色；始终使用柔和、大圆角（14px-20px 半径）；并确保充裕的垂直留白（24px-96px）以维持高端、编辑感的氛围。语调自信专业，使用简短有力的标题，偶尔以斜体强调。
en · zh-CN · zh-TW · ja · ko