设计指南
三条纲领——所有设计决策的判断依据。
克制
颜色是态度——鼠尾草绿只做点缀，不做底色。一屏内 accent 面积不超过 5%。暖纸米色和浅灰是主旋律，绿色只是音符。
直实
说做到的事。数据代替形容词——"6 个公网产品"替换"全栈能力者"，"39 工具"替换"很多工具"。
通透
文字最大号、卡片全宽、留白充分。不拥挤、不局促。读者在 30 秒内扫完一屏，知道你是谁、做过什么。
Logo
品牌标识系统——文字标、图形标、Favicon。
Primary · 亮底
HHH
Primary · 暗底
HHH
Symbol · 图形标
Favicon
| 属性 | 规格 |
|---|---|
| 文字标 | HHH — JetBrains Mono 600, #6B8F71, 0.06em |
| 全名标 | 黄辉辉 — Noto Serif SC 400, 80px, -0.025em |
| 图形标 | 鼠尾草绿底 120×120 圆角方块 + 白色 H |
| 安全空间 | ≥ 1× H 字母高度 |
| 最小尺寸 | 宽度 ≥ 28px |
颜色
8 个基础色 + 2 个变体 + 2 个分割线。全系通过 WCAG AA。
暖纸 Paper
#F5F0EB
主背景、卡片底色
墨 Ink
#3A3A35
主文字色 · AAA
鼠尾草绿 Sage
#6B8F71
唯一强调色 · AAA
深墨 Ink Dark
#2D3436
标题、Footer 底色
浅麻 Grey-1
#EDE8DC
交替区段背景
麻线 Grey-2
#DDD8CB
卡片边框、分割线
岩灰 Grey-3
#888888
次级文字 · AA
暖线 Rule
#E5DFCE
卡片边框、区段分割
字体
三字体系统——Inter（西文正文）+ Noto Serif SC（标题）+ JetBrains Mono（等宽），中文回退 PingFang SC。
Display · Noto Serif SC
从想法到上线
标题使用 Noto Serif SC，带来优雅、文学感的视觉气质。字重 400，字间距 -0.025em。正文回退到 Inter + PingFang SC 保证清晰可读。
Standard · JetBrains Mono
HHH
等宽字仅用于 Logo、KPI 标签、日期、URL、联系方式。不写正文——中文阅读速度下降 30%。
| 层级 | 字号 | 字重 | 用途 |
|---|---|---|---|
| Hero | clamp(48px, 6vw, 80px) | 400 | 页面主标题 |
| Section | 40px | 400 | 区段标题 |
| Card | 28px | 400 | 卡片标题 |
| Body-L | 17px | 380 | 卡片正文 |
| Body-S | 15px | 350 | 列表、辅助文字 |
| KPI | 11px | 500 | KPI 标签 |
图像
截图与效果图的规格约束。
screenshot_*.png
产品截图
PNG · max-height 520px · 从页面顶部截取 · 外部引用禁止 base64
*_鸟瞰.jpg
建筑效果图
JPG · max-height 580px · 保持原始宽高比 · 每项目 1-2 张
间距与布局
max-width 1200px · 两侧 pad 48px · 响应式 900/600 断点。
组件速查
| 组件 | 核心规格 | CSS 选择器 |
|---|---|---|
| Nav | sticky 56px · blur bg · logo mono/accent | #nav |
| Hero | h1 80px/400w · subtitle 22px/grey-3 · stats 56px/300w | .hero |
| Section Header | h2 40px/400w · p 18px/grey-3 | .section-header |
| Project Card | 12px radius · img max-h 520px · body 40px pad | .project-card |
| Architecture | 3-layer 64px+1fr · arrow ↓ · accent branches | .arch-flow |
| Timeline | grid 160px+1fr · mono dates · 22px roles | .timeline |
| Capability | 3-col grid · 12px radius · 17px h4 | .cap-grid |
| Principles | 2-col grid · 28px nums accent | .principle-row |
| Footer | ink-dark bg · white quote 20px/250w | .footer |