Atelier: Luxury Fashion Design System

Web · Light · Luxury · Serif · Minimal · E-commerce

Atelier

Ivory, ink and a refined serif, like a fashion house lookbook.

Atelier borrows from fashion house lookbooks: warm ivory pages, black ink, a high-contrast Cormorant headline and photography that runs large. Color is almost absent; bronze is kept for focus states and fine details, so the product carries the page.

Preview

Rendered live from the tokens below, in the system's own fonts.

New in 2026Plan, ship and measure in one place

A calm workspace for small teams. Every number you need, nothing you don't.

Start freeBook a demo

Active users12,480

Revenue$48.2k

Retention86%

Invite your teamWork emailyou@company.comRoleEditor ▾Send invite

Recent ordersCustomerStatusAmountAda ParkPaid$1,240Lukas WeberPending$380Mei ChenRefunded$96

Use it in your project

Paste this into Codex or Claude Code. The agent saves the spec as DESIGN.md and follows it from then on.

This project uses the Atelier design system. Its spec is at https://codexdesign.io/design-systems/atelier.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.

Tokens

Colors

Light theme

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)

Dark theme

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)

Fonts

Headings: Cormorant Garamond · 500
Body: Jost · 400
Monospace: JetBrains Mono

Type scale

display · 96/0.95 · -0.02emThe quick brown fox
h1 · 60/1 · -0.015emThe quick brown fox
h2 · 36/1.1The quick brown fox
h3 · 22/1.3 · 0.02emThe quick brown fox
body · 16/1.65 · 0.01emThe quick brown fox
small · 12/1.5 · 0.12emThe quick brown fox

Radius, spacing and shadow

Corner radiussm 0pxmd 0pxlg 0pxxl 4px

Spacingxs 8pxsm 16pxmd 32pxlg 48pxxl 96px

ShadowNone: depth comes from borders and color.

Layout

Max width: 1440px
Text width: 60ch
Columns: 12
Gutter: 24px

Best for

Fashion and luxury brands
Jewelry, beauty and fragrance
Boutique hotels and restaurants
Lookbooks and campaign pages

Do's and don'ts

Do let photography take up most of the page.
Do set labels and navigation in small uppercase with wide tracking.
Don't add bright colors; bronze is as loud as it gets.
Don't crowd products with badges, ratings or sale banners.