精選 · 開放 · 免費

Bmw

一個頂級汽車網站，具有深色氛圍的首頁、簡潔的排版與醒目的藍色強調色。

01

設計氣質 DNA

一個展示高性能車輛的豪華汽車展示廳，透過戲劇性的攝影呈現。

02

色彩

以深炭灰色和純白色為基調的極簡調色板，並以單一 BMW 藍色強調色點綴行動呼叫。

03

字型

grotesque-sans

• display56px · 300
• headline35px · 300
• body18px · 300
• small15px · 300
• caption12px · 300

標題使用輕字重（300）以營造優雅、頂級的質感。 · 按鈕文字使用中字重（500）以明確強調行動呼叫。 · 大型展示文字使用緊湊的負字距以創造視覺密度。 · 內文保持寬裕的行高（1.5-1.6）以利舒適閱讀。

04

間距

8px 格線系統，搭配寬裕的水平內邊距（桌面版首頁區塊為 96px）以創造呼吸空間。

05

表面 (圓角 / 陰影 / 邊線)

使用柔和的炭灰色（#414141）細 1px 邊框進行輕微分隔，避免粗重的外框。

rgba(0, 0, 0, 0.25) 0px 4px 4px 0px · rgba(0, 0, 0, 0.2) 0px 0px 18px 0px

06

版面

全幅出血的首頁圖片搭配左對齊的文字覆蓋層，下方轉換為置中的白色內容區塊。

07

動效與互動

互動元素上快速的 0.1 秒色彩轉換以提供即時回饋。 · 內容顯示時平滑的 0.5 秒透明度淡入效果。 · 可展開導覽元素的細微寬度與位置轉換。

文字連結與按鈕立即變色，圖片則有細微的透明度變化。 · 乾淨的狀態轉換，無厚重的縮放或變形效果。

08

組件

• button 實心藍色（#1C69D4）填充按鈕，搭配白色文字與直角；次要行動則使用幽靈/外框變體。
• card 以圖片為主的編輯型卡片，介面極簡，聚焦於高品質的汽車攝影。
• chip 簡潔的文字導覽片，使用底線指示器，無膠囊形外框。
• input 簡潔的輸入欄位，搭配細緻的底部邊框，與內斂的設計語言保持一致。
• hero 全視野的攝影背景，搭配漸層覆蓋層以確保深色圖片上的文字可讀性。

09

文案語氣與禁用清單

• 語氣 自信、頂級、資訊豐富但不強勢。
• 標題風格 全大寫展示型文字，並以句點作為陳述句結尾（例如：'租賃 2026 BMW X5 xDRIVE40i。'）。
• 按鈕文案 直接的行動動詞（'了解更多'、'查看詳情'、'查看所有優惠'），以句首字母大寫呈現於藍色按鈕上。

• 不要在主要按鈕上使用圓角 — 螢幕截圖顯示的是銳利的 0-2px 圓角
• 不要添加裝飾性的漸層或圖案 — 螢幕截圖顯示的是扁平的攝影首頁圖與細微的深色覆蓋層
• 不要使用粗/重字重的排版 — 螢幕截圖顯示標題主要採用輕字重（300）
• 不要引入多種強調色 — 螢幕截圖顯示僅有 BMW 藍色（#1C69D4）作為唯一的彩色強調元素
• 不要建立複雜的多欄式首頁版面 — 螢幕截圖顯示的是單張全出血圖片搭配左對齊文字
• 不要在內容卡片上使用陰影 — 螢幕截圖顯示的是扁平、乾淨的表面，無層疊的高度感
• 避免: 過多的驚嘆號
• 避免: 隨意的俚語
• 避免: 過度專業的術語
• 避免: 雜亂的文字版面

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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