Atelier: 럭셔리 패션 디자인 시스템

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

Atelier

아이보리, 잉크, 세련된 세리프. 패션 하우스의 룩북 같은 분위기.

Atelier는 패션 하우스의 룩북에서 영감을 얻었습니다. 따뜻한 아이보리 페이지, 검은 잉크, 대비가 강한 Cormorant 헤드라인, 크게 펼쳐지는 사진. 색은 거의 쓰지 않고, 브론즈는 포커스 상태와 섬세한 디테일에만 아껴 두어 제품이 페이지를 이끌게 합니다.

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/ko/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

패션·럭셔리 브랜드
주얼리, 뷰티, 향수
부티크 호텔과 레스토랑
룩북과 캠페인 페이지

Do's and don'ts

사진이 페이지 대부분을 차지하게 하세요.
라벨과 내비게이션은 작은 대문자에 넓은 자간으로 쓰세요.
화려한 색을 더하지 마세요. 브론즈가 가장 튀는 색입니다.
상품 주변을 배지, 별점, 세일 배너로 채우지 마세요.