Acd Remix Stripe X A24 Design

---
name: acd-remix-stripe-x-a24-design
description: "Remix. Stripe's grid + A24's poster boldness. For pitch decks, investor sites, premium fintech that needs to feel less corporate. Use when building UI components, applying design tokens, or implementing visual styles for remix stripe x a24."
license: CC-BY-NC-SA-4.0
metadata:
  risk: unknown
  source: community
  kind: mode
  category: design-systems
  tags: [design-system, ui, remix, claude-design]
---

# Stripe × A24 — Fintech Pitch With Personality Design Mode

You are an expert in the Stripe × A24 — Fintech Pitch With Personality aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.

## Source DESIGN.md

Remix. Stripe's grid + A24's poster boldness. For pitch decks, investor sites, premium fintech that needs to feel less corporate.

## Parent DNA: Stripe 50% · A24 50%

## 1. Visual Theme & Atmosphere

Stripe geometry holds the page; A24 makes the hero feel like a film poster. Layout is rigorously gridded, but headlines run oversized in A24's editorial display serif and sit on full-bleed image plates. CTAs stay Stripe — the trust signal cannot break.

Mood: confident, cinematic, financial-trust-preserving.

## 2. Color Palette & Roles

```
/* base from Stripe */
--bg:              #ffffff
--bg-alt:          #f6f9fc
--surface:         #ebeef3
--text:            #0a2540   /* Stripe deep navy */
--text-muted:      #425466
--border:          #e3e8ee

/* dark from A24 — film-poster black */
--bg-dark:         #000000
--bg-dark-alt:     #0a0a0a
--text-dark:       #ffffff
--text-dark-muted: rgba(255,255,255,0.72)

/* accent from Stripe — preserves trust */
--accent:          #635bff
--accent-hover:    #5048e5

/* accent from A24 — used on dark-mode hero only */
--accent-warm:     #f4ede4   /* warm cream — A24 print-stock palette */
--accent-pop:      #d9351c   /* deep film red — used once per page max */
```

Arbitration: A24's iconic black background wins on hero plates. Stripe's white wins on app, pricing, docs. Stripe purple stays as primary CTA across both modes — replacing it kills the fintech trust signal. A24 red is allowed once per page as a callout (asterisk, sale tag, single label).

## 3. Typography Rules

- **Display / hero h1:** `Söhne Breit` weight 600 OR a free A24-adjacent display serif like `Fraunces` weight 600 — set at 96px+ for poster effect.
- **h2–h4 + body:** `Söhne` (Stripe). Weight 400/500/600.
- **UI labels + pricing tables:** `Söhne Mono` for numerals.

Scale: Stripe's marketing ramp, extended at the top for A24 hero. 12 / 14 / 16 / 18 / 22 / 28 / 36 / 56 / 96 / 144.

Display serif allowed at 56px+ only. Anything smaller stays Söhne for legibility.

## 4. Component Stylings

**Buttons**
- Primary: `--accent` (Stripe purple) fill, white text, radius 6, padding 10/16, weight 500.
- Secondary on white: `--text` color, 1px `--border`, white fill.
- Secondary on black: `--text-dark`, 1px `rgba(255,255,255,0.24)`, transparent fill.

**Hero plates**
- Full-bleed black panel (`--bg-dark`), display serif headline, single image or generative still. Stripe's grid still holds — text starts at column 2, ends at column 11.

**Cards**
- Stripe pattern: `--bg` fill, 1px `--border`, radius 12, no shadow.
- On dark hero: cards drop to `--bg-dark-alt` with 1px `rgba(255,255,255,0.12)`.

**Inputs**
- Stripe geometry: `--surface` fill, 1px `--border`, radius 6, padding 10/12.
- Focus: 2px `--accent` ring, 2px offset.

**Pricing tables**
- Söhne Mono numerals tabular. Header row in display serif at 36px. Body rows Söhne 14px.

## 5. Layout Principles

Stripe's grid governs everything.

- Marketing: 1180px max, 24px gutter, 12-col.
- App: 1440px max app shell.
- 4px base. 4/8/12/16/24/32/48/64/96/144 scale.

A24 contribution: full-bleed image / black panels break the column grid horizontally — vertical rhythm still respects 8px multiples.

## 6. Depth & Elevation

Flat. Border depth on light, alpha-border on dark. Shadows reserved for popovers (`0 4px 12px rgba(10,37,64,0.08)` on light, `0 12px 32px rgba(0,0,0,0.7)` on dark hero).

A24 contributes no shadows — its design is fundamentally print, not screen-elevated.

## 7. Do's and Don'ts

**Do**
- Use display serif at 56px+ on full-bleed black plates.
- Keep Stripe purple CTA across both light and dark surfaces — never substitute.
- Cap A24 red to one label per viewport.
- Render pricing in Söhne Mono tabular.

**Don't**
- Use display serif for body or UI controls.
- Add a third chromatic accent.
- Replace Stripe purple with A24 red for CTA — fintech trust loss.
- Drop the grid for full-bleed art on dashboard / data screens.

## 8. Responsive Behavior

- Hero serif scales 144 → 96 → 64 → 48.
- Full-bleed black plates remain full-bleed at all breakpoints.
- Pricing tables collapse to per-tier cards below 768px.
- Stripe app shell collapses sidebar to overlay at 1024px.

## 9. Agent Prompt Guide

Bias: Stripe grid + Söhne UI everywhere, full-bleed black A24 hero plates, display serif at 56px+, Stripe purple as the only CTA color, A24 red sparingly, tabular pricing.

Reject: display serif in UI controls, A24 red as CTA, multi-color accent palettes, abandoning the column grid in app surfaces, pastel Stripe substitutes.

## Creative Tensions (documented for team)

- **Trust vs theatricality.** A24's poster aesthetic risks reading as marketing-only on a fintech surface. Solution: confine A24 contribution to hero / case-study / about pages — never on dashboard, pricing, or compliance copy.
- **Display serif legibility.** Below 56px the serif reads decorative. Enforce a hard size floor in tokens.

## Parent-brand DNA

Tokens traced:
- From Stripe: 22 (Söhne stack, navy `--text`, `--accent` purple, button geometry, card radius 12, marketing 1180 max, app 1440, focus ring, light surface palette, mono pricing)
- From A24: 19 (full-bleed black hero, display serif 56px+, cream secondary palette, single-label red, print-flat depth, edge-to-edge image plates)

Net DNA: Stripe 50% · A24 50%.

## When to Use This Mode

- When user references **stripe-x-a24** or the **remix** family as inspiration
- When building UI in the remix aesthetic
- When applying this brand's color palette, typography, or layout patterns
- When critiquing UI for adherence to this aesthetic