---
name: "Diptyque"
description: "值得作为奢侈品零售设计系统的一个典范，其UI刻意退居幕后，让产品摄影的艺术性和编辑式叙事成为焦点。"
version: alpha
specification_status: not-validated
license_status: unknown

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#717171"
  neutral: "#A1A1A1"
  bg-quiet: "#F8F8F8"
  muted-soft: "#808080"
  line: "rgba(229, 231, 235, 1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 32px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.2px"
  body:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

一个以编辑优先的高端电商体验，服务于一家巴黎奢华香氛品牌，其特点是充足的留白、精美的摄影和克制的字体排印。

*一个经过策划的匠艺香氛画廊，每件产品都如同珍贵的艺术品，呈现在自然、富有纹理的背景之中。*

## Colors

高对比度的单色UI（黑底白字），完全服务于编辑摄影中丰富的自然色彩。

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#717171`)** — uses `ink-soft` token
- **Muted (`#A1A1A1`)** — uses `muted` token
- **Borders (`rgba(229, 231, 235, 1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** geometric-sans

- 使用过渡衬线字体打造富有感染力的标题，以奠定优雅基调。
- 所有功能性UI文本和导航使用几何无衬线字体，以确保清晰度。
- 正文保持14px，以维持编辑感和整洁感。

## Layout

全出血的主视觉图像过渡到带有充足边距的居中内容块。网格仅少量使用，主要用于产品轮播，主要依靠单栏编辑式布局来产生冲击力。

*Rhythm:* 充足的留白和内边距定义了布局，营造出奢华感和宁静感。垂直节奏主要通过大版块分隔和图片边距来建立。

## Elevation & Depth

- 无
- 交互元素上使用 inset 0px -2px 0px 0px rgba(0, 0, 0, 1)
- Borders: 采用 rgba(229, 231, 235, 1) 的极简、干净边框。按钮使用1px实线边框与直角，仅偶尔有胶囊形输入框例外。

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 9999px

## Components

- **button:** 直角矩形轮廓，1px黑色边框，大写或混合大小写的衬线文本，无填充。除胶囊形变体外，无圆角。
- **card:** 以图片为核心的卡片，UI极简；文本通常放置在图片边界之外，采用简洁、非结构化的布局。
- **chip:** 未显著使用。
- **input:** 极简字段，采用简洁的黑色边框，注重干净线条，无厚重背景填充。
- **hero:** 占主导地位的全出血摄影横幅，搭配覆盖或居中的行动号召按钮。

## Do's and Don'ts

**Don't:**
- 不要在按钮上使用圆角——截图显示的是直角矩形边框
- 不要在卡片或元素上使用投影——截图显示的是基于边框的扁平分隔
- 不要使用明亮、高色度的强调色——截图显示的是严格的单色UI，色彩仅来自摄影
- 不要使用密集的文本布局——截图显示的是充足的留白和简短、富有感染力的文案
- 不要为标题使用厚重、粗体的无衬线字体——截图显示的是用于展示文本的精致衬线字体
- 不要使用俏皮或圆润的字体——截图显示的是结构化、优雅、边缘锐利的字体

---

## System Prompt (paste into AI agent)

```
Diptyque Paris 是一个高端奢华香氛电商网站，其定义在于其克制的、编辑式的设计方法。设计依赖于严格的单色UI（纯黑 #000000 和白 #FFFFFF），让丰富、自然主义的产品摄影承载情感重量。字体排印在用于优雅展示标题的过渡衬线字体和用于功能性正文及导航文本的简洁几何无衬线字体（如Apercu）之间取得精心平衡，并保持14px的基础字号以确保可读性。布局开阔，利用全出血图像和充足的留白营造画廊般的感受。关键禁忌包括：永远不要在按钮或卡片上使用圆角，避免任何与摄影竞争的明亮强调色，绝不让密集的文本块或厚重的投影使界面显得杂乱。整体系统必须保持一种静谧奢华和精致克制的感觉。
```