OpenDesign·你的设计资产库

网页参考

Giganticcandy

一个受都市风格启发的糖果品牌电商网站,运用超大展示字体与高对比度布局。

ConsumerProductBold TypographyPlayfulEditorial
Giganticcandy 网站截图

01

设计气质 DNA

趣味涂鸦都市精致糖果

滑板公园贴纸美学与高端糖果品牌风格的结合。

02

色彩

#FF634BAccent
#231F20Ink
#F0EDE7BG
#FFFFFFBG soft
rgba(35, 31, 32, 1.0)Line

高对比度,以单色系为主,搭配一处高饱和度的点缀色(番茄红),并战略性运用纯白与纯黑。

03

字体

geometric-sans · humanist-sans

  • display96px · 700
  • heading48px · 700
  • body16px · 400

展示字体与标题采用大写转换。 · 正文行高设置为 1.8,确保可读性。 · 大型展示文字采用紧凑的字间距。

04

间距

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

垂直节奏基于 4px 网格,较大区块采用充足的内边距。

05

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

sm · 2px
md · 10px
lg · 12px
pill · 999px

使用主墨黑色绘制 1px 实线边框。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

内容采用居中的单栏布局,首屏图像可通栏展示。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing

hover 状态采用平滑过渡 · 首屏元素采用视差或缓慢淡入效果

按钮采用微妙的透明度变化或颜色反转。 · 反馈最小化,依赖标准的光标变化。

08

组件

  • button 黑色实心背景搭配白色大写文字,或使用墨黑色描边样式。
  • card 产品卡片在简洁的白色背景上展示产品图片。
  • hero 全视口区块,采用大型、氛围感的摄影背景与居中的大胆排版。

09

文案语气与禁用清单

  • 语气 趣味、大胆且略带不羁。
  • 标题风格 简短、有力,始终采用大写。
  • 按钮文案 直接且注重行动,常使用「购买」或「探索」。
  • 勿使用小巧精致的字体——截图显示应使用大型、粗壮的展示字体。
  • 勿使用柔和、粉彩的配色——截图显示应使用高对比度的黑、白与红橙配色。
  • 勿使用复杂的多栏布局——截图显示应使用干净、居中的单栏布局。
  • 勿使用圆润、气泡化的形状——截图显示应使用棱角分明、以矩形为主的元素。
  • 勿使用微妙、隐藏式的导航——截图显示应使用清晰、固定的页眉与明显的链接。
  • 勿使用衬线字体作为标题——截图显示应使用几何与无衬线的字体。
  • 避免: 正式或企业化的语言
  • 避免: 微妙或低调的表述
  • 避免: 小巧、低调的字体排印

10

包内真实截图

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

11

System Prompt

这是一个受都市风格启发的糖果品牌电商网站,以超大展示字体与高对比度配色为特征。主背景为暖调米白(#F0EDE7),墨黑(#231F20)用于所有文字与边框。一处高饱和度的点缀色——鲜艳的番茄红(#FF634B)——被克制地用于强调与行动号召。字体排印主要依赖几何与无衬线字体族,标题与正文始终采用大写,以保持强有力、统一的语调。关键设计约束:避免使用精致或纤细的字体,切勿使用柔和或粉彩的配色方案,并为核心内容区块保持严格的单栏布局。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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