精选 · 开放 · 免费

Peak Design

一个以视觉为驱动、以产品为中心的品牌，融合了粗犷的户外美学与精致、极简的设计。

01

设计气质 DNA

高端户外装备目录与现代设计作品集的结合。

02

色彩

摄影是主要的色彩来源；UI提供了一个中性、高对比度的深浅灰色框架。

03

字体

geometric-sans · humanist-sans · monospace

• display40px · 700
• headline32px · 700
• body16px · 400

按钮标签和导航链接使用大写和字间距调整。 · 大型展示标题使用紧凑的负字间距。 · 保持墨色与背景元素之间的高对比度比率。

04

间距

整个设计中使用统一的4px基础网格作为内边距和间距，确保布局结构化。

05

表面 (圆角 / 阴影 / 边线)

使用主墨色搭配低透明度的极简1px实线边框，用于微妙的视觉分隔。

0px 0px 4px 0px rgba(0, 0, 0, 0.04)

06

布局

一个全出血的摄影主视觉区，内容居中，并使用12列网格来展示产品列表。

07

动效与交互

叠层和模态框使用平滑的透明度和可见性过渡。 · 交互元素在悬停和点击时使用快速的缩放（transform）过渡。

微妙的透明度变化或背景色转换（0.2s cubic-bezier）。 · 即时的缩放变换（0.15s ease-out），然后触发操作。

08

组件

• button 高对比度的实心背景（白色或深色），搭配大写文本和充足的内边距（8px 16px 或 12px 24px）。
• card 简洁、无边框的容器，产品图片是主导元素，并辅以极简的排版。
• chip 药丸形元素（border-radius: 32px to 9999px），用于分类或标签。
• input 简单的矩形输入框，带有1px实线边框和4px的圆角。
• hero 全出血、高质量的摄影背景，配有居中的大号展示文本和醒目的行动号召按钮。

09

文案语气与禁用清单

• 语气 自信、直接且高端。
• 标题风格 粗体、大写、高对比度。
• 按钮文案 以行动为导向、大写且高度易读。

• 不要使用多色渐变背景——网站依赖于干净的纯色（#FBFDFC）或全出血摄影。
• 不要使用装饰性衬线字体——字体严格使用几何和人文无衬线类别。
• 不要使用过于圆润、俏皮的组件——按钮和输入框使用微妙的4px到8px圆角。
• 不要在行动号召处使用小而低对比度的文本——标题和按钮应粗体、大写且高度易读。
• 不要使用复杂的、多层的阴影——层次感通过一个非常微妙的单一 box-shadow 实现。
• 不要使用杂乱、拥挤的布局——每个元素都拥有充足的呼吸空间（16px 到 24px 间距）。
• 避免: 过度使用明亮、人工的强调色。
• 避免: 与摄影作品竞争的杂乱布局。
• 避免: 感觉过于俏皮的圆润、'气泡状'UI元素。
• 避免: 缺乏冲击力的小而精致的字体。
• 避免: 复杂的渐变或装饰性背景图案。
• 避免: 不一致的内边距或间距。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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