精选 · 开放 · 免费
Ino Jewelry
一个高端珠宝品牌,运用雕塑感、极繁主义的摄影与鲜明、高对比度的布局,将产品定位为艺术收藏品。
PremiumProductGalleryPhotographicStudio
01
设计气质 DNA
先锋派雕塑感奢华极繁主义编辑美学
如同展示可穿戴雕塑的艺术画廊,珠宝被视为当代艺术品而非传统配饰。
02
色彩
#212123Ink
#000000BG
#FFFFFFBG soft
#A6A6A7Muted
rgba(21,21,23,1)Line
严格的高对比度单色配色,完全依赖白底黑字或黑底白字排版,营造鲜明的编辑美学感受。
03
字体
geometric-sans
- display
24px · 400 - body
16px · 400 - caption
11px · 400
所有文本采用宽体几何无衬线字体 · 标题与标签频繁使用全大写 · 紧凑文本块采用极小的行距
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于网格,文字与图像周围采用紧凑而刻意的间距
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
导航分隔线使用1px细黑实线,其他区域无边框,依赖图像对比度分隔。
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
全出血主图后接简洁的两栏不对称产品网格
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.12, 0.67, 0.53, 1)easing
淡入 · 透明度过渡
可点击元素简单的透明度过渡 · 标准光标变为指针
08
组件
- button 简洁的全大写文本链接,悬停时显示单下划线
- card 纯图像卡片,文字标签置于图像容器外部
- hero 全屏全出血摄影背景,居中白色排版与图形标志元素
09
文案语气与禁用清单
- 语气 极简、自信、先锋
- 标题风格 简短有力的大写陈述,如'MORE IS MORE'
- 按钮文案 直接的大写文本,悬停时带下划线
- 避免使用暖色——截图显示严格单色(黑、白、灰)背景与文字
- 避免导航或标题使用小写文本——截图显示'SHOP'、'ABOUT'、'MORE IS MORE'均为全大写
- 避免添加阴影或复杂UI样式——截图显示扁平排版与简单1px边框
- 避免卡片或按钮使用圆角——截图显示锐利边缘,仅特定图标使用标准药丸形状
- 避免使用装饰性或手写体字体——截图仅使用宽体几何无衬线字体
- 避免布局元素堆砌——截图显示大量留白并聚焦于单一大图
- 避免: 避免过度描述性或华丽的文案
- 避免: 避免暖色调或俏皮元素
- 避免: 避免复杂句式结构
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个高端先锋派珠宝电商网站。其设计DNA由鲜明高对比度摄影、严格单色配色方案以及用于全大写标题的宽体几何无衬线字体定义,营造大胆的编辑美学。布局采用全出血主图和简洁的不对称网格。主要颜色为深黑(#000000)、纯白(#FFFFFF)与近黑墨色(#212123)。避免使用暖色、装饰性字体、UI元素小写文本、复杂阴影、卡片圆角以及杂乱布局。排版应始终保持宽体、几何感且标题全大写,以维护品牌强烈的雕塑感标识。
en · zh-CN · zh-TW · ja · ko