本站就是暗色系。做这套设计的过程中，我们踩过下面这些坑，也见过同行踩。
陷阱一：背景用纯黑
#000000 是最大的误区。纯黑背景会让屏幕上的内容像浮在虚空里，缺少层次，长时间看还很刺眼。
我们的做法是用一个有色彩倾向的深色，本站是 #06070a——带一点点蓝的深灰。再准备四五级更浅的底色用于卡片和悬浮层。
陷阱二：正文用纯白
纯白 #ffffff 在暗背景上对比度过高（超过 17:1），会产生光晕效应，看久了眼睛累。
正文用略偏暖的浅灰，大约 #e8e4dc 到 #ece8e1 之间就够了。标题再亮一点，用近白即可。
陷阱三：用阴影做层次
浅色设计里，卡片靠阴影浮起来。但暗色背景上阴影几乎看不见——黑压黑，没有对比。
暗色系的层次要靠提亮底色和描边。给卡片一个比背景亮两级的底色，再加一条 1px 的浅色描边，比任何阴影都有效。
陷阱四：图片直接放上去
大部分照片是为浅色背景拍的，直接放到暗色页面上会显得突兀，像贴上去的补丁。
两个处理方法：一是加一层暗色遮罩压亮度，二是统一做降饱和处理，鼠标悬停时再恢复。本站的案例图就用了这个方法。
陷阱五到十
- 对比度不达标的次要文字。用工具验一下，正文对比度至少 4.5:1，别凭肉眼判断。
- 大面积高饱和色块。暗色背景上，饱和色块会非常刺眼。要么降低饱和度，要么缩小面积只作点缀。
- 忽略了浅色模式用户。如果操作系统开了浅色主题，你的暗色站点会显得格格不入。至少确认两种主题下都可用。
- 表单输入框和背景糊在一起。输入框一定要有可见的描边或底色差异，否则用户找不到在哪打字。
- 打印和导出变白纸。有打印需求的页面要单独处理，否则暗色背景打印出来是一团黑。
- 移动端忘记降低亮度。手机屏幕默认更亮，暗色页面在阳光下看不清。关键信息要保证足够对比度。
暗色系适合谁
暗色系天然带有“专业、克制、技术感”的暗示，适合软件、设计机构、硬件、影音类品牌。
但如果你卖的是母婴用品、食品、童装，暗色系可能会削弱亲和力。这时更合适的是浅色为主、暗色只做局部点缀。
这篇就先写到这。有具体场景想讨论，直接打电话比留言快。