厳選・オープン・無料

Bang & Olufsen

微細で高品質なインタラクションと抑制されたハイコントラストなパレットを用いた、洗練されたダークモードハードウェア製品サイト。

01

デザイン DNA

プレミアムなスカンディナヴィアン・オーディオブランドのショールーム。

02

カラー

プレミアムなダークモードの美学のためのハイコントラストの中立色。アクティブステートには落ち着いた自然の緑色をアクセントとして使用。

03

タイポグラフィ

geometric-sans · monospace

• display56px · 500
• headline35px · 700
• body16px · 400
• caption12px · 400

04

余白

ゆとりのある、息の通るレイアウトのための、一貫した4pxベースグリッドと標準的な間隔。

05

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

1px solid rgba(85, 85, 85, 1.0)

0 4px 24px rgba(0, 0, 0, 0.35)

06

レイアウト

中央揃えのコンテナを持つフルワイダークセクション。

07

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

マイクロインタラクションのための滑らかな色と不透明度のトランジション。 · ボタンやリンクのホバーステートのための微細なイージング。

滑らかなcubic-bezierイージングによる、微細な色の変化や不透明度のシフト。 · マイクロインタラクショントランジションによる即座のビジュアルフィードバック。

08

コンポーネント

• button 大文字テキストと微細なborder-radiusを持つ、ミニマルなアウトラインまたはテキストボタン。
• card 微細なボーダーと洗練されたパディングを持つ、ダークでクリーンなカード。
• chip 明確な落ち着いた緑色のアクティブステートを持つ、ピル型トグル。
• input 微細なボトムボーダーを持つ、クリーンでボーダレスなインプット。
• hero ハイコントラストで洗練されたタイポグラフィを持つ、ダークな写真のヒーローセクション。

09

文体と禁止事項

• トーン プロフェッショナルで、権威があり、控えめ。
• 見出し 簡潔で、直接的で、しばしば文頭大文字。
• CTA 大文字、アウトラインまたはテキストボタン。

• 明るく彩度の高いアクセントカラーは使用しない — スクリーンショットでは落ち着いた自然の緑色を使用している。
• 重いドロップシャドウは使用しない — スクリーンショットでは微細で拡散したシャドウを使用している。
• 複雑なグラデーションは使用しない — スクリーンショットではソリッドなダーク背景とフラットカラーを使用している。
• 全ての角に丸みを持たせない — スクリーンショットでは鋭角または非常に微細に丸みを帯びた角を使用している。
• 長い段落にセンタリングされたテキストを使用しない — スクリーンショットでは左揃えのテキストを使用している。
• 本文テキストに全大文字を使用しない — スクリーンショットでは文頭大文字またはタイトルケースを使用している。
• 遊び心のあるまたは奇妙なUI要素を使用しない — スクリーンショットでは洗練されたミニマルなインターフェースを使用している。
• 避ける: 過度に装飾的なフォントや複雑なレイアウトは避けてください。
• 避ける: 明るく、高彩度のアクセントカラーは避けてください。
• 避ける: 雑然としたインターフェースや過度なUI要素は避けてください。

10

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

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

11

System Prompt

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