01
设计气质 DNA
定制美妆科学支撑纯净成分个性化高端护肤
一家精品药剂店与高端设计工作室的结合
02
色彩
#F49674Accent#000000Ink#323429Ink soft#FFFFFFBG#F9F7F2BG soft#4D523CMutedrgba(0,0,0,0.1)Line一个克制的自然调色板，深橄榄绿奠定设计基调，纯净的白色提供呼吸空间，而独特的珊瑚色点缀则吸引目光至主要操作区域。
03
字体
- display
40px · 400 - headline
32px · 400 - body
16px · 400 - caption
12px · 400 - button
14px · 400
衬线体专门用于高影响力标题，以传达优雅感。 · 无衬线体用于所有功能性导航和正文，以确保最大可读性。 · 等宽字体专门用于小型大写上标和标签。 · 次级标签和按钮始终采用大写字母处理，并应用较宽的字间距。
04
间距
4px8px12px16px20px24px32px48px60px96px一致的4px基线网格确保整个布局在垂直方向上的节奏感和可预测的对齐。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 60px
1px solid rgba(0,0,0,0.1)
rgba(0, 0, 0, 0.04) 0px 10px 14px -10px · rgba(0, 0, 0, 0.25) 0px 4px 4px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
一个宽阔的、居中的12列网格，在移动设备上转换为单列堆叠布局。
07
动效与交互
200msmicro
250mssmall
560msmedium
cubic-bezier(0.52, 0.16, 0.24, 1)easing
交互状态下的标准背景色和变换过渡。 · 用于更平滑的 height 和 bottom 属性动画的特定 cubic-bezier 时间函数。
微妙的透明度变化或背景色过渡。 · 通过标准浏览器状态提供即时视觉反馈。
08
组件
- button 用于主要号召性用语的药丸形按钮，以及用于次要操作的、带有微妙圆角的标准矩形按钮。
- card 极简的水平成分卡片，带有浅色边框和充足的内部留白。
- chip 不适用 - 在提供的截图中未作为独立组件明显使用。
- input 不适用 - 在提供的截图中不可见。
- hero 全宽电影感背景视频或图像，配有简洁的文字叠加层和居中的主要操作按钮。
09
文案语气与禁用清单
- 语气 自信、干净、令人安心的科学感，同时平易近人。
- 标题风格 优雅而简洁，常结合衬线标题和宽字间距的等宽字体上标。
- 按钮文案 直接且以行动为导向，使用大写的等宽或无衬线字体。
- 不要使用响亮、霓虹或高度饱和的颜色——调色板严格限于柔和的土色调和白色。
- 不要使用花哨或装饰性的手写体作为标题——排版严格使用衬线体、无衬线体或等宽体。
- 不要为每个卡片添加厚重的边框、投影或强烈的背景色——元素保持高度极简。
- 不要用太多相互竞争的元素使布局显得拥挤——设计依赖于大量的留白。
- 不要将主要按钮文本设为小写——网站一致使用大写字母并带有较宽的字间距作为标签。
- 不要在主视觉区使用标准方形产品网格——品牌更倾向于电影感、全出血的生活方式图像。
- 避免: 俚语或过于随意的语言
- 避免: 响亮、饱和的颜色或具有侵略性的视觉噪点
- 避免: 复杂、杂乱的多列布局
- 避免: 厚重的投影或拟物化设计元素
10
包内真实截图
11
System Prompt
设计一个高端、洁净的美容或消费品品牌界面，在科学精准与温暖、平易近人的美学之间取得平衡。使用由白色、柔和米色和深橄榄绿组成的中性调色板，并以一个独特的珊瑚色点缀作为主要号召性用语。排版应将优雅的过渡衬线体用于展示标题，与高度可读的人文主义无衬线体用于正文，并使用几何等宽字体作为小型大写上标。确保布局宽敞、通透、极简，避免杂乱的网格或厚重的UI元素。不要使用花哨的字体、霓虹色或具有侵略性的投影。保持交互流畅而微妙，专注于高品质的电影感摄影和简洁的排版。