---
version: alpha
name: "Boutique"
description: "가장자리까지 꽉 찬 사진, Bodoni 세리프, 흰 바탕에 검정. 쇼윈도 같은 앱. Boutique는 휴대폰 속 쇼윈도처럼 작동합니다. 상품 사진은 가장자리까지 꽉 차고, Bodoni Moda가 이름과 스토리에 패션 매거진의 목소리를 입히며, 인터페이스는 검정, 흰색, 따뜻한 중간 톤 뒤로 물러납니다. 가격은 굵게 하지 않고 본문 굵기로 조용히 둡니다."
colors:
  primary: "#111111"
  on-primary: "#FFFFFF"
  secondary: "#B79E84"
  tertiary: "#7A6555"
  neutral: "#615C57"
  surface: "#FFFFFF"
  on-surface: "#111111"
typography:
  display-lg:
    fontFamily: "Bodoni Moda"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: "Bodoni Moda"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.05
  headline-md:
    fontFamily: "Bodoni Moda"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.15
  headline-sm:
    fontFamily: "Bodoni Moda"
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.04em
  body-md:
    fontFamily: "Jost"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0.01em
  body-sm:
    fontFamily: "Jost"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.1em
rounded:
  sm: 0px
  md: 2px
  lg: 4px
  xl: 8px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Boutique는 휴대폰 속 쇼윈도처럼 작동합니다. 상품 사진은 가장자리까지 꽉 차고, Bodoni Moda가 이름과 스토리에 패션 매거진의 목소리를 입히며, 인터페이스는 검정, 흰색, 따뜻한 중간 톤 뒤로 물러납니다. 가격은 굵게 하지 않고 본문 굵기로 조용히 둡니다.

## Colors

- **primary (#111111):** 검정. 장바구니 담기, 결제, 활성 탭에 씁니다. 다크 모드에서는 따뜻한 오프화이트.
- **on-primary (#FFFFFF)**
- **secondary (#B79E84):** 카멜. 에디토리얼 태그, 활성 필터, 두 번째 차트 계열에 씁니다.
- **tertiary (#7A6555):** 코코아 브라운. 컬렉션 라벨과 세 번째 계열에 씁니다.
- **neutral (#615C57):** 따뜻한 그레이. 가격, 사이즈, 상품 상세에 씁니다.
- **surface (#FFFFFF):** 흰색. 상품 카드는 따뜻한 본 톤 위에 놓아 제품 사진이 스튜디오 조명처럼 보이게 합니다.
- **on-surface (#111111)**

## Typography

제목과 에디토리얼 헤드라인은 Bodoni Moda 굵기 500(디스플레이 48px, 제목 32px). 본문은 Jost 15px에 약간의 자간. 12px 작은 라벨은 자간 0.1em의 대문자이고, 가격은 일반 본문 굵기를 유지합니다.

## Layout

좌우 패딩 16px의 휴대폰 화면, 아이콘만 있는 탭 다섯 개와 가방 배지가 있는 높이 60px의 하단 탭 바. 상품 사진은 가장자리까지 꽉 채우고, 상품 목록은 좁은 거터의 2열 그리드입니다.

## Shapes

거의 직각: 버튼, 입력창, 시트는 4px 모서리, 사진은 날카로운 가장자리. 따뜻한 그레이 1px 테두리, 그림자 없음. 작은 아이콘 주변도 탭 영역은 48px을 유지합니다.

## Components

이미지, 브랜드, 이름, 가격이 있는 2열 상품 그리드, 사이즈 선택기와 고정된 장바구니 담기 바가 있는 전체 화면 상품 페이지, 에디토리얼 스토리 카드, 간결한 장바구니·결제 흐름.

## Do's and Don'ts

- 상품 사진에 화면 전체 폭을 주세요.
- 브랜드명과 라벨은 작은 대문자에 넓은 자간으로 쓰세요.
- 세일 가격이 아니라면 가격을 굵게 하거나 색을 입히지 마세요.
- 그리드를 세일 배지와 스티커로 뒤덮지 마세요.