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

# Cards Against Humanity — Climate Catastrophe Pack · Design System

> A climate-crisis campaign with a sharp comedic edge

**Theme:** light · **Industry:** ecommerce · **Source:** https://www.climatecatastrophepack.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 dramatic, black-led product landing page pairs oversized condensed headlines with irreverent copy and vivid red campaign graphics. A warm cream band breaks the dark narrative for a location-based discount form and an extensive FAQ.

## North star

Build the page as a sequence of bold, centered campaign moments, using cream and red to punctuate a black canvas without softening the condensed editorial typography.

## Overview

The page uses a stark palette to make the campaign feel urgent but irreverent: black is the dominant field, warm cream carries readable display type and content, and vivid red marks the product campaign, selected headings, and flame-like artwork. Helvetica Neue LT handles compact, heavy body copy and links, while Spektra supplies the tall, condensed display voice for the oversized all-caps hero and section headings. The layout is a centered, single-column story rather than a conventional shop grid: a full-bleed black opening leads into explanatory copy, a striking red product band, a cream discount panel, a black tree-planting section, and a cream FAQ. Product-card imagery and illustrated motifs are treated as campaign artwork, not as a separate color system. Generous vertical pauses give each block room to land, while the FAQ switches to a tighter, left-aligned reading column. Controls stay simple and pill-shaped, keeping the copy and graphics in focus.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Campaign Ink | `#000000` | `--color-campaign-ink` | surface | Dominant hero and content-section background; also the main text and CTA fill. |
| Warm Parchment | `#ebe4d8` | `--color-warm-parchment` | neutral | Display text on black, the discount and FAQ backgrounds, and pale button surfaces. |
| Card Hairline | `#ffffff` | `--color-card-hairline` | semantic | Thin outline around the circular discount card; not a defining canvas color. |
| Catastrophe Red | `#ff4034` | `--color-catastrophe-red` | accent | Product campaign band, flame illustration, and selected section headings and graphic marks. |

### Semantic aliases

`--color-canvas` → `#ebe4d8` (Warm Parchment) · `--color-surface` → `#000000` (Campaign Ink) · `--color-text` → `#000000` (Campaign Ink) · `--color-text-muted` → `#ebe4d8` (Warm Parchment) · `--color-border` → `#ffffff` (Card Hairline) · `--color-accent` → `#ff4034` (Catastrophe Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ebe4d8` | 16.62:1 | AAA |
| `#ebe4d8` | `#000000` | 16.62:1 | AAA |
| `#ff4034` | `#ebe4d8` | 2.75:1 | fail |
| `#ff4034` | `#000000` | 6.03:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica Neue LT | `--font-body` | webfont | 400, 800 | Body copy, FAQ text, and prominent links. | Helvetica or Arial |
| Spektra | `--font-display` | webfont | 400 | Hero display lettering, section headings, and large pill-button labels. | Anton |

- **Helvetica Neue LT:** Compact sans-serif; body and links use weight 800, while supporting text uses regular weight. Keep copy direct and readable.
- **Spektra:** Use as a highly condensed display face; hero and major headings are uppercase, with tight line stacking and no added tracking.

### Type scale — Custom (ratio ≈ 1.705, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 201.5px | 400 | 0.82 | 0 | uppercase | Spektra | Oversized, tightly stacked uppercase hero title. |
| h1 | 100px | 400 | 1 | 0 | uppercase | Spektra | Large uppercase campaign and section headings. |
| h2 | 40px | 400 | 1 | 0 | — | Spektra | Product, planting, and other secondary section headings. |
| h3 | 32px | 400 | 0.88 | 0 | — | Spektra | Compact display headings within content blocks. |
| h4 | 30px | 800 | 1.27 | 0 | — | Helvetica Neue LT | FAQ questions and emphasized supporting subheads. |
| body | 14px | 800 | 1.29 | 0 | — | Helvetica Neue LT | Dense explanatory copy and FAQ answers. |
| link | 28px | 800 | 1.29 | 0 | — | Helvetica Neue LT | Bold inline links and discount-related copy. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 7, 8, 15, 20, 25, 29, 30, 40, 60, 80, 100 px.
- Section rhythm 80px · element gap — · card padding — · max content width 867px.

Use a centered, single-column composition with a measured page max width of 867px for the main content. The opening hero is visually full-bleed and centered; subsequent sections alternate broad color fields rather than introducing a multi-column site grid. Keep substantial vertical separation between campaign chapters, then tighten the rhythm within paragraphs and FAQ entries. The FAQ is left-aligned for scanning, while its section title remains centered. Let product graphics, circular discount artwork, and text blocks overlap or sit within their own broad bands as shown, without adding unrelated cards or navigation chrome.

## Shape & elevation

- Radius: button `50%` · input `10px` · card `50%` · pill `9999px`
- Shadow `md` (button): `rgba(0, 0, 0, 0.17) 0px 4.1804px 8.3608px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The design is mostly flat: large color bands, typography, and artwork create hierarchy instead of stacked surfaces. Use the measured white hairline only where the discount card needs an outline. Buttons are pill-shaped and primarily solid black or cream, without conspicuous shadow treatment; avoid adding card shadows or layered dashboard styling.

## Imagery

The page relies on supplied campaign artwork and card/product imagery rather than conventional lifestyle photography. Use bold, flat graphic elements such as the red flame border, card mockup, circular map-like discount illustration, and small decorative marks. Keep imagery high contrast and integrated with section backgrounds; the hero lettering itself is the main visual. Illustration colors should not be mistaken for extra brand tokens.

## Components

### Hero title

Centered oversized uppercase Spektra lettering in warm cream on black; treat the title as the primary artwork.

### Campaign product band

Bright red section combines the product-card image and campaign copy, ending with a black pill CTA labeled for the purchase.

### Discount lookup

Cream circular graphic interrupts the red-to-black transition; pair its condensed uppercase heading with explanatory copy and a black-bordered zip-code input.

### Pill CTA

Large Spektra label inside a fully rounded black or cream button; use the contrasting page color for its text.

### Planting message

Black section centers a red display heading, short supporting paragraph, and cream pill for the seed-planting guide.

### FAQ list

Warm cream reading surface with centered red title, left-aligned question-and-answer entries, bold display questions, and inline links.

### Measured component styles

- **Primary button** (“Click for cards! Hide the cards!”): background #000000 · text #ebe4d8 · radius 120px · padding 7px · 400 32px Spektra
- **Secondary button** (“SEED PLANTING GUIDE”): background #ebe4d8 · text #000000 · radius 80px · padding 0px 60px · 400 40px Spektra · uppercase
- **Link** (“We’ll give you a pity discount if your a”): transparent background · text #000000 · radius 0px · padding 0px · 800 28px Helvetica Neue LT
- **Input**: transparent background · text #000000 · border 2px solid #000000 · radius 10px · padding 0px 20px 6px 20px · 400 40px Spektra · uppercase
- **Card** (“GET UP TO 50% OFF IF YOUR AREA WILL BE S”): transparent background · text #000000 · border 2px solid #ffffff · radius 2520px · padding 0px · 400 16px Helvetica Neue LT

## Do

- Keep the opening and major story sections on solid black.
- Reserve warm cream for legible text and the FAQ and discount surfaces.
- Use red as a focused campaign accent, not a general UI color.
- Set major headlines in condensed, tightly stacked uppercase display type.
- Center campaign blocks and switch FAQ content to left alignment.
- Use supplied card and illustration artwork as page-specific campaign assets.

## Don't

- Do not add gradients or unmeasured palette colors.
- Do not turn the page into a conventional product grid.
- Do not use soft shadows to create interface depth.
- Do not spread red across body text or unrelated controls.
- Do not loosen the display typography with extra tracking.
- Do not compress FAQ copy into decorative cards.

## Agent prompt

Build a campaign landing page in the Cards Against Humanity Climate Catastrophe style. Use Campaign Ink (#000000) as the main field, Warm Parchment (#ebe4d8) for high-contrast type and the FAQ/discount surfaces, and Catastrophe Red (#ff4034) for a single bold product band and campaign artwork. Set oversized condensed uppercase headlines in a Spektra-like display face; use a heavy Helvetica-like sans for copy and links. Structure the page as centered, single-column story sections with generous vertical breaks, then a compact left-aligned FAQ. Integrate product-card and flat illustrated assets into the sections rather than building a generic ecommerce grid. Keep controls pill-shaped, forms simple, and surfaces mostly flat. Use white (#ffffff) only for a measured fine outline when appropriate. Preserve the blunt, playful editorial voice and prioritize readability over decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed black field with centered brand label and enormous stacked title. | Immediate campaign identification, Display-led entry | Cream condensed uppercase title, Centered composition, Dark canvas |
| 2 | other | Centered paragraphs in a narrow reading block on black. | Campaign context, Inline supporting link | Heavy compact body copy, Centered alignment, Black background |
| 3 | product-showcase | Product artwork and purchase copy share a vivid campaign band. | Card reveal toggle, Direct purchase action, Discount message | Red campaign field, Product-card imagery, Black pill CTA |
| 4 | other | Large circular cream discount panel bridges red and black sections. | Zip-code lookup, Location-based discount | Condensed uppercase heading, Outlined input, Circular illustrated panel |
| 5 | feature-split | Centered text and CTA within a black section, decorated with small graphics. | Charity explanation, Seed-planting guide link | Red display heading, Cream CTA pill, Black canvas |
| 6 | faq | Short cream transition band with a centered red heading. | FAQ section signpost | Parchment background, Centered condensed heading |
| 7 | faq | Long, left-aligned question-and-answer column on warm cream. | Scannable question sequence, Inline reference links | Bold condensed questions, Sans-serif answers, Small red graphic markers |

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