精选 · 开放 · 免费
Cardsagainsthumanity
一款极简、对比强烈的热门派对游戏电商网站。
PlayfulConsumerBold TypographyEditorialClean
01
设计气质 DNA
挑衅不羁成人派对游戏极简主义
一个装满惊人笑话的黑白分明盒子。
02
色彩
#FFFFFFInk
#000000BG
#808080Muted
rgba(255, 255, 255, 1)Line
仅使用高对比度的黑白两色,呼应实体产品。
03
字体
grotesque-sans
- display
80px · 800 - heading
55px · 800 - subheading
40px · 800 - body
20px · 400 - small
14px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于4px增量的弹性网格。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 13px
lg · 20px
pill · 999px
根据背景使用2px solid #FFFFFF或#000000
无
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
内容居中,留有充裕留白。
07
动效与交互
220msmicro
300mssmall
400msmedium
cubic-bezier(0, 0, 0, 1)easing
平滑滚动与悬停过渡。 · 用于卡片旋转的CSS transform。
文本链接的细微下划线或轻微背景变化。 · 直接导航。
08
组件
- button 带下划线或圆形箭头图标的简洁文本链接。
- card 旋转的白色矩形,配黑色文字,模仿实体扑克牌。
- input 底部带边框的极简文本输入框。
- hero 在纯黑背景上散落、重叠的实体卡片图形。
09
文案语气与禁用清单
- 语气 不羁、直白且有意为之的挑衅。
- 标题风格 超大号、加粗,采用小写或标准大写形式。
- 按钮文案 极简、直接、不加修饰。
- 不要使用粉彩或柔和颜色——截图显示为严格的黑白配色。
- 不要使用衬线字体——截图显示为干净、加粗的无衬线字体。
- 不要使用投影或柔和渐变——截图显示为扁平、高对比度元素。
- 不要将卡片排列在严格网格中——截图显示其随意散落和旋转。
- 不要使用常规内边距或外边距——截图显示为宽裕、有时重叠的留白。
- 不要在主要元素上使用圆角——截图显示为直角或略带圆角的矩形卡片。
- 避免: 柔和或粉彩颜色
- 避免: 圆润友好的UI元素
- 避免: 复杂动画
- 避免: 衬线字体
- 避免: 传统营销术语
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
一个风格鲜明、不羁的派对游戏电商网站。使用严格高对比度的黑白配色(十六进制码#000000和#FFFFFF),不含强调色。字体采用加粗的 grotesque-sans-serif(如Helvetica Neue),字号巨大(可达80px)。布局特点是散落、重叠的卡片组件,并带有旋转角度。关键禁忌:绝不使用粉彩颜色,绝不使用衬线字体,绝不使用投影,绝不将元素排列在严格网格中,绝不使用常规柔和UI,绝不使用过多内边距。
en · zh-CN · zh-TW · ja · ko