01
设计气质 DNA
纯净美妆极简主义天然高端护肤
阳光展厅中的极简主义美妆柜台
02
色彩
#271F1FInk#5E5047Ink soft#FAF7F8BG#FFFFFFBG soft#F5F5F5BG quiet#756E65Mutedrgba(229, 231, 235, 1)Line暖色调中性色主导背景，深棕色作为主要前景色，营造高对比度但柔和的视觉美学。
03
字体
- display
40px · 400 - body
16px · 400
导航与按钮标签使用大写字母 · 大尺寸展示文字采用紧凑字间距 · 混合字体粗细实现层级强调
04
间距
4px8px16px24px32px48px64px96px基于4的网格系统，统一使用16px的栏间距与内边距
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgb(229, 231, 235) 用于分隔线，2px solid rgb(39, 31, 31) 用于主要按钮
0px 4px 6px -1px rgba(0, 0, 0, 0.1) · 0px 2px 4px -2px rgba(0, 0, 0, 0.1)
06
布局
1280container
12columns
16pxgutter
768 / 1024breakpoints
模态叠加层，左侧居中白色卡片，右侧全幅生活场景摄影
07
动效与交互
150msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
模态叠加层平滑的透明度过渡 · hover 状态的颜色与背景色过渡 · 交互元素的变形动画
0.4秒内完成颜色与背景色过渡 · 交互元素的变形效果
08
组件
- button 深棕色（#271F1F）填充按钮，白色大写文字，矩形，8px圆角
- card 白色（#FFFFFF）模态卡片，12px圆角
- chip 网格布局的分类选择按钮，保持8px统一间距
- input 截图中不可见
- hero 全视口分屏布局，包含模态叠加层与生活场景产品摄影
09
文案语气与禁用清单
- 语气 亲切、自信、平易近人
- 标题风格 直接推广语言（如“立享85折优惠”），搭配大尺寸几何无衬线字体
- 按钮文案 清晰、面向行动的大写分类标签
- 避免使用深色模式 — 截图显示浅色 #FAF7F8 背景
- 避免使用亮色点缀色 — 截图显示单色暖中性色调
- 避免使用手写或装饰字体 — 截图显示干净的几何与人文无衬线字体
- 避免使用浓重投影 — 截图显示低透明度的微妙投影
- 避免使用圆角药丸形按钮 — 截图显示8px圆角的矩形按钮
- 避免使用复杂布局 — 截图显示简洁的居中模态叠加层模式
- 避免: 避免使用高饱和度亮色
- 避免: 避免使用装饰性手写字体
- 避免: 避免使用深色模式
- 避免: 避免使用复杂渐变
- 避免: 避免使用激进阴影
- 避免: 避免使用霓虹或荧光色点缀
10
包内真实截图
11
System Prompt
纯净美妆电商品牌，采用暖色中性色板（#FAF7F8 背景，#271F1F 文字）与精致排版。使用几何与人文无衬线字体类别，展示文字采用紧凑字间距。以摄影产品图像为特色，搭配极简 UI 组件。关键设计原则：色彩克制、强调留白、高对比度排版。严格避免：深色模式、高饱和度色彩、装饰字体、浓重阴影、复杂渐变或激进动画。模态叠加层模式体现了品牌面向转化的设计理念。