精选 · 开放 · 免费
Lunchconcept
一个以策展为核心的时尚平台,拥有大胆的编辑式摄影和鲜明的排版。
EditorialPhotographicCurationPremiumGallery
01
设计气质 DNA
时尚独立设计师策展编辑
由画廊策展的高端时尚杂志
02
色彩
#FF0000Accent
#000000Ink
#F4F1E4BG
rgba(0,0,0,1.0)Line
高对比度的编辑式配色,以温暖的米白色为基底,搭配单一的粗体红色强调状态。
03
字体
high-contrast-serif · humanist-sans
- display
120px · 400 - heading
32px · 700 - body
12px · 400
04
间距
4px
8px
16px
20px
24px
32px
60px
紧凑的编辑式间距,大元素周围留有充足的空白
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
页面分区底部为1px实线黑色边框
06
布局
1400container
12columns
20pxgutter
768 / 1024breakpoints
全出血摄影后接一个严格、密集的多列产品网格。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
在悬停和顶级导航上使用平滑过渡
鼠标指针样式,伴随平滑的颜色或透明度过渡 · 即时状态变化,无重加载动画
08
组件
- button 大写样式的文本导航链接
- card 无边框产品卡片,包含图片、设计师名、产品名和价格
- chip 亮红色的“已售罄”状态文本
- hero 全视口图片,配以巨大的、重叠的3D金属质感字体
09
文案语气与禁用清单
- 语气 直接、简约且权威
- 标题风格 简短、粗体、大写且有冲击力
- 按钮文案 低调的文本链接,而非醒目的按钮
- 不要使用圆角——截图显示整体都是严格的90度直角边缘
- 不要使用彩色背景——截图显示统一的温暖米白色 (#F4F1E4) 基底
- 不要使用休闲的无衬线字体——截图显示高对比度衬线体和简洁的人文主义无衬线体的混合
- 不要使用投影——截图显示完全扁平、无边框的产品卡片
- 不要使用明亮、多彩的强调色——截图显示红色 (#FF0000) 仅用于特定的状态指示
- 不要为正文内容使用居中文本——截图显示严格的左对齐编辑式结构
- 避免: 杂乱的布局
- 避免: 过多的促销文案
- 避免: 俏皮或圆润的元素
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个专注于独立设计师的高端时尚电商平台,采用引人注目的编辑式布局。关键颜色包括温暖的米白色背景 (#F4F1E4) 和单一的高饱和度红色强调色 (#FF0000) 用于状态信息。字体将高对比度衬线体用于巨大的展示元素,搭配简洁的人文主义无衬线体用于导航和产品详情。布局高度结构化,依赖严格的网格和充足的空白。关键禁忌:绝不使用圆角,保持背景严格的米白色或黑色,并避免任何俏皮或杂乱的UI模式。
en · zh-CN · zh-TW · ja · ko