厳選・オープン・無料

Sonos

ホーム全体のオーディオシステムに特化した、シネマティックでクリーンなプレミアムブランド。ライフスタイルイメージと大胆で読みやすいタイポグラフィに焦点。

hardwareaudio
Sonos のスクリーンショット
↓ デザインシステムをダウンロード (38 MB)OpenDesign で開く

オリジナル: https://www.sonos.com

📦 パックの中身を見る →

01

デザイン DNA

プレミアムオーディオライフスタイルホーム全体サウンドミニマリストプレミアムハードウェア

プレミアムライフスタイルマガジンとハイエンド家電カタログの融合。

02

カラー

#000000Ink
#2E2E2EInk soft
#FFFFFFBG
#F5F5F5BG soft
#BFBFBFMuted
rgba(0,0,0,0.1)Line

黒白を多用した高コントラストの中立色。カラーや温かみはリッチで暖色調の写真に依存。

03

タイポグラフィ

grotesque-sans

すべてのテキストにクリーンでモダンな grotesque-sans（例：宣言された'aktiv-grotesk'）を使用。 · ほとんどのテキストは regular weight（400）を維持し、特定の強調箇所のみ軽く加重（500）。 · 行間はタイトながら可読性を確保。見出しは約1.2、本文は約1.3。

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

一貫したスペーシングを提供するbase-4システム。大きなセクション（例：112px）には十分な縦方向のパディングを設定。

05

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

sm · 4px
md · 8px
lg · 20px
pill · 9999px

明確なコンテナには、薄い中立グレー（#BFBFBF）またはソリッドブラック（#000000）の1pxボーダー。

0 1px 3px rgba(0,0,0,0.1)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

センタリングされたコンテンツコンテナを備えた、広範なホワイトスペースと大きなイメージを活用するフルブリードレイアウト。

07

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

100msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 1, 1)easing

コンテンツ表示のためのフェードとスライド遷移。 · ホバーステートのためのスムーズで素早いopacity changes。

インタラクティブ要素における控えめなopacity changesや軽微な色の変化。 · スケールの軽微な変更やopacity reductionを通じた、即座のビジュアルフィードバック。

08

コンポーネント

09

文体と禁止事項

10

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

Sonos — 桌面首屏（hero）
桌面首屏（hero）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sonos — 移动首屏
移动首屏

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

11

System Prompt

Sonosは、ライフスタイル写真と大胆でクリーンなタイポグラフィを重視するウェブサイトを持つプレミアムオーディオブランドです。コアパレットは高コントラストのブラック（#000000）とホワイト（#FFFFFF）、ライトグレー（#F5F5F5）で、ブラックオンホワイトまたはその逆の単一アクセントを採用。支配的な高彩度アクセントは存在しません。タイポグラフィはクリーンでモダンな grotesque-sansで、主に regular weight（400）で使用。重要なデザインルール：1) ビューポートを埋める巨大でシネマティックなライフスタイルイメージを優先。2) すべての主要CTAに非常に丸みを帯びたピルシェイプボタンを使用。3) 十分なホワイトスペースとセクションごとの単一で焦点を絞った見出しによる極度のミニマリストを維持。4) プレミアムで理想的な雰囲気を損なうテクニカルな雑踏、複数のフォントウェイト、ビブラントなアクセントカラーを回避。

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

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

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

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