# Cash App — Marketing Site Design Spec

> Source: cash.app (live DOM, computed styles), 2026-08-04 (desktop 1512px).
> Coverage: homepage. Dashboard: mobile app only (`needs-dashboard` — no web product). Screenshots blocked by 8 autoplaying videos; all stylesheets read (0 blocked) — full token/state/keyframe coverage.
> Reality check: the hint ("maximalist black + acid-green, video-game icon system") conflates the campaign art direction with the interface. The CHROME is disciplined and minimal — black `#000`, white `#fff` and ONE acid green `#00e013`, set in Cash Sans at weight 400 with tight negative tracking and pill buttons; there are zero shadows. The maximalist, playful "video-game" character lives entirely in the 8 full-bleed campaign VIDEOS and imagery, not in the CSS tokens.

## 1. Visual Theme & Atmosphere

Bold, confident consumer-fintech: a stark black-and-white canvas with one electric acid green doing every accent job, wrapped around full-bleed campaign video that carries all the colour and playfulness. The interface itself is remarkably restrained — one typeface (Cash Sans) at a single weight (400) with tight negative tracking, fully rounded pill buttons, and no shadows anywhere, so depth comes from bold black/white/green blocking and organic percentage-radius "squircle" cards. The result reads as premium-but-fun: the chrome is disciplined and grown-up while the surrounding video imagery is loud, pixel-art and irreverent. Feels: bold, confident, playful-via-imagery, flat.

## 2. Color Palette & Roles

### Text
| Token | Hex | Role / usage |
|---|---|---|
| black | `#000000` | Primary text, dark bands (dominant) |
| white | `#ffffff` | Text on dark, light bands |
| grey | `#999999` | Secondary text |
| grey-717 | `#717171` | Tertiary text |
| grey-hover | `#666666` | Link hover |

### Surfaces
| Token | Hex | Role / usage |
|---|---|---|
| white | `#ffffff` | Page bg, light sections, cards |
| black | `#000000` | Full-bleed dark bands, Log-in button |

### Accent
| Token | Hex | Role / usage |
|---|---|---|
| green | `#00e013` | Signature acid green — primary CTA fill (with black text) |
| green-focus | `#00d632` | Focus-ring green (2px, offset 2px) |

Rule: chrome is black/white only; the acid green appears solely on the primary CTA fill and the focus ring — never as a tint, gradient or large surface. All other colour comes from campaign video/imagery.

## 3. Typography Rules

- Font stack: `"Cash Sans", Arial, sans-serif` (single family; 445 uses).
- Preview specimen uses **Inter** (Google Fonts) as the open stand-in for the licensed Cash Sans.
- Body: 15.3px / 18.4px / 400 / Cash Sans, tracking normal.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 56 / 53.2 | 400 | -1.68px (-3%) |
| Section (h2) | 40 / 44 | 400 | -1.2px (-3%) |
| Sub (h3) | 40 / 44 | 400 | -1.2px |
| Body | 15.3 / 18.4 | 400 | normal |
| Nav | 16 / 16 | 400 | normal |
| Button | 12–14 | 400 (Sign up 500) | -0.24px |

Patterns: weight is a flat 400 almost everywhere (one 500 on the Sign-up CTA); the identity is tight NEGATIVE tracking (~-3%) on headlines. No uppercase, no serif, no second family.

## 4. Component Stylings

### Buttons (fully rounded pills, no shadow)
- **Primary (Sign up)**: bg `#00e013`, text `#000000`, radius `999px` pill, h `47px`, padding `0 20px`, 12px/500, tracking -0.24px.
- **Black (Log in)**: bg `#000000`, text `#ffffff`, pill, h `47px`.
- **White (Get started)**: bg `#ffffff`, text `#000000`, radius `100px`, h `42px`, 14px/400.
- **Outline (Learn about Green)**: transparent, 1px `#000000` border, radius `100px`, h `48px`.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Nav button | black/white pill | inverts: bg `#000`, text `#fff` | `outline: 2px solid #00d632`, offset 2px | not captured | not captured |
| Text link | black | `#666666` | same green ring | — | — |

### Inputs
- `not captured`: no visible input on the homepage (sign-up is app-download driven). Use the green focus ring recipe for consistency.

### Cards / panels
- No shadows anywhere (shadow census empty). Depth is bold color blocking. Cards use organic percentage-based radii (`14.6%/7%`, `14.3%`, `15.9%/13%`) creating soft "squircle" shapes, plus a `20.45px` fixed radius.

### Nav
- Cash Sans 16px links, Cash App logo left; Log in (black pill) + Sign up (green pill) right.

## 5. Layout Principles

- Full-bleed alternating white/black bands, each carrying campaign video or a big rounded card.
- Content columns generous; hero headline at 56px with a video/imagery block.
- Container queries used (2) for component-level responsiveness.
- Base rhythm large and airy; colour blocking (not borders/shadows) separates sections.

## 6. Depth & Elevation

- Radius scale: `999px` / `100px` pills (buttons), `20.45px` fixed card radius, and organic percentage radii (`14.6%/7%`, `14.3%`, `15.9%/13%`, `14%/6.6%`) for squircle cards, `50%` avatars.
- Shadows: NONE — the census is empty. Zero elevation anywhere.
- Borders: 1px `#000000` (outline buttons), otherwise structure is pure black/white/green blocking.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color | 0.6s | ease | link/text color shifts (15 uses) |
| all | 0.3s | ease | general hover |
| transform | 0.4s | ease-in-out | element moves |
| opacity, transform | 0.6s | ease | reveals |
| background-color | 0.6s | ease-in-out | band transitions |

- House feel: slow, smooth 0.3–0.6s ease transitions on color/opacity/transform.
- Keyframes (module-scoped): `fadein`, `ctaSlideIn`/`ctaSlideOut` (floating CTA), `introAnimation` (My First Stock splash), `pulse` (form). No third-party animation library.
- `reducedMotionBlocks: 1` — the site DOES ship a `prefers-reduced-motion` block (good practice, unlike many peers).

## 8. Backgrounds, Effects & WebGL

- Atmosphere is 8 autoplaying full-bleed **videos** plus 1 raster layer — this is where all the colour, pixel-art and "video-game" playfulness lives.
- No CSS gradients, no canvas/WebGL, no backdrop-blur, no grain.
- Chrome surfaces are flat solid black/white with the single green accent.

## 9. Do's and Don'ts

### Do
- Keep chrome to black, white and ONE acid green `#00e013` (CTA fill + focus ring only).
- Use one typeface (Cash Sans) at weight 400 with tight negative tracking (~-3%) on headlines.
- Make every button a fully rounded pill (999px/100px); primary is green with BLACK text.
- Refuse shadows entirely — separate with bold color blocking and organic squircle cards.
- Let campaign video/imagery carry all the additional colour and playfulness.
- Ship a `prefers-reduced-motion` block (the live site does).

### Don't
- Don't add a second accent color or use green as a tint/gradient/large surface.
- Don't set headlines bold — weight stays 400; the identity is tracking, not weight.
- Don't add drop shadows or elevation — the site has zero.
- Don't square off the buttons — they are pills.
- Don't put the "maximalist" colour into the interface; it belongs in the imagery.

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| max 759px | Mobile: single column, stacked bands, hamburger nav |
| min 760px | Tablet layout |
| min 1024px | Desktop layout |
| min 1400 / 1440 / 1480 / 1680px | Progressive wide-screen scaling |

- Breakpoints: 391/759/760/1024/1400/1440/1480/1680. Two container queries for component-level layout.
- `darkSchemeBlocks: 0` — no OS dark theme (black bands are intentional design). 

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` / `#000000` bands · Text `#000000` · Muted `#999999` · Accent `#00e013`
- Font: `"Cash Sans", Arial, sans-serif` · Body: 15px/400 · Radius: 999px pill / squircle % cards · Button height: 47px · No shadows
- Focus: `outline: 2px solid #00d632; outline-offset: 2px` · Hover: link `#666666`, nav button inverts to black

<cash-app_design_language>
Use the Cash App design language: bold consumer-fintech on a stark black/white canvas with ONE acid green #00e013 as the only accent (primary CTA fill with black text) and a green #00d632 focus ring — no second color, no tints, no gradients. One typeface, Cash Sans (open stand-in Inter), at a flat weight 400 everywhere, with tight NEGATIVE tracking (~-3%) on headlines (56/53, 40/44) over 15/18 body; no uppercase, no serif. Every button is a fully rounded pill (999px/100px): primary green+black text, secondary white+black, or black+white, plus a 1px-black outline pill; hover inverts to black, links fade to #666666. Refuse elevation entirely — the shadow census is empty; separate sections with bold black/white/green color blocking and organic percentage-radius squircle cards (14.6%/7%, 14.3%). Atmosphere is 8 full-bleed campaign VIDEOS carrying all the extra colour and pixel-art playfulness — keep that maximalism in imagery, never in the chrome. Motion is slow smooth 0.3–0.6s ease on color/opacity/transform; ships a prefers-reduced-motion block. Feels: bold, confident, playful-via-imagery, flat. Avoid: a second accent, green as a surface/gradient, bold headline weights, any drop shadow, square buttons, and putting maximalist colour into the interface itself.
</cash-app_design_language>