精选 · 开放 · 免费
Giganticcandy
一个受都市风格启发的糖果品牌电商网站,运用超大展示字体与高对比度布局。
ConsumerProductBold TypographyPlayfulEditorial
01
设计气质 DNA
趣味涂鸦都市精致糖果
滑板公园贴纸美学与高端糖果品牌风格的结合。
02
色彩
#FF634BAccent
#231F20Ink
#F0EDE7BG
#FFFFFFBG soft
rgba(35, 31, 32, 1.0)Line
高对比度,以单色系为主,搭配一处高饱和度的点缀色(番茄红),并战略性运用纯白与纯黑。
03
字体
geometric-sans · humanist-sans
- display
96px · 700 - heading
48px · 700 - body
16px · 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
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个受都市风格启发的糖果品牌电商网站,以超大展示字体与高对比度配色为特征。主背景为暖调米白(#F0EDE7),墨黑(#231F20)用于所有文字与边框。一处高饱和度的点缀色——鲜艳的番茄红(#FF634B)——被克制地用于强调与行动号召。字体排印主要依赖几何与无衬线字体族,标题与正文始终采用大写,以保持强有力、统一的语调。关键设计约束:避免使用精致或纤细的字体,切勿使用柔和或粉彩的配色方案,并为核心内容区块保持严格的单栏布局。
en · zh-CN · zh-TW · ja · ko