Magic Spoon

浅蓝色基底、胶囊形控件与大字排版。
页面以浅蓝色为基底,搭配紫色文字。字体采用 Poppins、Mabry Pro。视觉特点包括胶囊形控件、大字排版、大幅摄影展示、产品图像展示。适合参考的场景:商品详情页、品牌产品介绍页。
查看原始网站使用规范
建议采用
- 将默认页面画布设为薰衣草通道 #dad9ff,并在宽幅水平条带中切换至天空漩涡 #bfefff 或棉花糖 #ffffff。
- 使用深薰衣草色 #3f0791 作为品牌标题、描边、产品链接文本以及填充转化按钮的颜色。
- 将编辑类标题设为 Poppins 700 字重,字号 60px/63px 或 64px/64px,字间距正常。
- 使用 Poppins 700 字重,字号 16px/16px,大写形式用于公共导航标签。
- 构建白色选择控件,半径 52px,深薰衣草色 #3f0791 边框 2px,内边距 10px 24px。
- 使用 25px 的卡片圆角,将 25px 25px 25px 0px 的切角处理保留用于以图片为主或半透明面板。
- 仅对抬升的白色卡片应用 rgba(0, 0, 0, 0.08) 0px 15px 50px 0px 或 rgba(0, 0, 0, 0.1) 0px 20px 60px 0px。
建议避免
- 不要将深薰衣草色 #3f0791 替换为黑色用于标题或主要转化控件。
- 不要使用通用的 4px、8px 或 12px 按钮圆角;轮廓控件使用 52px,转化按钮使用 20px。
- 不要将品牌展示标题设为低于 Poppins 700 字重。
- 不要将粉彩填充作为默认文本颜色;长文本和产品文本应保持在深薰衣草色 #3f0791。
- 不要在每个商品卡片下都添加厚重阴影;基础商品卡片保持在棉花糖色 #ffffff 上,保持平面。
- 不要使用中性办公室或生活场景的摄影;应展示鲜明的包装导向产品场景、食物质感以及超现实的彩色组合。
- 不要将配色简化为单一紫色背景;交替使用薰衣草通道 #dad9ff、天空漩涡 #bfefff、棉花糖 #ffffff 和电葡萄色 #5b00ed 的色域。