精選 · 開放 · 免費
Dyson
一個高端硬體電商網站，透過簡潔的排版與戲劇性的產品攝影，展現工程創新。
hardwareproduct
01
設計氣質 DNA
工程高端創新精準極簡主義
如臨床般精準的高端硬體展示廳
02
色彩
#0066ccAccent
#333333Ink
#999999Ink soft
#ffffffBG
#f5f5f5BG soft
#fcfcfcBG quiet
#919191Muted
rgba(51, 51, 51, 1.0)Line
高對比基底，黑色標頭搭配白色內容區，僅使用單一藍色作為互動元素的強調色
03
字型
humanist-sans
- display
56px · 300 - heading-lg
36px · 300 - heading-md
24px · 400 - body
16px · 400 - caption
14px · 400
大型展示文字使用輕字重（300） · 內文使用一般字重（400） · 除特定強調外，絕不使用粗體字重
04
間距
4px
8px
12px
16px
20px
24px
32px
48px
以 8px 為基礎節奏，區塊間保留寬敞的垂直內距
05
表面 (圓角 / 陰影 / 邊線)
sm · 2px
md · 4px
lg · 8px
pill · 999px
輸入框使用 1px solid rgb(51, 51, 51)，卡片使用細微邊框
0 0 0 1px rgba(51, 51, 51, 1) inset · 0 0 18px 0 rgba(0, 0, 0, 0.2)
06
版面
1440container
12columns
24pxgutter
768 / 1024breakpoints
全寬主視覺區塊採左對齊內容，下方接著網格狀的產品卡片
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.68, 0.03, 0.26, 1.02)easing
所有過渡動畫預設啟用 · 平滑的圖片揭示效果
互動元素上的微妙色彩過渡 · 透過色彩狀態變化提供即時視覺回饋
08
組件
- button 實心填充按鈕，極小圓角，大寫文字，淺色背景搭配深色按鈕
- card 簡潔卡片，搭配產品圖片，細微邊框，留有大量留白
- chip 極簡的行內標籤，搭配細微邊框
- input 簡潔的文字輸入框，底部邊框樣式，整合搜尋圖示
- hero 全出血的產品攝影，搭配淺色文字覆蓋在深色或戲劇性的影像上
09
文案語氣與禁用清單
- 語氣 技術權威感，帶有內斂的自信
- 標題風格 輕字重、大尺度的產品名稱與主張
- 按鈕文案 直接的「立即選購」搭配箭頭指示，採用大寫樣式
- 勿使用裝飾性元素 — 截圖顯示的是乾淨、功能性的佈局，無多餘裝飾
- 勿使用圓角容器 — 截圖顯示的邊框圓角極小（最大 2-8px）
- 勿到處使用粗體字型 — 截圖顯示展示文字以輕字重（300）為主
- 勿使用暖色系色盤 — 截圖顯示的是冷灰色、黑色，以及單一的藍色強調
- 勿讓介面顯得擁擠 — 截圖顯示有大量留白與聚焦的產品展示
- 勿使用隨意友善的語言 — 截圖顯示的是精確的技術性產品命名與主張
- 避免: 喧鬧的行銷語言
- 避免: 裝飾性元素
- 避免: 圓潤友善的形狀
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Dyson 的網站體現了高端硬體工程，透過一個如臨床般精準的高對比設計系統。色盤以純黑標頭（#000000）對比純白內容區（#ffffff）為核心，僅使用單一藍色（#0066cc）作為互動元素的強調色。內文使用深灰色（#333333），較淺的灰色（#999999、#919191）用於次要資訊。字型僅採用 humanist-sans（DysonFutura），大型展示文字使用輕字重（300），內文使用一般字重（400）。佈局採用全寬主視覺方式，內容左對齊並覆蓋在戲劇性的產品攝影上，下方過渡為網格狀的產品卡片。關鍵設計限制：展示文字絕不使用粗體字重，避免超過 8px 的圓角容器，區塊間保留寬敞的留白，僅使用功能性的互動元素而不添加裝飾，保持極簡的黑/白/灰基底與最小化的色彩強調，並確保所有字型保持輕盈精緻，而非厚重或隨意。
en · zh-CN · zh-TW · ja · ko