精選 · 開放 · 免費
Bottega Veneta
一個乾淨、以圖像驅動的奢華時尚入口網站,採用克制的排版和單色調色盤。
fashionluxury
01
設計氣質 DNA
奢華時尚極簡社論精緻
一本高端時尚雜誌轉化為數位體驗。
02
色彩
#000000Ink
#333333Ink soft
#FFFFFFBG
#767676Muted
rgba(0, 0, 0, 0.1)Line
高對比的單色調,依賴攝影來提供色彩。
03
字型
transitional-serif · geometric-sans
- display
23px · 400 - body
14px · 400 - caption
12px · 400
導覽和標籤的字體嚴格使用大寫。 · 字體權重極為精簡,僅限於 regular 和 bold。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
寬裕的留白營造出精緻且通透的佈局。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
極簡的 1px 邊框主要用於按鈕和互動元素。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
以全出血社論攝影為主軸的網格佈局。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 1, 0.5, 1)easing
文字疊加的細膩淡入效果。 · 選單展開時的流暢垂直滑動。
細微的透明度降低或底線出現。 · 立即的視覺狀態改變,沒有誇張的回饋。
08
組件
- button 極簡的長方形按鈕,採用實心黑色填充或簡單的黑色邊框。
- card 乾淨的卡片,以銳利的邊緣和寬廣的影像來定義。
- chip 不適用
- input 乾淨的文字輸入框,僅帶有底部邊框。
- hero 一個全視口的攝影主視覺,搭配置中的大寫文字疊加。
09
文案語氣與禁用清單
- 語氣 自信、沉靜且具權威感。
- 標題風格 簡短、富有意涵,且主要為大寫。
- 按鈕文案 直接、簡單,且完全大寫。
- 不要使用明亮或飽和的強調色——截圖顯示了嚴格的單色調色盤。
- 不要使用圓角按鈕——截圖顯示了銳利、長方形的邊緣。
- 不要在主要導覽中使用小寫字母——截圖顯示了全大寫的文字。
- 不要使用厚重的陰影——截圖顯示了完全平面的表面。
- 不要使用繁雜的背景——截圖顯示了乾淨的白色背景或大型照片。
- 不要使用俏皮或圓潤的字體——截圖顯示了精緻的幾何與過渡字體。
- 避免: 驚嘆號
- 避免: 推銷用語
- 避免: 過度裝飾的字體
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Bottega Veneta 的設計 DNA 是克制奢華的典範。其定位為超高端時尚,運用強烈的單色調色盤(#000000, #333333, #FFFFFF)讓社論攝影成為視覺焦點。排版上,標誌採用過渡襯線體,而所有介面元素則使用幾何無襯線體,保持乾淨且具權威感的風格。關鍵的禁忌包括避免使用明亮的強調色、避免介面元件使用圓角,以及絕不在主要導覽中使用小寫字母。佈局寬敞、基於網格,且刻意保持極簡,確保焦點完全集中在產品和品牌形象上。
en · zh-CN · zh-TW · ja · ko