Boutique: 패션 쇼핑 앱 디자인 시스템
App · Light · Luxury · Serif · E-commerceBoutique
가장자리까지 꽉 찬 사진, Bodoni 세리프, 흰 바탕에 검정. 쇼윈도 같은 앱.
Boutique는 휴대폰 속 쇼윈도처럼 작동합니다. 상품 사진은 가장자리까지 꽉 차고, Bodoni Moda가 이름과 스토리에 패션 매거진의 목소리를 입히며, 인터페이스는 검정, 흰색, 따뜻한 중간 톤 뒤로 물러납니다. 가격은 굵게 하지 않고 본문 굵기로 조용히 둡니다.
Preview
Rendered live from the tokens below, in the system's own fonts.
9:41
Good morningTodayWeekly goal4 of 5 daysUp nextMorning routine15 minTeam check-in30 minEvening review10 min
HomeStatsPlanMe9:41
This weekTotal7,842+12% vs last weekStart session
HomeStatsPlanMe9:41
SettingsNotificationsDaily remindersUnitsMetric
HomeStatsPlanMeUse 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 Boutique design system. Its spec is at https://codexdesign.io/ko/design-systems/boutique.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.
Tokens
Colors
Light theme
- background#FFFFFFoklch(1 0 0)
- foreground#111111oklch(0.178 0 0)
- card#F7F4F0oklch(0.968 0.006 75.407)
- card-foreground#111111oklch(0.178 0 0)
- popover#F7F4F0oklch(0.968 0.006 75.407)
- popover-foreground#111111oklch(0.178 0 0)
- primary#111111oklch(0.178 0 0)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#EFEAE4oklch(0.939 0.01 72.659)
- secondary-foreground#111111oklch(0.178 0 0)
- muted#F3F0ECoklch(0.956 0.006 75.406)
- muted-foreground#615C57oklch(0.478 0.01 67.58)
- accent#EEE9E3oklch(0.936 0.01 72.659)
- accent-foreground#111111oklch(0.178 0 0)
- destructive#A3261Doklch(0.472 0.163 28.986)
- border#E2DDD6oklch(0.9 0.011 76.593)
- input#D1CBC2oklch(0.844 0.014 78.252)
- ring#111111oklch(0.178 0 0)
- chart-1#111111oklch(0.178 0 0)
- chart-2#B79E84oklch(0.715 0.047 68.066)
- chart-3#7A6555oklch(0.523 0.036 59.165)
- chart-4#5E6B5Coklch(0.512 0.028 141.437)
- chart-5#A3261Doklch(0.472 0.163 28.986)
Dark theme
- background#0F0F0Foklch(0.168 0 0)
- foreground#F2EEE9oklch(0.951 0.008 73.743)
- card#181716oklch(0.205 0.003 67.686)
- card-foreground#F2EEE9oklch(0.951 0.008 73.743)
- popover#181716oklch(0.205 0.003 67.686)
- popover-foreground#F2EEE9oklch(0.951 0.008 73.743)
- primary#F2EEE9oklch(0.951 0.008 73.743)
- primary-foreground#0F0F0Foklch(0.168 0 0)
- secondary#22201Eoklch(0.245 0.005 67.6)
- secondary-foreground#F2EEE9oklch(0.951 0.008 73.743)
- muted#1C1B19oklch(0.222 0.004 84.588)
- muted-foreground#A09A93oklch(0.689 0.012 71.844)
- accent#262422oklch(0.262 0.005 67.618)
- accent-foreground#F2EEE9oklch(0.951 0.008 73.743)
- destructive#F07167oklch(0.697 0.159 26.504)
- border#2E2C29oklch(0.294 0.006 78.234)
- input#383532oklch(0.331 0.007 67.593)
- ring#F2EEE9oklch(0.951 0.008 73.743)
- chart-1#F2EEE9oklch(0.951 0.008 73.743)
- chart-2#C4A68Aoklch(0.745 0.052 64.916)
- chart-3#9C8574oklch(0.633 0.038 58.478)
- chart-4#9DAA9Aoklch(0.723 0.027 139.828)
- chart-5#F07167oklch(0.697 0.159 26.504)
Fonts
- Headings
- Bodoni Moda · 500
- Body
- Jost · 400
- Monospace
- JetBrains Mono
Type scale
- display · 48/1 · -0.01emThe quick brown fox
- h1 · 32/1.05The quick brown fox
- h2 · 24/1.15The quick brown fox
- h3 · 17/1.3 · 0.04emThe quick brown fox
- body · 15/1.55 · 0.01emThe quick brown fox
- small · 12/1.4 · 0.1emThe quick brown fox
Radius, spacing and shadow
Corner radiussm 0pxmd 2pxlg 4pxxl 8px
Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px
ShadowNone: depth comes from borders and color.
Layout
- Touch targets
- 48px
- Tab bar
- 60px, 5 items, icons only; bag badge
- Screen padding
- 16px
- Navigation
- bottom tab bar; edge-to-edge product photos
- Numerals
- proportional; prices in body weight
Best for
- 패션·의류 스토어
- 럭셔리·디자이너 리세일
- 뷰티·주얼리 쇼핑
- 브랜드 드롭과 룩북
Do's and don'ts
- 상품 사진에 화면 전체 폭을 주세요.
- 브랜드명과 라벨은 작은 대문자에 넓은 자간으로 쓰세요.
- 세일 가격이 아니라면 가격을 굵게 하거나 색을 입히지 마세요.
- 그리드를 세일 배지와 스티커로 뒤덮지 마세요.