Dyson · デザイン DNA

クリーンなタイポグラフィとドラマチックなプロダクト写真を通じて、エンジニアリングのイノベーションを紹介するプレミアムハードウェアEコマースサイト。

デザイン DNA

臨床的な精密さを持つハイエンドハードウェアショールーム

カラー

#0066ccAccent

#333333Ink

#999999Ink soft

#ffffffBG

#f5f5f5BG soft

#fcfcfcBG quiet

#919191Muted

rgba(51, 51, 51, 1.0)Line

黒いヘッダーと白いコンテンツエリアによる高コントラスト基盤に、インタラクティブ要素に単一の青色アクセントを使用

タイポグラフィ

大きなディスプレイテキストにはライトウェイト (300) を使用 · 本文テキストにはレギュラーウェイト (400) を使用 · 特定の強調を除き、太字ウェイトは決して使用しない

余白

4px

8px

12px

16px

20px

24px

32px

48px

8pxを基準としたリズムに、セクション間にはゆったりとした垂直パディングを確保

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

入力欄には1px solid rgb(51, 51, 51)を、カードには繊細なボーダーを使用

レイアウト

コンテンツを左寄せにした全幅ヒーローセクションに続き、グリッドベースのプロダクトカードを配置

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

インタラクティブ要素に対する繊細な色の遷移 · 色の状態変化による即時の視覚的フィードバック

コンポーネント

文体と禁止事項

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

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

System Prompt

Dysonのウェブサイトは、臨床的で高コントラストなデザインシステムを通じて、プレミアムハードウェアエンジニアリングを体現しています。カラーパレットは、鮮烈な黒のヘッダー (#000000) と純白のコンテンツエリア (#ffffff) を中心とし、インタラクティブ要素に単一の青色アクセント (#0066cc) を配置。本文テキストはダークグレー (#333333) を使用し、補足情報にはより明るいグレー (#999999, #919191) を使用。タイポグラフィはhumanist-sans (DysonFutura) を採用し、大きなディスプレイテキストにはライトウェイト (300) を、本文コンテンツにはレギュラーウェイト (400) を使用。レイアウトは、ドラマチックなプロダクト写真を背景に左寄せコンテンツを配置した全幅ヒーローアプローチを採用し、その後にグリッドベースのプロダクトカードが続く。重要なデザイン制約：ディスプレイテキストに決して太字を使用せず、8px超のラジウスを持つ丸みを帯びたコンテナを避け、セクション間には豊かな余白を維持し、装飾的追加なしの機能的なインタラクティブ要素のみを使用し、最小限のカラーアクセントを含む鮮烈な黒/白/グレーのパレットを維持し、すべてのタイポグラフィが重厚さやカジュアルさではなく、軽量で洗練されたものであることを確保する。

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

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

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