# Climatecatastrophepack · Design system migration spec

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

> A prime example of using extreme typography and high contrast to convey a satirical, urgent message for a product launch.

## 1. Identity DNA

The Climatecatastrophepack system operates like a satirical emergency broadcast, using design language to hijack attention with the urgency of a breaking news alert. Its identity is built on the tension between charitable intent and apocalyptic presentation, creating an irreverent tone that feels both bold and deliberately uncomfortable.

**One-liner:** Bold, irreverent product launch page using high-contrast typography and urgent red accents on a dark canvas.
**Keywords:** irreverent · apocalyptic · satirical · bold · charitable
**Analogy:** A satirical emergency broadcast system for a product launch.

## 2. Color

The palette is a study in stark contrast, built on a duotone foundation of pure black and off-white. A singular, high-chroma red serves as the sole accent, deployed exclusively to signal urgency and command focus.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-quiet` | `#E4E4D8` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#E4E4D8` | placeholder |
| `--accent` | `#FF4034` | single accent |
| `--line` | `rgba(255, 64, 52, 1)` | divider |

**Color principle:** High-contrast duotone with a stark black base and a singular, urgent red accent.

This discipline ensures the red retains its power as a signal, never diluting the system's high-contrast principle.

## 3. Typography

Typographic voice is defined by sheer scale and condensed forms, with massive sans-serif headlines in a heavy weight asserting dominance. Body text uses a clean humanist-sans to provide necessary readability without softening the overall impact.

- **Display:** condensed-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 201.6px | 0.85 | 800 | -2px | Main headline |
| h1 | 40px | 1.0 | 800 | -1px | Section header |
| body | 16px | 1.5 | 400 | 0 | Body text |

## 4. Spacing

Generous vertical padding establishes a deliberate, almost slow rhythm, allowing the aggressive typography space to breathe and assert its scale.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** generous

## 5. Surfaces

Depth is conveyed through a single, hard shadow rather than soft gradients, reinforcing the system's flat, high-contrast ethos. Borders are consistently 2px solid, creating clear, unambiguous separation between content areas.

- **Radius:** sm 4px · md 8px · lg 12px · pill 2520px
- **Shadows:**
  - rgba(0, 0, 0, 0.17) 0px 4.18px 8.36px 0px
- **Borders:** 2px solid

## 6. Layout

The layout skeleton is a strict centered column, focusing all content down a single, inescapable vertical axis. This structure provides a clean stage for the massive typography and generous spacing to perform without spatial competition.

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

**Skeleton:** centered-column

## 7. Motion & Interaction

Interaction is purposefully minimal, relying on hover-scale transforms and cubic-bezier transitions to provide kinetic feedback. The motion philosophy favors abrupt, purposeful shifts over smooth animations, aligning with the system's urgent, broadcast-like character.

- **Durations:** micro 50ms · small 200ms · medium 500ms
- **Easing:** `cubic-bezier(0.5, 0, 0, 1)`
- **Patterns:**
  - hover-scale
  - text-strike-through

- **Hover:** scale-transform on interactive elements
- **Click:** scale-transform on interactive elements
- **Transition:** all 0.2s cubic-bezier(0.5, 0, 0, 1)
- **Keyboard:** standard focus

## 8. Voice & Don'ts

Editorial voice is satirical and urgent, rejecting polite or corporate tones in favor of bold, condensed uppercase headlines that mimic emergency messaging. The deliberate avoidance of subtlety, minimalism, and corporate safety defines its irreverent character as much as its choices.

- **Tone:** satirical, urgent, irreverent
- **Headline style:** bold condensed uppercase
- **CTA style:** pill-shaped with bold condensed text
- **Avoid:** subtle / polite / minimalist / corporate / safe

### Don'ts
- ❌ don't use subtle gradients — screenshot shows flat, high-contrast black and red
- ❌ don't use delicate serif fonts — screenshot shows massive condensed sans-serif headlines
- ❌ don't use soft shadows — screenshot shows hard edges and flat UI elements
- ❌ don't use wide letter-spacing — screenshot shows tightly tracked condensed type
- ❌ don't use a muted color palette — screenshot shows stark black, off-white, and vivid red
- ❌ don't use rounded rectangles — screenshot shows pill shapes and hard edges

The system deliberately excludes delicate serifs, soft gradients, and muted palettes, committing fully to its high-contrast, apocalyptic premise.

## System Prompt (paste into AI tool)

```
Design an irreverent, high-contrast product launch page for a satirical card game pack. Use a stark black background (#000000) and off-white (#E4E4D8) for text and surfaces, with a single high-chroma red accent (#FF4034) for urgency. Typography must be dominated by massive, condensed sans-serif display fonts (800 weight) for headlines and a clean humanist-sans for body text. Do not use soft shadows, subtle gradients, or wide letter-spacing. The layout should be centered with generous padding and a clear vertical rhythm. Use pill-shaped buttons and hazard-themed iconography. Critically avoid polite or corporate tones; the design must feel bold, chaotic, and intentionally overwhelming.
```
