精选 · 开放 · 免费
Theroger
极简高端的运动鞋履,专注于简洁的字体排印与宽广的留白。
ProductPremiumPhotographicCurationClean
01
设计气质 DNA
高端极简简洁运动生活方式
一本高端精品目录,利用大量留白让产品自行展示其价值。
02
色彩
#000000Ink
#222222Ink soft
#ffffffBG
#f7f7f7BG quiet
#666666Muted
rgba(0,0,0,0.10)Line
极致克制:以单色为基础,所有视觉趣味完全依赖于高分辨率摄影。
03
字体
geometric-sans · monospace
- display
50px · 700 - heading
39px · 700 - subheading
24px · 400 - body
16px · 400 - label
12px · 400
对大尺寸展示文字使用紧凑的负字间距,以形成连贯的视觉块。 · 在文本块之间保持充足间距,以维持通透、高端的氛围。 · 仅在技术细节或特定设计点缀中谨慎使用等宽字体。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
严格的4px网格提供了底层结构,但实际布局高度依赖大量无结构的留白来创造节奏。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 40px
pill · 999px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
流动的网格系统,保持显著的水平边距和版块之间充足的垂直间距。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.87, 0, 0.13, 1)easing
为按钮和图片悬停等交互元素提供平滑的硬件加速过渡。 · 在聚焦或悬停时使用微妙的缩放或位移变换,以提供清晰反馈。
通过微妙的背景色变化或图片轻微缩放来指示交互性,避免分散注意力。 · 通过状态变化提供即时视觉反馈,通常伴随平滑过渡。
08
组件
- button 高对比度的黑色按钮配白色文字,主要操作常采用药丸形状(40px圆角),次要操作使用透明描边。
- card 用于承载产品图片和文字的简洁、无边框容器,依靠充足的内边距和留白而非可见的卡片来分隔。
- chip 在可见版块中不突出;任何标签很可能是简洁的大写文本标签。
- input 标准的表单文本输入,可能采用极简样式,带有微妙的底边框。
- hero 一个大型、全宽的摄影区域,搭配粗体、居中的标题,以建立一种令人向往的基调。
09
文案语气与禁用清单
- 语气 自信、内敛且高端。语言直接,聚焦于产品属性,避免过度推销。
- 标题风格 粗体、大写或首字母大写的标题,采用负字间距以创造强烈的视觉冲击力。
- 按钮文案 直接且注重行动,通常在高对比度按钮上使用简洁文字。
- 不要使用渐变或复杂背景——截图显示的是纯白单色平面背景。
- 不要使用装饰性边框或厚重阴影——截图显示的是无边框、最低限度凸起的布局。
- 不要使用多种多样的字体颜色——截图显示几乎只使用黑色文字配白色背景。
- 不要使用细小、拥挤的间距——截图显示所有元素周围都有充足的垂直和水平留白。
- 不要对所有元素使用圆角——截图显示产品卡片是直角,仅主要按钮使用药丸形状。
- 不要使用活泼或古怪的字体排印——截图显示的是清晰、几何感的无衬线字体,优先考虑可读性和高端感。
- 避免: 过多的形容词
- 避免: 喧闹的促销语言
- 避免: 杂乱的布局
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(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
定位:一个专注于极简设计与高质量摄影的高端直接面向消费者的运动鞋履品牌。关键颜色:纯白(#ffffff)与黑色(#000000)组成的极简单色调,以及用于微妙背景区分的浅灰色(#f7f7f7)。字体类别:所有主要文字使用几何无衬线体,偶尔使用等宽字体。关键禁忌:绝不使用渐变或装饰性阴影;通过保持宽广的留白避免布局杂乱;绝不使用破坏高端美学的活泼或装饰性字体排印。
en · zh-CN · zh-TW · ja · ko