Magic Spoon 网站预览
Magic Spoon 网站预览

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 的色域。