精選 · 開放 · 免費

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

動效與互動

流暢的色彩與透明度轉場，用於微互動。 · 按鈕與連結的 hover 狀態採用細微的緩動效果。

細微的色彩變化或透明度轉移，搭配流暢的 cubic-bezier 緩動。 · 提供即時的視覺回饋，並搭配微互動轉場。

08

組件

• button 極簡的外框或文字按鈕，採用大寫文字與細微的 border-radius。
• card 深色、簡潔的卡片，帶有細微邊框與精緻的 padding。
• chip 藥丸形狀的開關，具有明顯的低飽和綠色啟用狀態。
• input 簡潔、無邊框的輸入框，帶有細微的底部邊框。
• hero 深色、以圖片為主的首頁區塊，搭配高對比、精緻的排版。

09

文案語氣與禁用清單

• 語氣 專業、具權威感且內斂。
• 標題風格 簡潔、直接，並多採用句首大寫。
• 按鈕文案 大寫的外框或文字按鈕。

• 勿使用明亮、飽和的強調色——截圖顯示的是低飽和的自然綠色。
• 勿使用厚重的陰影——截圖顯示的是細微、柔和的陰影。
• 勿使用複雜的漸層——截圖顯示的是實色深色背景與平面色彩。
• 勿使用到處都是的圓角——截圖顯示的是銳角或非常細微的圓角。
• 勿將長段落置中——截圖顯示的是靠左對齊的文字。
• 勿將內文全部大寫——截圖顯示的是句首大寫或標題式大寫。
• 勿使用俏皮或奇趣的 UI 元素——截圖顯示的是精緻、極簡的介面。
• 避免: 避免過於裝飾性的字體或複雜的佈局。
• 避免: 避免使用明亮、高飽和的強調色。
• 避免: 避免雜亂的介面或過多的 UI 元素。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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