精选 · 开放 · 免费
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 胶囊形（圆角半径：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。主要色板为中性色（墨色：#222222，背景：#F5F5F5），并以单一的标志性品牌红（#D50000）用于Logo和小面积强调。排版严格功能化，使用干净的无衬线字体（Outfit/Noto Sans），基础字号16px。布局使用宽裕的12列网格，主要区块间有显著的垂直间距（96px），让摄影内容得以呼吸。关键约束：绝不使用霓虹或多色方案；在视觉资产周围保持大量留白；避免可能分散对精密工程品牌形象注意力的装饰性或俏皮UI元素。
en · zh-CN · zh-TW · ja · ko