01
设计气质 DNA
知识库可视化AI研究学习
一个为学术研究打造的简洁、极简的数字工作空间。
02
色彩
#207dffAccent#2e2e2eInk#ffffffBG#fcfcfcBG soft#f0f0f0BG quiet#6a6d72Mutedrgba(0,0,0,0.08)Line采用高对比度中性色板，最大化内容可读性。
03
字体
- display
64px · 500 - h2
40px · 500 - body
16px · 400 - caption
14px · 400
标题与展示字体采用人文无衬线体，字距收紧 · 正文字体采用人文无衬线体，行高宽松以提升可读性
04
间距
4px8px12px16px20px24px32px48px64px基于 4px 基准单位，留白充足以确保清晰度
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid rgba(0,0,0,0.08)
rgba(0, 0, 0, 0.04) 0px 0px 0px 1px · rgba(0, 0, 0, 0.04) 0px 4px 8px 0px · rgba(0, 0, 0, 0.05) 0px 16px 26px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
内容居中成栏，水平方向留白充足
07
动效与交互
150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover 时颜色与背景平滑过渡 · 交互元素的透明度微妙变化
交互元素颜色轻微变化 · 按钮按下时即时视觉反馈
08
组件
- button 主按钮为深色填充，次按钮为白色描边，胶囊形，深色文字
- card 白色背景，细微边框与阴影，圆角
- chip 小型圆角标签，浅色背景搭配深色文字
- input 白色背景配细微边框，圆角
- hero 大号居中文本块，突出行动号召按钮
09
文案语气与禁用清单
- 语气 专业、鼓舞人心、聚焦学术
- 标题风格 直接、以利益驱动的表述
- 按钮文案 行动导向，价值主张清晰
- 避免使用高饱和霓虹色——截图显示在中性调中使用柔和蓝（#207dff）作为点缀
- 避免使用装饰性衬线字体——截图显示使用简洁的人文无衬线体
- 避免布局过于拥挤——截图显示留白充足，内容居中
- 避免使用深色模式作为默认——截图显示主要背景为白色（#ffffff）
- 避免为 hero 区域使用复杂的多栏布局——截图显示为单栏居中
- 避免使用小于 4px 的圆角——截图显示圆角统一为 4-12px
- 避免: 过于随意或俏皮的语言
- 避免: 缺乏上下文的专业术语
- 避免: 推销式或过于激进的口吻
10
包内真实截图
11
System Prompt
Heptabase 是一款简洁、极简的 SaaS 产品，用于可视化知识管理与 AI 辅助研究。设计采用中性色板，白色（#ffffff）背景、深灰（#2e2e2e）文字与蓝色（#207dff）点缀。字体为人文无衬线体，标题字距收紧，正文行高宽松。关键设计原则：保持充足留白，使用统一的 4px 间距系统，保持微妙圆角（4-12px），避免装饰性元素，优先考虑可读性。界面应显得专业、可靠，并聚焦于学术生产力。