厳選・オープン・無料

Byredo

厳格なミニマリズムと彫刻的なタイポグラフィを融合した、プレミアムなフレグランスハウス。

01

デザイン DNA

嗅覚の構成に捧げられたハイエンドアートギャラリー

02

カラー

カラフルな製品画像を焦点に保つため、厳格にモノクロのタイポグラフィを使用

03

タイポグラフィ

stencil-sans · geometric-sans

• display120px · 400
• h128px · 400
• body14px · 400
• caption10px · 400

04

余白

フッターカolumの縦方向にゆとりのある間隔；カードやインタラクティブエリアには一貫して28pxの内部パディング

05

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

1px solid rgba(229, 231, 235, 1)

rgba(0,0,0,0) 0 0 0 0 · rgb(128,128,128) 0 0 5px 0

06

レイアウト

フルブリード画像オーバーレイ；厳格に構造化されたマルチカラムフッターグリッド

07

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

不透明度やトランスフォームインタラクションのための、繊細な300msフェード · インタラクティブ要素のカラーとフィルトランジション

300ms cubic-bezierトランジションを伴う、カラーと不透明度のシフト · 即座のビジュアルレスポンス、その後に状態変化

08

コンポーネント

• button 繊細なホバートランジションを備えた、ミニマリストなアウトラインまたはテキストベースのアクション
• card 製品詳細のための、最小限のボーダー半径を持つクリーンなホワイトカード
• chip 角丸のボーダーを持つ、ピル型ステータスインジケーター
• input 十分な余白を持つ、ミニマリストな下線付きテキストフィールド
• hero 厳格なホワイトオーバーレイタイポグラフィを伴う、没入感のあるフルビューポートフォトグラフィー

09

文体と禁止事項

• トーン 権威があり、控えめで、ラグジュアリーに焦点を当てた
• 見出し 短く、力強く、しばしば大文字
• CTA 繊細で、テキストベースで、完全に控えめ

• 鮮やかなアクセントカラーを使用しない — スクリーンショットは厳格にモノクロのパレットを示しています
• 重いドロップシャドウを適用しない — スクリーンショットは主にフラットなサーフェスまたは繊細なグレーシャドウを示しています
• Highly decorative serif fonts — screenshot shows geometric sans and custom stencil fonts. Highly decorative serif fontsを使用しない — スクリーンショットは幾何学的なサンセリフとカスタムステンシルフォントを示しています
• 複数の競合する要素でインターフェースを雑踏させない — スクリーンショットは単一の支配的な焦点を示しています
• 角丸のカードコーナー（大きな半径）を使用しない — スクリーンショットはインタラクティブ要素に4px-6pxの小さな半径を示しています
• 重いフォントウェイトを使用しない — スクリーンショットはすべてのテキスト要素に一貫して400のウェイトを示しています
• 避ける: 過度な感嘆符
• 避ける: 騒がしいまたは宣伝的な言葉
• 避ける: 装飾的なボーダーまたはオーナメント

10

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

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko