精选 · 开放 · 免费
Merit
采用编辑式版面布局的极简主义高端美妆品牌
beauty
01
设计气质 DNA
极简主义举重若轻编辑感精致考究
精心策划的杂志版面
02
色彩
#000000Ink
#333333Ink soft
#FFFFFFBG
#FAF9F7BG soft
#62605EMuted
rgba(0, 0, 0, 0.1)Line
高对比度黑白基调,搭配柔和暖灰色
03
字体
didone-serif · grotesque-sans
- display
48px · 400 - subtitle
13px · 400 - body
16px · 400
Didone衬线体用于优雅的展示标题 · 简洁的无衬线字体用于导航与正文 · 标签文字采用大写字母与宽松字距
04
间距
4px
8px
12px
16px
24px
40px
64px
80px
充裕舒展
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
主按钮采用1px纯黑描边
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
分屏式主视觉,内容采用标准网格布局
07
动效与交互
200msmicro
400mssmall
600msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
图像采用平滑的透明度与形变渐显效果 · 交互状态采用微妙的线性转场
微妙的透明度降低 · 标准指针样式
08
组件
- button 低调的文字型CTA或纯黑色实体按钮
- card 无边框设计,影像铺满边缘
- input 简洁下划线或极细描边
- hero 全幅编辑式分屏布局,搭配大尺寸影像与衬线体标题
09
文案语气与禁用清单
- 语气 精致而直接
- 标题风格 简短隽永的衬线体短语
- 按钮文案 极简且行动导向
- 禁用荧光霓虹色——配色方案严格限定于黑白与柔和暖灰。
- 避免使用大圆角——设计倾向锐利或极微弱的圆角处理。
- 禁用无衬线体作为展示标题——主标题风格应为优雅的Didone衬线体。
- 避免版面杂乱——保持充足的留白与呼吸空间。
- 主元素禁用投影——设计采用平面化处理,依靠字体构建层次。
- 正文禁用全大写——全大写仅用于短标签与导航文字。
- 避免: 感叹号
- 避免: 营销话术
- 避免: 杂乱界面
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
设计一个极简主义的高端电商界面,灵感源自编辑式杂志版面。布局采用严谨的黑白配色方案,搭配柔和的暖灰白背景。使用Didone衬线体作为富有表现力的标题字体,搭配简洁的无衬线体用于正文与UI元素。确保充足的留白,避免视觉场域杂乱。核心约束:主卡片或按钮禁用投影,保持交互状态的微妙性,维持高端美妆品牌特有的优雅精致格调。
en · zh-CN · zh-TW · ja · ko