← OpenDesign CURATED · OPEN · FREE
Cardsagainsthumanity
A minimalist, starkly contrasted e-commerce site for the popular party game.
Playful Consumer Bold Typography Editorial Clean
01
Identity DNA
provocative irreverent adult party game minimalist
A stark black-and-white box of shocking jokes.
02
Color
#FFFFFFInk
#000000BG
#808080Muted
rgba(255, 255, 255, 1)Line
High-contrast black and white only, reflecting the physical product.
03
Typography
grotesque-sans
display 80px · 800heading 55px · 800subheading 40px · 800body 20px · 400small 14px · 40004
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Flexible grid based on 4px increments.
05
Surfaces
sm · 4px
md · 13px
lg · 20px
pill · 999px
2px solid #FFFFFF or #000000 depending on background
none
06
Layout
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
Centered content with generous whitespace.
07
Motion & Interaction
220ms micro
300ms small
400ms medium
cubic-bezier(0, 0, 0, 1) easing
Smooth scroll and hover transitions. · CSS transforms for card rotation.
Subtle underline for text links or slight background change. · Direct navigation.
08
Components
button Simple text links with underline or circular arrow icons. card Rotated white rectangles with black text mimicking physical playing cards. input Minimalist bottom-bordered text field. hero Scattered, overlapping physical card graphics on a stark black background. 09
Voice & Don'ts
Tone Irreverent, blunt, and intentionally provocative. Headlines Extremely large, bold, and lowercase or standard capitalization. CTAs Minimalist, direct, and unadorned. Don't use pastel or soft colors — the screenshot shows strict black and white. Don't use serif fonts — the screenshot shows a clean, bold sans-serif. Don't use drop shadows or soft gradients — the screenshot shows flat, high-contrast elements. Don't align cards in a rigid grid — the screenshot shows them casually scattered and rotated. Don't use conventional padding or margins — the screenshot shows generous, sometimes overlapping whitespace. Don't use rounded corners on primary elements — the screenshot shows sharp or slightly rounded rectangular cards. Avoid: Soft or pastel colors Avoid: Rounded friendly UI elements Avoid: Complex animations Avoid: Serif fonts Avoid: Conventional marketing jargon 10
Inside the pack — real screenshots
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 Captured from the live site · real computed styles
11
System prompt
A stark, irreverent e-commerce site for a party game. Uses a strictly high-contrast black and white palette (hex #000000 and #FFFFFF) with no accent colors. Typography is a bold grotesque-sans-serif (Helvetica Neue) at massive scales (up to 80px). Layouts feature scattered, overlapping card components rotated at angles. Critical don'ts: never use pastel colors, never use serif fonts, never use drop shadows, never align elements in a rigid grid, never use conventional soft UI, never use excessive padding.
More from the library en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: The site perfectly translates the physical, irreverent identity of the product into a clean, minimalist, and highly effective digital experience.
