OpenDesign·你的设计资产库

网页参考

Tana

一款高端生产力工具,运用编辑字体风格和温暖、人性化摄影,让会议感觉像是积极的工作过程。

ProductNotes
Tana 网站截图

01

设计气质 DNA

生产力会议笔记AI协作工作流程

一款精致的高端生产力应用,融合了经典编辑字体与现代应用界面模式。

02

色彩

#0C0805Ink
#3A3A3AInk soft
#FBFBFBBG
#FFF2EFBG soft
#6A6A6AMuted
rgba(12,8,5,0.1)Line

温暖、高对比度的单色调色板,辅以柔和桃色点缀,优先考虑可读性和高端质感。

03

字体

didone-serif · humanist-sans · monospace

  • display72px · 400
  • headline48px · 400
  • body17px · 400
  • nav15px · 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

包内真实截图

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

11

System Prompt

Tana 是一款高端生产力工具,融合了经典编辑设计与现代应用界面。视觉系统对大型展示标题使用迪多尼衬线体(Source Serif 4),对所有正文和 UI 元素使用人文主义无衬线体(Inter)。主色调为高对比度单色(墨色 #0C0805 搭配米白色 #FBFBFB),在特定部分使用柔和的桃色/暖色调(#FFF2EF)作为点缀。关键约束:绝不使用鲜艳、高饱和度的强调色;始终使用柔和、大圆角(14px-20px 半径);并确保充裕的垂直留白(24px-96px)以维持高端、编辑感的氛围。语调自信专业,使用简短有力的标题,偶尔以斜体强调。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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