精选 · 开放 · 免费

Magic Spoon

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

01

设计气质 DNA

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

02

色彩

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

03

字体

geometric-sans · humanist-sans

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

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

04

间距

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

05

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

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

布局

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

07

动效与交互

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

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

08

组件

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

09

文案语气与禁用清单

• 语气 自信、趣味且注重健康。
• 标题风格 粗体、大写、醒目的标题，常用巨大字号主导视觉层次。
• 按钮文案 行动导向且祈使式的文案，以全大写药丸形按钮呈现。

• 避免使用纤细衬线字体——截图显示的是粗体几何无衬线体和人文主义无衬线体。
• 避免将布局扁平化为严格网格——截图显示产品图像重叠浮动。
• 避免使用单色或灰暗配色方案——截图显示鲜艳的紫色和多彩的产品照片。
• 避免在标题中使用小写句首大写——截图显示激进的大写文字转换。
• 避免交互元素使用尖锐、无圆角的边角——截图显示充足的药丸形状。
• 避免主导航中无色彩——截图显示深色背景配以鲜艳文字和点缀色。
• 避免: 纤细的衬线体排版。
• 避免: 灰暗、单色或完全灰度的配色方案。
• 避免: 僵化、网格密集而无重叠或浮动元素的布局。
• 避免: 微妙、低调的品牌标识。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko