精選 · 開放 · 免費
Apple
一個高端硬體展示，以電影般的深色佈局、純淨的排版與絕對的克制來定義。
HardwarePremiumRestraintEditorial
01
設計氣質 DNA
高端極簡硬體編輯風格
一個展示硬體的高端產品廊廳，搭配電影般的攝影與克制的排版。
02
色彩
#0071e3Accent
#1d1d1fInk
#86868bInk soft
#000000BG
#f5f5f7BG soft
rgba(255,255,255,0.8)Line
純黑、柔和的中性灰與純白文字之間的極端對比，營造高端質感。
03
字型
humanist-sans
- display
48px · 700 - subtitle
28px · 400 - body
17px · 400 - caption
12px · 400
導覽文字極小且間距緊密。 · 標題使用緊湊字距與高字重。 · 內文維持寬裕的行高以利閱讀。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
主視覺區塊周圍留有寬裕的垂直內邊距，以強調留白與專注。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 8px
lg · 0px
pill · 980px
1px solid rgba(255,255,255,0.8) 用於深色外框，1px solid #1d1d1f 用於淺色元素
rgba(0, 0, 0, 0.22) 3px 5px 30px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全寬、邊對邊的主視覺區塊，內容置中。
07
動效與互動
180msmicro
240mssmall
400msmedium
cubic-bezier(0.4, 0, 0.6, 1)easing
懸停時平滑的透明度與變換過渡。 · UI 元素的細微淡入效果。
連結與按鈕的顏色過渡。 · 細微的縮放或透明度變化。
08
組件
- button 藥丸狀的主按鈕採用實心背景，輔以描邊次按鈕。
- card 全寬產品卡片，以大型影像與置中文字定義。
- hero 電影般的全螢幕產品攝影，搭配置中標題與雙 CTA 按鈕。
09
文案語氣與禁用清單
- 語氣 自信、簡潔且具權威感。
- 標題風格 簡短有力的產品名稱與單字標語。
- 按鈕文案 直接的行動動詞，如「深入了解更多」與「購買」。
- 不要使用厚重的陰影——截圖顯示的是極簡、微妙的層次陰影。
- 不要使用複雜的漸層——截圖顯示的是純色、平坦的背景。
- 不要使用小而雜亂的排版——截圖顯示的是巨大、乾淨的展示字體。
- 不要使用明亮、衝突的顏色——截圖顯示的是高度克制的色盤。
- 不要使用複雜的網格佈局——截圖顯示的是簡單、置中、線性的堆疊。
- 不要使用裝飾性的邊框或框架——截圖顯示的是內容在開闊空間中呼吸。
- 避免: 過度的技術術語。
- 避免: 過多的驚嘆號。
- 避免: 雜亂或繁忙的佈局。
- 避免: 多種相互競爭的顏色。
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
此設計代表了高端硬體行銷的終極提煉。它依賴於巨大、置中的排版 (humanist-sans)，背景為純黑或柔和的中性灰，營造出電影般的編輯風格。主要色盤嚴格限定於 #000000、#f5f5f7 與 #1d1d1f，並以單一高對比強調色 #0071e3 用於主要操作。關鍵限制包括避免視覺雜亂、抵制裝飾性元素的使用，並在色盤上保持絕對克制。動態效果應微妙且平滑，專注於透明度與變換過渡，以增強高端、無縫的體驗。
en · zh-CN · zh-TW · ja · ko