精选 · 开放 · 免费
Dae
温暖、灵感源自沙漠的护发产品,俏皮且引人入胜。
beautyhaircare
01
设计气质 DNA
温暖俏皮自然沙漠引人入胜
一次与你心爱的护发产品共度的阳光沙漠公路旅行
02
色彩
#E92C5BAccent
#BE6A14Ink
#6A6C77Ink soft
#FFFDF5BG
#EDD6C4BG soft
#DDA69DMuted
rgba(190,106,20,1)Line
以奶油色底色为锚点的泥土沙漠暖色,辅以活力十足的粉色点缀。
03
字体
didone-serif · geometric-sans · mono-sans
- display
56px · 400 - heading
24px · 700 - body
15px · 400
次级行动号召和促销标签使用全大写。 · 用于滚动品牌价值观 marquee 的文本使用大写等宽字体。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
段落内使用宽松的 padding,内容块之间保持清晰的垂直间距。
05
表面 (圆角 / 阴影 / 边线)
sm · 3px
md · 10px
lg · 0px
pill · 999px
按钮和 marquee 分隔线使用 1px 实线强调棕色边框。
无
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
全宽首屏英雄区,后接一个左侧描述性栏位,右侧是水平产品网格。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
用于价值观 marquee 的连续水平滚动。
导航链接和按钮上微妙的透明度或颜色变化。 · 标准的按钮按压效果。
08
组件
- button 药丸形状,带有纤细的实线边框和大写文本。
- card 以图像为中心,带有微妙的圆角和绝对定位的标签。
- chip 实心粉色的绝对定位“新品!”标签。
- input 极简设计,可能采用细边框或无边框。
- hero 大型电影感摄影图片,左侧叠加文本和行动号召按钮。
09
文案语气与禁用清单
- 语气 温暖、平易近人,且略带诗意。
- 标题风格 产品名称使用大型、优雅的衬线字体。
- 按钮文案 行动号召使用干净、大写的无衬线字体。
- 避免使用刺眼、临床的白色背景——截图显示使用温暖的奶油色(#FFFDF5)。
- 避免使用霓虹或纯粹数字化的强调色——截图使用自然的暖粉色(#DDA69D,#E92C5B)。
- 避免使用生硬、方正的按钮——截图使用圆润的药丸形按钮,带有纤细边框。
- 避免使用密集、文字过多的布局——截图大量依赖宽松的留白和摄影图片。
- 避免在首屏文本中使用现代、极简的无衬线字体——截图产品名称使用了醒目的 didone 衬线体。
- 避免使用僵化、边缘生硬的网格容器——截图使用了更柔和、更有机的网格对齐方式。
- 避免: 临床或过于技术性的护发术语。
- 避免: 刺眼、霓虹或纯粹数字化的配色方案。
- 避免: 僵化、网格密集的企业布局。
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个面向消费者的温暖护发品牌网站。它采用灵感源自沙漠的配色方案,包括奶油色(#FFFDF5)、棕褐色(#EDD6C4)和泥土棕色(#BE6A14),并用活力粉色(#E92C5B)作为促销元素的强调色。字体混合了优雅的 didone 衬线体标题与干净的几何无衬线体正文。关键禁忌:切勿使用刺眼的白色背景,避免霓虹色彩,不要使用生硬的方正 UI 组件。布局慷慨且以图像为主,依赖电影感摄影。
en · zh-CN · zh-TW · ja · ko