---
title: "Cards Against Humanity design system"
variant: extended
source: https://www.cardsagainsthumanity.com/
captured_at: 2026-10-12
theme: light
industry: gaming
generator: Design DNA (https://four.wiralomi.com/style/cardsagainsthumanity-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Cards Against Humanity · Design System

> A stark black-and-white stage for irreverent play.

**Theme:** light · **Industry:** gaming · **Source:** https://www.cardsagainsthumanity.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A high-contrast storefront pairs stark black and white bands with irreverent copy and vivid product cards. Oversized sans-serif headlines, pill-shaped controls, and playful card imagery make the brand feel direct and mischievous.

## North star

Keep the interface stark and legible in black and white, then let irreverent copy and vivid card artwork provide the color and surprise.

## Overview

The visual system is built on a hard black-and-white contrast: black hero, shop, editorial, FAQ, and footer areas alternate with clean white explanation and signup bands. White and black do most of the work; measured yellow, purple, red, and bright card colours appear as compact accents or within campaign artwork rather than as a competing site-wide palette. Helvetica Neue LT carries the page in heavy, oversized headlines and dense, readable body copy, with no decorative tracking or uppercase treatment. Content sits in a centered, constrained frame, while section backgrounds stretch edge to edge. Product and campaign cards bring saturated colour, bold lettering, and hand-drawn or photographic details into the otherwise restrained interface. Rounded pill buttons and card corners soften the geometry; thin gray rules structure the FAQ. Spacing is comfortable and sections feel deliberately distinct, allowing punchy copy and imagery to set the pace.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | White content bands, card faces, footer, text on black, and outlined controls. |
| Ink Black | `#000000` | `--color-ink-black` | brand | Primary canvas for hero, shop, editorial, FAQ, footer, headings, and primary buttons. |
| Rule Gray | `#808080` | `--color-rule-gray` | neutral | Measured border tone; use for restrained separators and hairline details. |
| Brass Yellow | `#d7b73b` | `--color-brass-yellow` | accent | Small accent text or links; not a dominant section background. |
| Joke Violet | `#7333f1` | `--color-joke-violet` | accent | Accent link and campaign-copy color, including purple-toned card artwork. |
| Signal Red | `#fe2f2f` | `--color-signal-red` | accent | Attention-grabbing accent links and red campaign headline details. |
| Card Lemon | `#fffe5b` | `--color-card-lemon` | surface | Vivid yellow product or campaign card artwork, not a core page canvas. |
| Lavender Card | `#ede5ff` | `--color-lavender-card` | surface | Pale purple card background used in colorful campaign or product artwork. |
| Electric Blue | `#1b5bff` | `--color-electric-blue` | surface | Bright blue campaign-card artwork; keep it localized to illustrated content. |
| Pool Blue | `#a0e9ff` | `--color-pool-blue` | surface | Light cyan surface appearing on card artwork rather than the core interface. |
| Bubblegum Pink | `#ffa0f0` | `--color-bubblegum-pink` | surface | Saturated pink product-card backdrop that adds contrast within the shop carousel. |
| Acid Green | `#b4ff91` | `--color-acid-green` | surface | Bright green product-card backdrop in the shop artwork. |
| Tangerine Card | `#ff9559` | `--color-tangerine-card` | surface | Orange illustration or card-art colour; not a recurring interface surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Ink Black) · `--color-surface-2` → `#ede5ff` (Lavender Card) · `--color-surface-3` → `#a0e9ff` (Pool Blue) · `--color-text` → `#000000` (Ink Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#808080` (Rule Gray) · `--color-accent` → `#d7b73b` (Brass Yellow) · `--color-accent-2` → `#7333f1` (Joke Violet) · `--color-accent-3` → `#fe2f2f` (Signal Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#ede5ff` | 17.25:1 | AAA |
| `#000000` | `#a0e9ff` | 15.59:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#ede5ff` | 1.22:1 | fail |
| `#ffffff` | `#a0e9ff` | 1.35:1 | fail |
| `#d7b73b` | `#ffffff` | 1.96:1 | fail |
| `#d7b73b` | `#000000` | 10.73:1 | AAA |
| `#d7b73b` | `#ede5ff` | 1.61:1 | fail |
| `#d7b73b` | `#a0e9ff` | 1.45:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica Neue LT | `--font-body` | webfont | 400, 800 | Primary family for headlines, body copy, links, buttons, and card text. | Arial |
| Helvetica Neue | `--font-helvetica-neue` | system | 700 | Minor system-font fallback for bold text. | Arial |

- **Helvetica Neue LT:** Use measured regular and extra-bold weights; headlines are large and compact, with neutral tracking and sentence case.
- **Helvetica Neue:** Use as a close fallback; retain strong weight and simple, unembellished lettering.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 800 | 1 | 0 | — | Helvetica Neue LT | Oversized hero or campaign display messaging. |
| h1 | 65px | 800 | 1 | 0 | — | Helvetica Neue LT | Primary section headings such as shop and editorial titles. |
| h2 | 55px | 800 | 0.98 | 0 | — | Helvetica Neue LT | Large secondary section headlines. |
| h3 | 40px | 800 | 1.05 | 0 | — | Helvetica Neue LT | Subsection titles and prominent campaign-card headings. |
| h4 | 28px | 400 | 1.29 | 0 | — | Helvetica Neue LT | Introductory or supporting explanatory copy. |
| body | 20px | 800 | 1.3 | 0 | — | Helvetica Neue LT | Bold body emphasis and concise supporting statements. |
| caption | 14px | 800 | 1 | 0 | — | Helvetica Neue LT | Small labels, card metadata, and compact supporting notes. |
| button | 14px | 800 | 1 | 0 | — | Helvetica Neue LT | Short, bold action labels on pill controls. |
| link | 28px | 400 | 1.29 | 0 | — | Helvetica Neue LT | Prominent inline editorial links and action text. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 5, 10, 12, 15, 20, 30, 32, 40, 50, 90, 160 px.
- Section rhythm 90px · element gap — · card padding — · max content width 1260px.

Use full-width alternating black and white section bands, with inner content constrained to the measured 1260px maximum width. The hero is a single-column, media-led black canvas; explanatory and signup content sit in narrower, left-aligned reading columns. Shop products form a horizontal, colorful card row, while campaign cards and footer links use compact multi-column arrangements. Keep section spacing comfortable, with a measured 90px section gap where applicable. The overall density is moderate: large headlines and whitespace offset busy card artwork and the long FAQ.

## Shape & elevation

- Radius: button `9999px` · card `13px` · link `9999px` · xs `10px` · sm `13px` · md `20px` · pill `9999px`
- Shadow `inset` (button, link, footer): `rgb(0, 0, 0) 0px 0px 0px 2px inset`
- Shadow `inset-2` (button): `rgb(255, 255, 255) 0px 0px 0px 2px inset`
- Motion: standard transition `0.2s ease` on interactive elements.

Favor flat black or white section surfaces over layered UI. Cards use measured rounded corners, while FAQ rows are separated by thin gray rules. Buttons are pill-shaped and may use a subtle inset outline treatment; avoid soft drop shadows, elaborate gradients, or excessive depth.

## Imagery

Use product packaging, playing-card visuals, and campaign artwork as the main visual material. Cards are bright, highly legible, and often combine bold typography with illustrative or photographic details; the shop row can feel like a horizontally browsable carousel. Keep surrounding UI spare so artwork and irreverent copy stand out. Avoid generic lifestyle photography as a substitute for the distinctive game and campaign visuals.

## Components

### Primary pill CTA

Black fill, white bold label, pill radius, and a subtle inset black outline treatment; use for purchase and download actions.

### Product card carousel

A horizontal row of colorful card faces with rounded corners, packaging imagery, bold copy, and embedded action labels.

### Editorial download block

White background, large black heading, narrow explanatory text column, small playful badge, and paired download prompt and CTA.

### Campaign cards

Bright compact cards with short labels, oversized colored headlines, and illustration or photographic details.

### FAQ accordion

Black section with bold white questions, thin gray horizontal rules, plus controls, and a white pill-shaped Expand All action.

### Email signup

White section with a large bold headline, outlined email field, arrow action, and a small reassurance note.

### Multi-column footer

White background, compact black wordmark, underlined link lists, social links, and a small email signup.

### Measured component styles

- **Primary button** (“Buy Now”): background #000000 · text #ffffff · radius 64px · padding 0px 40px · 800 24px Helvetica Neue LT · shadow rgb(0, 0, 0) 0px 0px 0px 2px inset
- **Secondary button** (“Expand All”): background #ffffff · text #000000 · radius 80px · padding 0px 60px · 800 28px Helvetica Neue LT · shadow rgb(255, 255, 255) 0px 0px 0px 2px inset
- **Link** (“webstore”): transparent background · text #ffffff · radius 0px · padding 0px · 400 28px Helvetica Neue LT
- **Input**: transparent background · text #000000 · radius 0px · padding 0px · 400 20px Helvetica Neue LT
- **Card** (“How many bagels I can fit on my penis.”): background #ffffff · text #ffffff · border 2px solid #000000 · radius 13px · padding 0px · 400 20px Helvetica Neue LT

## Do

- Alternate black and white full-width section bands.
- Use bold Helvetica-style headlines with compact line spacing.
- Keep core controls black or white with high-contrast labels.
- Reserve vivid colors for product and campaign artwork.
- Use rounded pills for prominent actions.
- Structure long FAQ content with fine horizontal rules.

## Don't

- Do not wash the whole interface in bright accent colors.
- Do not replace the bold typography with delicate display fonts.
- Do not add gradients or decorative shadow-heavy panels.
- Do not crowd the explanatory text column with extra decoration.
- Do not make product artwork look like generic stock photography.
- Do not use uppercase styling as a default.

## Agent prompt

Build a new Cards Against Humanity-style page with a stark, high-contrast foundation. Use Ink Black (#000000) and Gallery White (#ffffff) for alternating full-width sections, readable text, and primary actions; keep Rule Gray (#808080) for restrained dividers. Set bold Helvetica Neue-style headlines and plain, legible body text, with oversized section titles and no ornamental tracking. Use pill-shaped buttons and rounded cards. Place colorful product imagery in focused card rows, drawing on Card Lemon (#fffe5b), Lavender Card (#ede5ff), Electric Blue (#1b5bff), Bubblegum Pink (#ffa0f0), and Acid Green (#b4ff91) only where artwork calls for color. Keep copy irreverent, layouts uncluttered, and section spacing comfortable. Build responsive columns that collapse cleanly without losing the alternating section rhythm or strong type hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width black, single-column hero with card imagery and prominent brand title. | brand introduction, immersive first impression | black canvas, large white title, scattered card imagery |
| 2 | feature-split | White full-width band with a narrow, centered text column and scattered small illustrations. | explain the game, readable introduction | black body text, playful floating icons, open whitespace |
| 3 | product-grid | Black band with a bold heading and horizontally arranged colorful product cards. | browse products, quick purchase actions | product carousel, bright card backgrounds, pill CTAs |
| 4 | feature-split | White background with a left-aligned narrow text block and paired download controls. | download free game, explain printing requirements | bold heading, playful download badge, black pill button |
| 5 | content-feed | Black band with a section heading and a compact row of bright campaign cards. | discover past projects, open project stories | colorful editorial cards, bold colored headlines, small Read links |
| 6 | newsletter | White band with a large headline above a wide outlined email field. | email signup, privacy reassurance | bold headline, arrow submit control, small reassurance text |
| 7 | faq | Black FAQ section with a question row, answer content, and plus control. | expand answer, self-service support | white bold question, thin divider, plus icon |
| 8 | faq | Black FAQ section with a bold question, answer, and inline link. | expand answer, follow support link | white text, thin divider, plus control |
| 9 | faq | Black, single-column accordion list with multiple questions and a white Expand All pill. | expand individual answers, expand all questions | stacked question rows, gray rules, plus icons, white pill action |
| 10 | footer | White footer in four columns with brand mark, navigation lists, social links, and compact signup. | navigate site, follow social accounts, join email list | small underlined links, compact wordmark, email field, legal links |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/cardsagainsthumanity-com