01
设计气质 DNA
知识隐私灵活Markdown网络化
一本私密、网络化的数字笔记本，随您的思想共同成长。
02
色彩
#8a5cf5Accent#eeeeeeInk#b3b3b3Ink soft#1f1f1fBG#262626BG soft#0f0f0fBG quiet#666666Mutedrgba(64, 64, 64, 0.6)Line高对比度暗色模式，优先保障深度专注与信息层级，并配以单一高饱和度强调色。
03
字体
- display
56px · 600 - h2
36px · 600 - body
16px · 400 - caption
14px · 400
标题保持加粗，字距紧密。 · 标题与正文之间保持清晰的垂直韵律。 · 所有界面文本使用句首大写。
04
间距
4px8px12px16px24px32px48px64px96px基于8px的基础单位，为区块容器提供充足的 padding。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
采用深灰色 (#404040) 的微妙1px实线边框，在不产生刺眼对比的前提下定义表面边界。
0 1px 3px rgba(0,0,0,0.1) · 0 20px 25px -5px rgba(0,0,0,0.1) · 0 25px 50px -12px rgba(0,0,0,0.25) · inset 0 0 0 1px rgba(255,255,255,0.1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽深色背景，搭配居中、限宽的内容栏。
07
动效与交互
150msmicro
150mssmall
250msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停时平滑的色彩与透明度过渡。 · 内容在滚动时微妙的淡入效果。
文本颜色或背景透明度的微妙变化，通常伴随色彩过渡。 · 即时响应，提供微妙的视觉反馈。
08
组件
- button 主按钮使用纯色强调色 (#8a5cf5)，并配有充足的 padding 与圆角。
- card 微妙的深色表面，带有柔和的内嵌边框，用于突出应用截图或内容块。
- chip 小型、圆润的药丸状元素，用作标签或状态指示器。
- input 深色背景字段，带有微妙的1px边框，占位符文本为柔和的灰色。
- hero 一个巨大的、左对齐的文本块，搭配大型交互式产品截图。
09
文案语气与禁用清单
- 语气 自信、极简、富有知性。
- 标题风格 简短、有力、直接的祈使句式。
- 按钮文案 行动导向且清晰，常明确指定平台。
- 不要使用白色或浅色背景——截图显示的是深色主题 (#1f1f1f)。
- 不要为标题使用衬线字体——截图显示的是用于展示字体的干净无衬线字体。
- 不要使用多个相互竞争的强调色——截图显示的是单一主导紫色 (#8a5cf5)。
- 不要使用锐利的0px border-radius——截图显示的是UI元素的圆角（4px 至 12px）。
- 不要使用密集、杂乱的布局——截图显示的是充足的空白与清晰的层级。
- 不要为正文使用全大写——截图显示的是始终如一的句首大写或标题大写。
- 避免: 营销套话
- 避免: 过于复杂的专业术语
- 避免: 喧闹或激进的标点
- 避免: 模糊的承诺
10
包内真实截图
11
System Prompt
Obsidian 是一款面向开发者和高级用户的知识管理应用。其网站采用深色主题 (#1f1f1f)，并配以单一鲜明的紫色 (#8a5cf5) 来突出主要操作。字体是干净的无衬线人文主义字体，标题加粗且字距紧密。布局宽敞、居中且高度结构化。关键约束：避免任何白色背景，绝不在标题使用衬线字体，并保持高对比度以确保可读性。专注于一种极简、功能性的美学，反映该应用注重隐私且灵活的特性。