Noir：深色作品集设计系统

网页 · 深色 · 衬线 · 极简 · 作品集

Noir

黑色、骨白色和超大衬线字，作品本身就是唯一的颜色。

Noir 拿掉颜色，让作品自己说话：黑色页面、骨白色文字、超大的 Instrument Serif 用来写名字和项目标题，图片框全部直角。深色模式最出彩，骨白色的浅色模式适合做成像印刷品的案例页。

预览

直接用下面的设计变量和这套系统自己的字体实时渲染。

2026 新功能规划、上线和复盘，都在一个地方

为小团队准备的安静工作台。该有的数字都在，多余的一个没有。

免费开始预约演示

活跃用户12,480

收入$48.2k

留存率86%

邀请团队成员工作邮箱you@company.com角色编辑 ▾发送邀请

最近订单客户状态金额Ada Park已付款$1,240Lukas Weber待付款$380Mei Chen已退款$96

在你的项目里使用

粘贴到 Codex 或 Claude Code 里。agent 会把规范保存为 DESIGN.md，之后一直按它来设计。

这个项目使用 Noir 设计系统，规范在 https://codexdesign.io/zh/design-systems/noir.md 。把它保存为项目根目录的 DESIGN.md，之后所有界面都遵循它。

设计变量

颜色

浅色主题

background#F4F2EEoklch(0.962 0.006 84.566)
foreground#0E0E0Eoklch(0.164 0 0)
card#FFFFFFoklch(1 0 0)
card-foreground#0E0E0Eoklch(0.164 0 0)
popover#FFFFFFoklch(1 0 0)
popover-foreground#0E0E0Eoklch(0.164 0 0)
primary#0E0E0Eoklch(0.164 0 0)
primary-foreground#F4F2EEoklch(0.962 0.006 84.566)
secondary#E7E4DEoklch(0.92 0.009 84.574)
secondary-foreground#0E0E0Eoklch(0.164 0 0)
muted#EAE7E1oklch(0.929 0.009 84.574)
muted-foreground#5F5C57oklch(0.476 0.009 80.7)
accent#E2DFD8oklch(0.904 0.01 87.475)
accent-foreground#0E0E0Eoklch(0.164 0 0)
destructive#A3261Doklch(0.472 0.163 28.986)
border#D3CFC7oklch(0.855 0.012 84.582)
input#C2BDB4oklch(0.8 0.014 82.4)
ring#0E0E0Eoklch(0.164 0 0)
chart-1#0E0E0Eoklch(0.164 0 0)
chart-2#6E6A63oklch(0.526 0.012 81.78)
chart-3#A39D93oklch(0.698 0.016 80.689)
chart-4#3F3C38oklch(0.358 0.008 75.303)
chart-5#A3261Doklch(0.472 0.163 28.986)

深色主题

background#0E0E0Eoklch(0.164 0 0)
foreground#F2EFE9oklch(0.953 0.009 84.573)
card#161616oklch(0.2 0 0)
card-foreground#F2EFE9oklch(0.953 0.009 84.573)
popover#161616oklch(0.2 0 0)
popover-foreground#F2EFE9oklch(0.953 0.009 84.573)
primary#F2EFE9oklch(0.953 0.009 84.573)
primary-foreground#0E0E0Eoklch(0.164 0 0)
secondary#1F1F1Foklch(0.239 0 0)
secondary-foreground#F2EFE9oklch(0.953 0.009 84.573)
muted#1A1A1Aoklch(0.218 0 0)
muted-foreground#9C978Foklch(0.678 0.013 79.764)
accent#242424oklch(0.26 0 0)
accent-foreground#F2EFE9oklch(0.953 0.009 84.573)
destructive#F07167oklch(0.697 0.159 26.504)
border#2A2A2Aoklch(0.285 0 0)
input#353535oklch(0.329 0 0)
ring#F2EFE9oklch(0.953 0.009 84.573)
chart-1#F2EFE9oklch(0.953 0.009 84.573)
chart-2#9C978Foklch(0.678 0.013 79.764)
chart-3#6A665Foklch(0.512 0.012 81.778)
chart-4#C9C4BBoklch(0.822 0.014 82.4)
chart-5#F07167oklch(0.697 0.159 26.504)

字体

标题: Instrument Serif · 400
正文: Manrope · 400
等宽: JetBrains Mono

字号阶梯

display · 120/0.9 · -0.03em设计让界面更好用
h1 · 72/0.95 · -0.02em设计让界面更好用
h2 · 40/1.05 · -0.01em设计让界面更好用
h3 · 22/1.3设计让界面更好用
body · 16/1.6设计让界面更好用
small · 12/1.5 · 0.08em设计让界面更好用

圆角、间距和阴影

圆角sm 0pxmd 0pxlg 0pxxl 4px

间距xs 8pxsm 16pxmd 32pxlg 48pxxl 96px

阴影不用阴影，层次靠边框和颜色。

布局

最大宽度: 1440px
正文宽度: 56ch
栏数: 12
栏间距: 16px

适合

摄影师和导演
设计师和艺术总监
创意工作室
个人网站和案例展示

要做和不要做

每页用一个超大衬线标题开场。
给项目编号，写清年份、客户和角色。
不要加强调色，颜色交给图片。
图片框不要加圆角和阴影。