---
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):** キャメル。エディトリアルのタグ、有効なフィルター、2 番目のチャート系列用。
- **tertiary (#7A6555):** ココアブラウン。コレクションのラベルと 3 番目の系列用。
- **neutral (#615C57):** 温かみのあるグレー。価格、サイズ、商品の詳細用。
- **surface (#FFFFFF):** 白。商品カードは温かみのあるボーンカラーの上に置き、パックショットがスタジオ照明を浴びたように見えます。
- **on-surface (#111111)**

## Typography

タイトルとエディトリアルの見出しは Bodoni Moda のウェイト 500（ディスプレイ 48px、タイトル 32px）。本文は Jost の 15px で、わずかに字間を広げます。12px の小さなラベルは、字間 0.1em の大文字。価格はレギュラーの本文ウェイトのままにします。

## Layout

左右 16px のパディングと、高さ 60px の下部タブバーのスマートフォン画面。アイコンだけの 5 つのタブとバッグのバッジ。商品写真は端から端まで広げ、商品リストはガターを詰めた 2 列のグリッド。

## Shapes

ほぼ直角：ボタン、入力欄、シートは 4px の角丸で、写真は角がくっきりしています。温かみのあるグレーの 1px の枠線。影はなし。小さなアイコンのまわりでも、タップ領域は 48px を保ちます。

## Components

画像、ブランド、名前、価格を載せた 2 列の商品グリッド、サイズセレクターと固定表示の「バッグに追加」バーを備えた全画面の商品ページ、エディトリアルのストーリーカード、ミニマルなバッグとチェックアウトの流れ。

## Do's and Don'ts

- 商品写真には、画面の全幅を使う。
- ブランド名とラベルは、字間を広げた小さな大文字で組む。
- セール価格以外では、価格を太字にしたり色を付けたりしない。
- グリッドをセールのバッジやステッカーで覆わない。