---
version: alpha
name: "Atelier"
description: "아이보리, 잉크, 세련된 세리프. 패션 하우스의 룩북 같은 분위기. Atelier는 패션 하우스의 룩북에서 영감을 얻었습니다. 따뜻한 아이보리 페이지, 검은 잉크, 대비가 강한 Cormorant 헤드라인, 크게 펼쳐지는 사진. 색은 거의 쓰지 않고, 브론즈는 포커스 상태와 섬세한 디테일에만 아껴 두어 제품이 페이지를 이끌게 합니다."
colors:
  primary: "#161412"
  on-primary: "#F7F5F2"
  secondary: "#161412"
  tertiary: "#B79E84"
  neutral: "#6B635B"
  surface: "#F7F5F2"
  on-surface: "#161412"
typography:
  display-lg:
    fontFamily: "Cormorant Garamond"
    fontSize: 96px
    fontWeight: 500
    lineHeight: 0.95
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: "Cormorant Garamond"
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.015em
  headline-md:
    fontFamily: "Cormorant Garamond"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.1
  headline-sm:
    fontFamily: "Cormorant Garamond"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.02em
  body-md:
    fontFamily: "Jost"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0.01em
  body-sm:
    fontFamily: "Jost"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.12em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  xl: 4px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 48px
  xl: 96px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

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

## Colors

- **primary (#161412):** 따뜻한 잉크 블랙. 버튼, 링크, 워드마크에 씁니다. 다크 모드에서는 아이보리로 뒤집힙니다.
- **on-primary (#F7F5F2)**
- **secondary (#161412):** 캠페인 이미지 뒤의 단색 밴드로 쓰는 잉크 블랙, 그리고 브론즈 옆의 두 번째 차트 계열.
- **tertiary (#B79E84):** 카멜. 부드러운 채움, 이미지 플레이스홀더, 세 번째 계열에 씁니다.
- **neutral (#6B635B):** 토프 그레이. 가격, 캡션, 작은 대문자 라벨에 씁니다.
- **surface (#F7F5F2):** 따뜻한 아이보리. 카드와 상품 타일은 순백입니다.
- **on-surface (#161412)**

## Typography

헤드라인은 Cormorant Garamond 굵기 500, 96px 디스플레이(줄 높이 0.95)에서 22px까지. 본문은 Jost 16px, 줄 높이 1.65. 작은 라벨은 12px, 자간 0.12em의 대문자입니다.

## Layout

최대 1440px의 12컬럼 그리드, 거터 24px, 간격 단위 8px. 이미지는 넓게 또는 전폭으로 펼치고, 텍스트 블록은 약 60자 폭으로 좁게 두어 주변에 여백을 충분히 줍니다.

## Shapes

이미지, 버튼, 입력창은 직각 모서리(반경 0px). 옅은 그레이지색 1px 헤어라인 테두리, 그림자 없음.

## Components

버튼은 검은 직사각형이나 가는 선의 박스에 대문자 라벨. 상품 타일은 이미지, 세리프 이름, 작은 가격이 전부입니다. 헤더는 가운데 워드마크와 드문드문 놓인 텍스트 링크입니다.

## Do's and Don'ts

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