01
设计气质 DNA
街头服饰生活方式高端编辑式夏季
一本高端街头服饰目录,感觉像一本电影感的生活方式杂志。
02
色彩
#333333Ink#FFFFFFBG#F2F2F2BG soft#D9D9D9Mutedrgba(51, 51, 51, 1.0)Line严格的单色画布设计,旨在完全隐退于背景,让充满活力的、真实世界的摄影驱动视觉兴趣。
03
字体
- display
28px · 300 - body
12px · 300 - nav
10px · 500
字体统一设置为大写,并采用宽松的字间距。 · 主标题过渡到衬线字体以增加编辑感。 · 正文内容保持极小(12px),以优先为摄影留出视觉空间。
04
间距
4px8px12px16px24px32px48px64px96px稳定的4px基础网格,利用充足的留白让全出血摄影得以呼吸。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 9999px
1px solid边框是主要的UI分隔线,根据背景叠加层使用墨色或白色。
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
全出血首屏区域过渡到紧凑的4列产品网格。
07
动效与交互
200msmicro
300mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
标准悬停状态下的平滑颜色和变换过渡。
交互元素上的微妙不透明度偏移或背景颜色填充。 · 主要行动号召按钮上的即时状态变化。
08
组件
- button 由1px尖锐边框和大写字间距定义的幽灵按钮,圆角为零。
- card 紧凑、边缘到边缘的图像卡片,无内边距或圆角,形成连续的视觉网格。
- chip 不适用
- input 不适用
- hero 巨大的全视口电影感图像,左下角对齐的衬线文本和幽灵操作按钮。
09
文案语气与禁用清单
- 语气 精致、自信且注重生活方式,让摄影承担重任。
- 标题风格 编辑式且以季节为主(例如 ‘Kith Summer 2026’),采用精致的衬线字体。
- 按钮文案 直接、大写且实用,使用小型几何无衬线文本。
- 不要在按钮上使用圆角——截图显示的是尖锐、矩形的0px圆角UI元素。
- 不要使用大型、粗体的无衬线标题——截图显示的是用于展示文本的精致、轻量的衬线字体。
- 不要使用明亮、饱和的背景颜色——截图显示的是严格的白色 (#FFFFFF) 和米白色 (#F2F2F2) UI表面。
- 不要使用厚重的投影或3D效果——截图显示的是扁平的、基于2D边框的UI组件。
- 不要使用混合大小写的句子排版——截图显示的是严格的大写格式和宽字间距。
- 不要使用小而受限的图像容器——截图显示的是全出血、边缘到边缘的摄影,主导了视口。
- 避免: 避免喧闹的促销语言或折扣驱动的横幅。
- 避免: 避免在主要UI组件上使用圆角。
- 避免: 避免用次要UI元素打乱视觉层次。
10
包内真实截图
11
System Prompt
Kith是一个高端街头服饰品牌,具有摄影优先、编辑式的美学。设计系统依赖于严格的单色画布(#FFFFFF背景,#333333墨色),让充满活力的、全出血的生活方式摄影驱动视觉兴趣。字体将用于展示文本的精致过渡衬线与用于UI的简洁humanist-sans(proxima-nova)配对,并始终保持宽字间距和大写。关键规则:永不使用圆角(保持尖锐的0px矩形),避免厚重的阴影或3D效果,并始终优先考虑首图而非UI装饰。对主要行动号召使用带有1px solid边框的幽灵按钮,以维持视觉轻盈感。








