本文案例网站：
- 19450806.best — 广岛原子弹爆炸纪念馆，深色庄重风格
- 19450809.best — 反法西斯胜利与和平纪念馆，暗色档案风格
01｜字体先定气质
一套高级网页，通常不需要很多字体。两到三种足够，关键是让它们各司其职。
标题负责气场，正文负责阅读，数字负责秩序。
推荐搭配：
:root {
--font-title: 'Cinzel', 'Noto Serif SC', serif;
--font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
--font-mono: 'DM Mono', ui-monospace, monospace;
}中文标题可以用思源宋体，英文标题则适合 Cinzel、Playfair Display 这类衬线体。标题字重稍高，字距略宽，行高压紧一些，视觉上会更稳。
正文不必追求个性。干净的无衬线体更重要，负责把信息讲清楚。
数字、时间、坐标、编号、状态标签，则交给等宽字体。它天然带有一种档案、终端和仪器的秩序感。
h1, h2 {
font-family: var(--font-title);
letter-spacing: 0.12em;
line-height: 1.15;
text-transform: uppercase;
}
body {
font-family: var(--font-body);
}
.badge,
.time-tag,
.meta,
.coordinate {
font-family: var(--font-mono);
font-size: 0.8rem;
letter-spacing: 0.08em;
}真正需要避免的，不是「字体不够高级」，而是所有文字都长得一样。
02｜别用纯黑，要有一点温度
纯黑配纯白，虽然最直接，却也最容易显得生硬。
高级的暗色背景通常不是黑，而是偏冷、偏蓝，或者带一点墨青。
可以从这一组开始：
:root {
--bg-main: #040507;
--text-title: #f8fafc;
--text-body: #cbd5e1;
--text-muted: #64748b;
--text-faint: #475569;
}这样做的重点，不只是换一个背景色，而是建立文字的灰度层级。
标题最亮，正文其次，注释更暗。所有信息都在同一片黑里，但不会挤成一团。
body {
background: var(--bg-main);
color: var(--text-body);
}
h1, h2, h3 {
color: var(--text-title);
}
.meta,
.caption,
.note {
color: var(--text-muted);
}
::selection {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}暗黑设计真正的高级感，不在于「黑」，而在于黑里还有层次。
03｜卡片要轻，边界要隐约
卡片不是一块块黑色的盒子。
更舒服的做法，是让它像一层悬浮在背景上的薄玻璃：有一点透明，有一点模糊，边缘只留下极细的线。
.card {
position: relative;
background: rgba(12, 16, 24, 0.72);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 32px;
transition:
transform 0.3s ease,
border-color 0.3s ease;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 15%;
right: 15%;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.22),
transparent
);
}
.card:hover {
transform: translateY(-4px);
border-color: rgba(255, 255, 255, 0.16);
}注意三个细节：
- 底色要透。
- 边框要细。
- 阴影要少。
不要用厚重的描边，也不要给每张卡片加一圈明显的发光。真正精致的边界，往往是用户若有若无才能察觉的那一条线。
04｜全站只留一种亮色
暗黑界面最怕颜色太多。
红、黄、蓝、绿一起出现，信息还没看懂，视觉噪音先出来了。
更稳妥的做法，是把 95% 的颜色留给黑、白、灰，只用一种颜色负责「说重点」。
例如：
:root {
--accent: #f97316;
}它可以用于一个状态点、一枚按钮、一个时间戳，或者页面里最重要的视觉提示。
.status-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 10px var(--accent);
}
.btn-primary {
background: var(--accent);
color: #050505;
border: 0;
border-radius: 6px;
padding: 10px 24px;
font-weight: 600;
cursor: pointer;
}亮色的价值，不是「好看」，而是建立视觉优先级。
页面里只有一个地方亮，用户自然知道先看哪里。
除了琥珀橙，也可以使用：
- #38bdf8：冷静、科技
- #dc633e：档案、警戒
- #e1b25f：典雅、纪念
选定一种，就坚持到底。
05｜真正的高级感来自留白
很多页面的问题，不是内容太少，而是舍不得留空。
高级设计不会把每一寸空间都填满。它会故意让内容之间拉开距离，让重点自己浮出来。
大版块建议从这样的节奏开始：
section {
padding: 100px 24px;
}
.container {
max-width: 1120px;
margin: 0 auto;
}
p {
max-width: 680px;
margin-bottom: 24px;
font-size: 1rem;
line-height: 1.75;
}页面不用铺满。
正文不用横跨整个屏幕。
卡片之间不用挤在一起。
留白越充分，文字和视觉元素就越有重量。
空白不是没有内容，而是在替内容留位置。
一个完整的暗黑设计基线
把前面的原则合在一起，可以得到一套很稳定的基础变量：
:root {
/* Typography */
--font-title: 'Cinzel', 'Noto Serif SC', serif;
--font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
--font-mono: 'DM Mono', ui-monospace, monospace;
/* Background */
--bg-main: #040507;
--bg-card: rgba(12, 16, 24, 0.72);
/* Text */
--text-title: #f8fafc;
--text-body: #cbd5e1;
--text-muted: #64748b;
/* Border */
--border-subtle: rgba(255, 255, 255, 0.08);
/* Accent */
--accent: #f97316;
}
body {
margin: 0;
background: var(--bg-main);
color: var(--text-body);
font-family: var(--font-body);
}
.container {
width: min(1120px, calc(100% - 48px));
margin: 0 auto;
}
section {
padding: 100px 0;
}
h1,
h2 {
margin: 0 0 24px;
color: var(--text-title);
font-family: var(--font-title);
font-weight: 700;
letter-spacing: 0.12em;
line-height: 1.15;
text-transform: uppercase;
}这一套变量本身并不「高级」。
高级感来自它们之间的关系：
深黑做底，冷白做层次，细线划边界，单色做重点，大面积留白制造呼吸。
最后，用这 5 个问题检查页面
开始设计前，先问自己：
- [ ] 标题和正文有没有明确分工？
- [ ] 数字、时间、标签有没有统一成等宽字体？
- [ ] 背景是不是有色相的深黑，而不是纯黑？
- [ ] 卡片是不是轻、透、薄，而不是厚重的色块？
- [ ] 页面里是不是只有一种真正醒目的颜色？
- [ ] 大版块之间有没有足够留白？
- [ ] 正文是不是控制在舒适的阅读宽度里？
做到这些，页面通常已经有了七八成的气质。
剩下的，才是动画、图标、纹理和微交互。
先把秩序做好，再谈装饰。
因为真正的高级感，从来不是「加了什么」，而是知道什么不该加。
