精选 · 开放 · 免费
Telfar
以摄影为驱动、聚焦大胆且触手可及的奢华的极简主义时装电商。
fashion
01
设计气质 DNA
极简主义都市触手可及的奢华标志性纽约
一个干净、实用主义的精品店，产品就是主角
02
色彩
#000000Ink
#FFFFFFBG
#F2F2F2BG quiet
#1F1F1FMuted
rgba(0, 0, 0, 0.1)Line
高对比度的极简主义，让产品摄影占据主导地位
03
字体
grotesque-sans
- display
56px · 400 - body
16px · 400
大多数UI元素使用统一的字重 · 确保紧凑的文本块使用紧凑的行高 · 谨慎地为标签和徽章应用大写字母
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于一致的4px基础网格，采用标准的电商间距
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 6px
lg · 12px
pill · 999px
用于卡片和交互元素的1px细实线黑色边框
rgba(0, 0, 0, 0.01) 0px 0px 10px 0px
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
用于产品展示的不对称瀑布流或双列网格
07
动效与交互
150msmicro
300mssmall
600msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
悬停状态的平滑缩放过渡 · 模态窗口和覆盖层元素的淡入效果
细微的透明度变化或背景颜色过渡 · 带有最少动画的即时视觉反馈
08
组件
- button 简约的胶囊形或矩形，带有细边框
- card 干净的白色卡片，带有细微边框用于产品分组
- chip 简单的基于文本的导航标签
- input 带有清晰标签的标准文本输入框
- hero 大型、全宽的摄影横幅，叠加最少的文字
09
文案语气与禁用清单
- 语气 自信、直接且克制
- 标题风格 清晰且信息丰富，常说明颜色或产品类型
- 按钮文案 简单、面向行动的文本，如'查看全部'或'管理偏好设置'
- 不要使用装饰性渐变——截图显示的是纯色背景
- 不要大量使用投影——截图仅显示了一个非常细微的投影效果
- 不要使用过重的字重——截图显示倾向于使用400字重
- 不要在UI中使用鲜艳的强调色——截图显示没有明显的强调色
- 不要到处使用圆角——截图显示大多为直角或微小圆角
- 不要用图标使UI显得杂乱——截图显示顶部导航栏使用了一套极简的图标
- 避免: 过度的促销语言
- 避免: 装饰性元素
- 避免: 喧闹的色彩组合
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Telfar是一个极简主义的时装电商网站，具有干净、实用主义的美学。它使用纯白(#FFFFFF)和黑色(#000000)的高对比度配色，让大胆的产品摄影主导视觉空间。字体依赖于一款怪诞风格的无衬线体(Neue Haas Grotesk Text Pro)，注重可读性和简洁的线条。关键的设计限制包括避免使用厚重的阴影、过多的装饰元素或与产品竞争的鲜艳强调色。布局宽敞且基于网格，通过大型、清晰的图像和最少的界面装饰，重点展示标志性的'Shopping Bag'产品系列。
en · zh-CN · zh-TW · ja · ko