Atelier：奢侈品时尚风设计系统

网页 · 浅色 · 奢华 · 衬线 · 极简 · 电商

Atelier

象牙白、墨黑和精致的衬线字，像一本时装品牌画册。

Atelier 借鉴时装品牌画册：暖调象牙白页面、墨黑文字、高对比的 Cormorant 标题，照片放得很大。几乎不用颜色，古铜色只留给焦点状态和细节，让产品本身撑起页面。

预览

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

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

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

免费开始预约演示

活跃用户12,480

收入$48.2k

留存率86%

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

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

在你的项目里使用

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

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

设计变量

颜色

浅色主题

background#F7F5F2oklch(0.971 0.005 78.298)
foreground#161412oklch(0.193 0.005 67.517)
card#FFFFFFoklch(1 0 0)
card-foreground#161412oklch(0.193 0.005 67.517)
popover#FFFFFFoklch(1 0 0)
popover-foreground#161412oklch(0.193 0.005 67.517)
primary#161412oklch(0.193 0.005 67.517)
primary-foreground#F7F5F2oklch(0.971 0.005 78.298)
secondary#ECE7E1oklch(0.93 0.01 72.658)
secondary-foreground#161412oklch(0.193 0.005 67.517)
muted#EEEAE4oklch(0.938 0.009 78.28)
muted-foreground#6B635Boklch(0.505 0.016 67.45)
accent#E9E3DCoklch(0.919 0.011 71.893)
accent-foreground#161412oklch(0.193 0.005 67.517)
destructive#9E2A2Boklch(0.468 0.152 24.87)
border#DCD5CCoklch(0.876 0.014 74.412)
input#CFC6BBoklch(0.831 0.018 73.045)
ring#7A5F4Boklch(0.507 0.046 57.989)
chart-1#7A5F4Boklch(0.507 0.046 57.989)
chart-2#161412oklch(0.193 0.005 67.517)
chart-3#B79E84oklch(0.715 0.047 68.066)
chart-4#5E6B5Coklch(0.512 0.028 141.437)
chart-5#9E2A2Boklch(0.468 0.152 24.87)

深色主题

background#121110oklch(0.178 0.003 67.659)
foreground#EFEAE3oklch(0.939 0.011 76.597)
card#1A1817oklch(0.211 0.004 48.54)
card-foreground#EFEAE3oklch(0.939 0.011 76.597)
popover#1A1817oklch(0.211 0.004 48.54)
popover-foreground#EFEAE3oklch(0.939 0.011 76.597)
primary#EFEAE3oklch(0.939 0.011 76.597)
primary-foreground#121110oklch(0.178 0.003 67.659)
secondary#24211Foklch(0.25 0.006 56.109)
secondary-foreground#EFEAE3oklch(0.939 0.011 76.597)
muted#1F1D1Boklch(0.232 0.005 67.584)
muted-foreground#A39A90oklch(0.691 0.018 70.442)
accent#2A2725oklch(0.275 0.006 56.145)
accent-foreground#EFEAE3oklch(0.939 0.011 76.597)
destructive#E07A6Eoklch(0.691 0.129 27.874)
border#33302Doklch(0.311 0.007 67.574)
input#3D3935oklch(0.347 0.009 67.531)
ring#C4A68Aoklch(0.745 0.052 64.916)
chart-1#C4A68Aoklch(0.745 0.052 64.916)
chart-2#EFEAE3oklch(0.939 0.011 76.597)
chart-3#8C7A69oklch(0.591 0.034 65.479)
chart-4#9DAA9Aoklch(0.723 0.027 139.828)
chart-5#E07A6Eoklch(0.691 0.129 27.874)

字体

标题: Cormorant Garamond · 500
正文: Jost · 400
等宽: JetBrains Mono

字号阶梯

display · 96/0.95 · -0.02em设计让界面更好用
h1 · 60/1 · -0.015em设计让界面更好用
h2 · 36/1.1设计让界面更好用
h3 · 22/1.3 · 0.02em设计让界面更好用
body · 16/1.65 · 0.01em设计让界面更好用
small · 12/1.5 · 0.12em设计让界面更好用

圆角、间距和阴影

圆角sm 0pxmd 0pxlg 0pxxl 4px

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

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

布局

最大宽度: 1440px
正文宽度: 60ch
栏数: 12
栏间距: 24px

适合

时装和奢侈品牌
珠宝、美妆和香水
精品酒店和餐厅
画册和品牌大片页

要做和不要做

让照片占据页面的大部分。
标签和导航用小号全大写，加宽字距。
不要加鲜艳的颜色，古铜色已经是最响亮的了。
不要在商品上堆角标、评分和促销横幅。