01
设计气质 DNA
等宽字体深色极简技术开发者作品集
深色命令行界面或终端美学
02
色彩
#E8E4DBInk#141414BG#6B6B6BMutedrgba(232, 228, 219, 0.1)Line高对比度单色配色方案,近黑背景上搭配灰白色文本
03
字体
- display
64px · 700 - headline
48px · 500 - body
18px · 400 - caption
12px · 400
所有数字和技术显示均使用等宽字体 · 展示文本保持紧凑的字间距 · 正文使用浅字重以确保在深色背景下的可读性
04
间距
4px8px16px24px32px48px64px96px基于 4px 的一致网格系统,配以充足的留白以创造呼吸感
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 4px
lg · 8px
pill · 999px
1px solid rgba(232, 228, 219, 0.2)
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
非对称布局,内容锚定于边缘,大量负空间
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
中心元素细微的脉冲动效 · hover 状态的平滑过渡
交互元素有微妙的透明度或颜色变化 · 即时响应,视觉反馈最小化
08
组件
- button 等宽字体文本、带微妙边框的胶囊形按钮
- card 当前视图中未见
- chip 当前视图中未见
- input 当前视图中未见
- hero 全屏深色画布,包含标志、时间显示和描述文本
09
文案语气与禁用清单
- 语气 技术性、精确且内敛
- 标题风格 采用技术符号标记的等宽字体
- 按钮文案 等宽标签的极简胶囊按钮
- 避免使用鲜艳颜色——截图显示仅为单色配色方案
- 避免使用装饰性插图——截图显示仅为纯排版和极简元素
- 避免使用衬线字体——截图显示仅为等宽字体和无衬线字体
- 避免添加阴影或景深——截图显示为扁平、极简的表面
- 避免使用俏皮或圆润的字体——截图显示为几何感、技术感字体
- 避免添加背景图案或纹理——截图显示为纯色深色背景
- 避免: 彩色渐变
- 避免: 装饰性元素
- 避免: 营销用语
- 避免: 过度的动画
11
System Prompt
这是一个具有终端美学的深色极简开发者作品集网站。关键色彩为 #141414 背景与 #E8E4DB 灰白色文本。字体方面,展示部分使用等宽字体类别,正文使用无衬线字体。关键设计约束:保持严格的单色配色方案,技术显示仅使用等宽字体,保留充足的负空间,避免装饰元素,交互保持极简且平滑。该网站体现了为开发者受众而设计的克制与技术精准度。