精選 · 開放 · 免費
Leica
一個以傳承為先的視覺展示，用於展示高級攝影器材。
hardwarecamera
01
設計氣質 DNA
精準傳承光學工藝視覺敘事
一座高端光學儀器博物館。
02
色彩
#D50000Accent
#222222Ink
#333333Ink soft
#F5F5F5BG
#FFFFFFBG soft
#D1D1D1Muted
rgba(209, 209, 209, 0.3)Line
中性背景搭配高對比文字，並以標誌性的紅色作為品牌錨點。
03
字型
humanist-sans
- display
32px · 600 - body
16px · 400 - caption
12px · 400
所有主要介面均使用簡潔的人文主義無襯線字體。 · 在長篇描述中保持寬裕的行高以確保可讀性。 · 僅在小型功能性標籤中謹慎使用大寫字母。
04
間距
4px
8px
12px
16px
24px
32px
48px
56px
64px
80px
88px
96px
基於 4px 增量的清晰垂直節奏，主要內容區塊之間留有顯著的呼吸空間（96px）。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 24px
pill · 9999px
使用深中性色或淺灰色調的細微 1px 或 2px 邊框。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
一個響應式 12 欄網格，從全寬首頁影像過渡至多欄卡片佈局。
07
動效與互動
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover 時流暢的顏色與背景色過渡。 · 主要內容區段的優雅淡入效果。
細微的顏色偏移或透明度變化，維持精緻感受。 · 直接導覽或展開主要內容卡片。
08
組件
- button 膠囊形（radius: 9999px），高對比度，常包含一個小的品牌色圓點指示器。
- card 影像為主，邊框細微或無可見邊框，使用寬裕的內部內距。
- chip 極簡，通常是頁尾導覽中基於文字的連結。
- input 簡潔、最小化的欄位，帶有細微邊框。
- hero 全視窗沉浸式攝影，疊加排版和一個顯眼的行動呼籲按鈕。
09
文案語氣與禁用清單
- 語氣 權威、精緻，並深刻專注於攝影工藝。
- 標題風格 粗體、清晰且具描述性，常突出特定產品名稱或藝術主題。
- 按鈕文案 直接且以行動為導向，頻繁使用標誌性的紅色圓點作為視覺錨點。
- 勿使用鮮豔的漸層——截圖顯示為扁平、高對比的中性色調。
- 勿使用厚重的陰影——截圖幾乎無陰影，偏好乾淨的邊緣。
- 勿使用深色模式作為預設——截圖顯示為以淺色（#F5F5F5/#FFFFFF）為主的主題。
- 勿使用裝飾性字體——截圖顯示為一致、功能性的無襯線人文主義字體。
- 勿使用醒目或多彩的 UI 元素——截圖顯示紅色為唯一的高彩度強調色。
- 勿使用雜亂的網格——截圖顯示在高品質攝影資產之間留有大量呼吸空間。
- 避免: 閃亮或霓虹色彩
- 避免: 俏皮或過於隨意的語言
- 避免: 使注意力偏離影像的雜亂佈局
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 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是 Leica Camera 的官方網站，一家高級攝影器材製造商。其設計 DNA 特點在於「高級、內斂」的美學，優先考量大規模攝影內容而非密集的 UI。主要色調為中性色（ink: #222222, bg: #F5F5F5），並以一個標誌性的品牌紅色（#D50000）用於標誌和小型強調。排版嚴格功能性，使用簡潔的人文主義無襯線字體（Outfit/Noto Sans），基準尺寸為 16px。佈局採用寬裕的 12 欄網格，並設有顯著的垂直間距（96px），讓攝影作品得以呼吸。關鍵限制：切勿使用霓虹或飽和的多色方案；視覺資產周圍保持大量空白；並避免使用裝飾性或俏皮的 UI 元素，以免分散對精密工程品牌形象的注意力。
en · zh-CN · zh-TW · ja · ko