# Cardsagainsthumanity · Design system migration spec

> Source: https://www.cardsagainsthumanity.com  ·  Curated by OpenDesign  ·  en

> The site perfectly translates the physical, irreverent identity of the product into a clean, minimalist, and highly effective digital experience.

## 1. Identity DNA

The design system is built like the game itself: stripped to a binary, black-and-white confrontation. It rejects decorative softness in favor of a stark, minimalist frame that lets the provocative content perform without distraction.

**One-liner:** A minimalist, starkly contrasted e-commerce site for the popular party game.
**Keywords:** provocative · irreverent · adult party game · minimalist
**Analogy:** A stark black-and-white box of shocking jokes.

## 2. Color

The palette is absolute, employing only pure black (#000000) and pure white (#FFFFFF) to mirror the physical product's ink-on-card stock. This strict high-contrast principle ensures every element carries immediate visual weight and directness.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#FFFFFF` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--line` | `rgba(255, 255, 255, 1)` | divider |

**Color principle:** High-contrast black and white only, reflecting the physical product.

The commitment to a two-tone system is non-negotiable, rejecting any accent colors or gradients that would dilute the stark, confrontational clarity.

## 3. Typography

Typography operates as a bold, irreverent voice, using a clean grotesque sans-serif (Helvetica Neue) at massive scales. The typographic hierarchy ranges from 80px brand titles to fine print, all maintaining a blunt, lowercase-leaning presence that feels both editorial and intentionally unpolished.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 800 | -1px | Main brand title |
| heading | 55px | 1.0 | 800 | -1px | Section headings |
| subheading | 40px | 1.05 | 800 | -0.5px | Prominent call to actions |
| body | 20px | 1.3 | 400 | 0px | Primary body text |
| small | 14px | 1.0 | 400 | 0px | Navigation and fine print |

## 4. Spacing

Spacing follows a flexible 4px-increment grid, but its application is deliberately unconventional.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Flexible grid based on 4px increments.

## 5. Surfaces

Surfaces are defined by absence: no drop shadows, no soft gradients. Depth is communicated solely through stark, 2px solid borders in black or white, depending on the background, creating a flat, high-contrast interface where elements meet the page with sharp, uncompromising edges.

- **Radius:** sm 4px · md 13px · lg 20px · pill 999px
- **Shadows:**
  - none
- **Borders:** 2px solid #FFFFFF or #000000 depending on background

## 6. Layout

The layout skeleton centers content with generous whitespace but deliberately disrupts conventional alignment. Components, especially the card elements, are scattered and rotated at angles, mimicking a hand of cards tossed onto a table rather than organized in a rigid grid.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered content with generous whitespace.

## 7. Motion & Interaction

Motion is functional and restrained, serving direct physical metaphors. Smooth CSS transforms rotate card elements, while standard 0.2s–0.3s transitions handle hover states, avoiding complex animations that would undermine the system's blunt, minimalist ethos.

- **Durations:** micro 220ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0, 0, 0, 1)`
- **Patterns:**
  - Smooth scroll and hover transitions.
  - CSS transforms for card rotation.

- **Hover:** Subtle underline for text links or slight background change.
- **Click:** Direct navigation.
- **Transition:** 0.2s for text decoration, 0.3s for transforms.
- **Keyboard:** Standard browser defaults.

## 8. Voice & Don'ts

The editorial voice is irreverent, blunt, and intentionally provocative, matching the game's tone. CTAs are minimalist and direct, headlines are extremely large and bold, and the overall communication avoids all conventional marketing jargon.

- **Tone:** Irreverent, blunt, and intentionally provocative.
- **Headline style:** Extremely large, bold, and lowercase or standard capitalization.
- **CTA style:** Minimalist, direct, and unadorned.
- **Avoid:** Soft or pastel colors / Rounded friendly UI elements / Complex animations / Serif fonts / Conventional marketing jargon

### Don'ts
- ❌ 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.

The system deliberately does not accommodate pastel colors, rounded friendly UI elements, serif fonts, or the conventional padding that characterizes softer digital interfaces.

## System Prompt (paste into AI tool)

```
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.
```