01
设计气质 DNA
个人极简暗色直接
一场安静、暗光下的个人介绍
02
色彩
#e0e0e0Ink#111111BG#888888Mutedrgba(255, 255, 255, 0.2)Line严格的单色调,依赖深黑色与柔和灰色,以实现专注、平静的阅读体验。
03
字体
- display
32px · 400 - body
16px · 400
04
间距
4px8px16px24px32px48px64px96px基于一致的 4px 基准,章节间留有充裕的垂直间距
05
表面 (圆角 / 阴影 / 边线)
sm · 999px
md · 999px
lg · 999px
pill · 999px
用于内联高亮的纤细、浅色胶囊状边框
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
顶部导航栏文字左对齐,内容右对齐;内容居中,带有较大的垂直内边距。
07
动效与交互
200msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
导航链接上微妙的透明度变化
08
组件
- chip 带边框的胶囊状内联文本高亮
- hero 大型排版声明,带内联胶囊状高亮
09
文案语气与禁用清单
- 语气 随性、直接、个人化
- 标题风格 简洁的第一人称介绍
- 按钮文案 无
- 避免使用明亮的色彩——截图显示为深色单色调色板
- 避免使用厚重的边框或卡片——截图显示为开放空间与细微边框
- 避免使用复杂的网格——截图显示为简洁、居中的布局
- 避免使用衬线字体——截图显示为无衬线排版
- 避免使用明亮的强调色——截图显示无高饱和度强调色
- 避免使用杂乱的布局——截图显示为充裕的留白与克制的元素
- 避免: 过于正式的语言
- 避免: 复杂的 UI 模式
- 避免: 明亮或冲突的色彩
11
System Prompt
这是一个采用暗色美学模式与单色调色板的个人作品集网站。主要背景为深黑色(#111111),搭配柔和的灰色文本(#e0e0e0)。排版采用简洁的人文主义无衬线字体,专注于可读性以及随性、直接的语调。关键的 UI 元素(如内联高亮)使用胶囊状边框。布局居中,章节间留有充裕的垂直间距。关键注意事项:避免明亮的色彩、避免复杂的网格、避免厚重的边框、避免使用衬线字体、避免杂乱的布局。定位为一场平静、个人的介绍。