---
version: alpha
name: "Boutique"
description: "Randlose Fotos, eine Bodoni-Serife und Schwarz auf Weiß, wie ein Schaufenster. Boutique funktioniert wie ein Schaufenster auf dem Smartphone: Produktfotos laufen randlos, Bodoni Moda gibt Namen und Geschichten die Stimme eines Modemagazins, und die Oberfläche tritt in Schwarz, Weiß und warmen Neutraltönen zurück. Preise bleiben leise, im Schnitt des Fließtexts statt fett."
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 funktioniert wie ein Schaufenster auf dem Smartphone: Produktfotos laufen randlos, Bodoni Moda gibt Namen und Geschichten die Stimme eines Modemagazins, und die Oberfläche tritt in Schwarz, Weiß und warmen Neutraltönen zurück. Preise bleiben leise, im Schnitt des Fließtexts statt fett.

## Colors

- **primary (#111111):** Schwarz für „In den Warenkorb“, Kasse und den aktiven Tab. Im Dunkelmodus warmes Off-White.
- **on-primary (#FFFFFF)**
- **secondary (#B79E84):** Camel für redaktionelle Tags, aktive Filter und die zweite Diagrammreihe.
- **tertiary (#7A6555):** Kakaobraun für Kollektions-Labels und eine dritte Reihe.
- **neutral (#615C57):** Warmes Grau für Preise, Größen und Produktdetails.
- **surface (#FFFFFF):** Weiß; Produktkarten liegen auf einem warmen Knochenton, damit Packshots wie im Studio ausgeleuchtet wirken.
- **on-surface (#111111)**

## Typography

Bodoni Moda im Schnitt 500 für Titel und redaktionelle Überschriften (48px Display, 32px Titel); Jost in 15px für Fließtext mit leichter Laufweite. Kleine 12px-Labels stehen in Versalien mit 0.1em Laufweite; Preise bleiben im normalen Fließtext-Schnitt.

## Layout

Smartphone-Screens mit 16px Seitenrand und einer 60px hohen Tab-Leiste mit fünf Tabs nur mit Icons und einem Warenkorb-Badge. Produktfotos laufen randlos; Produktlisten nutzen ein zweispaltiges Raster mit engem Spaltenabstand.

## Shapes

Fast eckig: 4px-Ecken an Buttons, Eingabefeldern und Sheets und scharfkantige Fotos. 1px-Rahmen in warmem Grau; keine Schatten; Tippflächen bleiben 48px groß, auch um winzige Icons.

## Components

Ein zweispaltiges Produktraster mit Bild, Marke, Name und Preis, eine Vollbild-Produktseite mit Größenauswahl und fixierter „In den Warenkorb“-Leiste, redaktionelle Story-Karten und ein minimaler Warenkorb- und Checkout-Ablauf.

## Do's and Don'ts

- Gib Produktfotos die volle Breite des Screens.
- Setze Markennamen und Labels in kleinen Versalien mit weiter Laufweite.
- Mach Preise nicht fett oder farbig, außer Sale-Preise.
- Überdecke das Raster nicht mit Sale-Badges und Stickern.