01
设计气质 DNA
生产力笔记无纸化日志现代
一个专注于数字化转型的时尚现代应用工作室。
02
色彩
#f31765Accent#ffffffInk#a9afc3Ink soft#121318BG#191c26BG soft#212529BG quietrgba(33, 37, 41, 1.0)Line深色模式，搭配用于主要操作和高亮显示的鲜艳粉色强调色。
03
字体
- display
64px · 700 - heading
48px · 700 - subhead
22px · 400 - body
16px · 400
所有主要和次要文本均使用几何无衬线字体。 · 标题采用粗体（700字重），字间距紧凑。
04
间距
4px8px16px24px32px48px64px96px基于标准 4px 网格的间距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(255,255,255,0.1)
0px 4px 16px rgba(0,0,0,0.1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽主视觉区，后接三栏产品网格。
07
动效与交互
150msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素在 hover 时的平滑过渡。 · 内容版块的淡入动画。
文本链接的颜色变化和下划线显现。 · 细微的缩放或颜色变化反馈。
08
组件
- button 采用鲜艳背景色的药丸形按钮。
- card 边框极简、带有细微 hover 过渡效果的简洁卡片。
- chip hover 时底部出现下划线边框的文本链接。
- input 圆角的标准表单输入框。
- hero 全视口高度版块，文字居中且字号较大。
09
文案语气与禁用清单
- 语气 现代、专业、鼓舞人心。
- 标题风格 直接、以行动为导向、大胆。
- 按钮文案 清晰且吸引人的号召性用语，例如「探索更多」。
- 不要使用浅色背景——截图显示的是深色主题。
- 不要使用衬线字体——截图显示的是几何无衬线字体。
- 不要使用圆角矩形按钮——截图显示的是药丸形按钮。
- 不要使用明亮的霓虹色作为主背景——截图使用的是深灰色。
- 不要使用复杂的图案或纹理——截图使用的是带有细微渐变的纯净纯色背景。
- 不要使用厚重的阴影——截图使用的是极少或不可见的阴影。
- 避免: 行话
- 避免: 过多的感叹号
- 避免: 被动语态
10
包内真实截图
11
System Prompt
这是一个为创作生产力应用的软件工作室设计的深色主题网站。设计使用了深灰和黑色的调色板（#121318, #191c26），并搭配了鲜艳的粉色强调色（#f31765）。排版采用干净的几何无衬线字体（Poppins），标题加粗且字号较大。关键的避免事项包括：使用浅色背景、衬线字体和复杂纹理。布局采用全屏主视觉区和简洁的三栏产品网格。使用药丸形按钮以体现现代感。