Diptyque · デザイン DNA

パリの高級香水ハウスのための、プレミアムでエディトリアル優先のEコマス体験。広い余白、精巧な写真、控えめなタイポグラフィで定義されます。

デザイン DNA

芸術的な香水のキュレーションされたギャラリー。すべての製品が、自然で質感のある背景の前で、貴重なアーティファクトとして提示されます。

カラー

#000000Ink

#717171Ink soft

#FFFFFFBG

#F8F8F8BG quiet

#A1A1A1Muted

rgba(229, 231, 235, 1)Line

エディトリアル写真内の豊かで自然なカラーパレットに完全に従属する、高コントラストのモノクロUI（白地に黒）。

タイポグラフィ

叙情的な見出しにはtransitional-serifを用い、優雅さを確立します。 · すべての機能的なUIテキストとナビゲーションにはgeometric-sansを用い、明瞭さを保ちます。 · 本文は14pxとし、エディトリアルで散らかさない雰囲気を維持します。

余白

4px

8px

16px

24px

32px

48px

64px

96px

広い余白とパディングがレイアウトを定義し、贅沢さと落ち着きを生み出します。縦のリズムは、主に大きなセクション区切りと画像のマージンによって構築されます。

サーフェス (角丸 / 影 / 罫線)

rgba(229, 231, 235, 1)を使用した、最小限のクリーンなボーダー。ボタンは角が锐利な1pxのsolidボーダーを使用し、ピル型の入力フィールドは例外とします。

none · インタラクティブ要素には inset 0px -2px 0px 0px rgba(0, 0, 0, 1)

レイアウト

フルブリードのヒーローイメージから、十分なマージンを備えた中央揃えのコンテンツブロックへと移行します。グリッドは控えめに使用し、主に製品カルーセルに用います。影響力を高めるため、単一カラムのエディトリアルレイアウトに依存します。

モーションとインタラクション

メニューのオーバーレイやバナーのための、滑らかなopacityトランジション。 · インタラクティブ要素のホバーステートの、控えめなイージング。 · カルーセル内のオブジェクト配置のための、標準的なlinearトランジション。

テキストにアンダーライン、またはボタンの控えめなボーダートランジション。 · 重いフィードバックアニメーションなしの、即時ステート変化。

コンポーネント

文体と禁止事項

パック内の実スクリーンショット

Diptyque — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

System Prompt

Diptyque Parisは、控えめでエディトリアルなアプローチを特徴とするプレミアム高級香水のEコマスサイトです。デザインは厳格なモノクロUI（純黒#000000と白#FFFFFF）に依存し、豊かで自然主義的な製品写真が感情的な重みを担います。タイポグラフィは、優雅なディスプレイ見出しのためのtransitional-serifと、機能的な本文およびナビゲーションテキストのためのクリーンなgeometric-sans（Apercuのようなもの）の慎重なバランスを保ち、可読性のために14pxのベースを維持します。レイアウトは広大で、フルブリードのイメージと広い余白を活用し、ギャラリーのような雰囲気を生み出します。重要な制約には：ボタンやカードに決して角丸を使用しない、写真と競う明るいアクセントカラーを一切使用しない、密集したテキストブロックや重いドロップシャドウでインターフェースを散らかさないことが挙げられます。全体的なシステムは、静かな贅沢さと洗練された抑制の感覚を維持する必要があります。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗