OpenDesign·你的设计资产库

网页参考

Magic Spoon

一个大胆、趣味的DTC麦片品牌,运用深紫色调和醒目的排版,连接怀旧情感与现代健康理念。

BrandFoodRetro

封面待补录,可通过原站查看设计。

01

设计气质 DNA

趣味大胆高端复古现代食品

一个充满活力、怀旧的麦片品牌,为注重健康的成年人重新设计。

02

色彩

#9100EDAccent
#3F0791Ink
#5D23DDInk soft
#FFFFFFBG
#DAD9FFBG soft
#F5F3FFBG quiet
rgba(63,7,145,0.2)Line

以洁净白色为底的高对比度紫色品牌色,辅以产品摄影中鲜艳的柔和色调。

03

字体

geometric-sans · humanist-sans

  • display48px · 900
  • heading24px · 700
  • body16px · 400
  • caption13px · 400

排版主要使用 Poppins 用于标题和正文,Mabry 用于品牌标志元素。 · 标题和行动号召文字大量使用大写转换。 · 正文保持中性的400字重,以确保在鲜艳配色下的可读性。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

基于标准4px网格,导航区域间距紧凑,主视觉区域留有充足内边距。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 10px
lg · 28px
pill · 50px

1px solid rgba(63,7,145,0.2)

rgba(0, 0, 0, 0.1) 0px 20px 60px 0px · rgba(0, 0, 0, 0.08) 0px 15px 50px 0px · rgba(0, 0, 0, 0.25) 0px 5px 15px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

标准电商结构:公告栏、固定导航栏、全宽分割式主视觉,后接产品网格。

07

动效与交互

150msmicro
300mssmall
900msmedium
cubic-bezier(0.25, 1, 0.5, 1)easing

如Cookie同意弹窗等模态窗口采用平滑的淡入和上滑效果。 · 主视觉区域的产品图像呈现浮动、视差般的运动效果。 · 按钮悬停状态时,背景和颜色立即切换过渡。

按钮颜色反转或细微透明度变化,伴随快速0.15秒的背景过渡。 · 交互元素如'自定义组合'按钮出现视觉下沉或缩放变换。

08

组件

  • button 药丸形按钮,采用纯紫色填充或透明背景配紫色边框,文字为大写粗体排版。
  • card 产品卡片采用大圆角(28px)和细微投影,常包含浮动的产品图像。
  • chip 小型圆角药丸形徽章,用于'热销'等标签,采用纯色背景填充。
  • input 简洁的矩形输入框,带有细微边框,聚焦时切换至高亮状态。
  • hero 全宽分割式布局,一侧为巨大的标题文字,另一侧为浮动、动态定位的产品图像。

09

文案语气与禁用清单

  • 语气 自信、趣味且注重健康。
  • 标题风格 粗体、大写、醒目的标题,常用巨大字号主导视觉层次。
  • 按钮文案 行动导向且祈使式的文案,以全大写药丸形按钮呈现。
  • 避免使用纤细衬线字体——截图显示的是粗体几何无衬线体和人文主义无衬线体。
  • 避免将布局扁平化为严格网格——截图显示产品图像重叠浮动。
  • 避免使用单色或灰暗配色方案——截图显示鲜艳的紫色和多彩的产品照片。
  • 避免在标题中使用小写句首大写——截图显示激进的大写文字转换。
  • 避免交互元素使用尖锐、无圆角的边角——截图显示充足的药丸形状。
  • 避免主导航中无色彩——截图显示深色背景配以鲜艳文字和点缀色。
  • 避免: 纤细的衬线体排版。
  • 避免: 灰暗、单色或完全灰度的配色方案。
  • 避免: 僵化、网格密集而无重叠或浮动元素的布局。
  • 避免: 微妙、低调的品牌标识。

10

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Magic Spoon 是一个面向注重健康的成年人的趣味高端DTC麦片品牌。其视觉标识以充满活力的深紫色主色(#3F0791)与洁净白色背景形成对比,并常辅以产品摄影中的明亮柔和色调。关键字体类别包括几何无衬线体和人文主义无衬线体,采用粗体大写转换。关键设计约束:避免纤细衬线体,保持高对比度,确保充足、趣味的圆角。布局常采用重叠的浮动图像而非僵化网格,创造出动态的、复古现代风格的电商体验。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。