# Cash · Design system migration spec

> Source: https://cash.app  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of a modern fintech brand using a dark, high-contrast aesthetic to convey both luxury and accessibility.

## 1. Identity DNA

Cash's design system operates as a digital vault door: a sleek, confident fintech platform that blends dark luxury with vibrant, accessible green energy. The aesthetic is one of immediate clarity, where bold contrasts signal both security and the instant nature of digital currency. It is the bold, high-contrast face of a modern consumer finance app.

**One-liner:** The bold, high-contrast face of a modern consumer finance app.
**Keywords:** fintech · app · money · instant · modern
**Analogy:** A sleek, confident fintech platform that blends dark luxury with vibrant, accessible green energy.

## 2. Color

The palette is built on a foundation of extreme contrast, pitting deep, absolute blacks against the singular vibrancy of neon green. Clean white is reserved strictly for card surfaces, creating a clear hierarchy between the system's dark frame and its active content.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--bg-quiet` | `#F5F5F5` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#999999` | placeholder |
| `--accent` | `#00E013` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** Extreme high-contrast between deep blacks and vibrant neon green, with clean white for card surfaces.

This principle of high-contrast separation ensures every element is immediately legible and reinforces the brand's core identity of instant, unambiguous transactions.

## 3. Typography

Typography is set in a clean, modern humanist-sans category, selected for its approachable yet confident voice. Its role is strictly functional and direct, supporting punchy headlines that emphasize ease and disruption without decorative flourish.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -1px | Main marketing headlines |

## 4. Spacing

A consistent 4px base unit establishes a predictable spatial rhythm, ensuring precision across all components.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base with generous vertical padding (90px) for section separation.

## 5. Surfaces

Surfaces are defined by depth and separation. Large, rounded white cards float over the dark background via layered shadows, while subtle borders provide just enough structure to delineate interactive zones.

- **Radius:** sm 4px · md 20px · lg 48px · pill 999px
- **Shadows:**
  - rgba(0,0,0,0.1) 0px 8px 20px 0px
  - rgba(0,0,0,0.1) 0px 24px 48px 0px
- **Borders:** 1px solid rgba(0,0,0,0.3)

## 6. Layout

The layout skeleton begins with a symmetrical split-screen hero, combining bold, left-aligned text with a dynamic, centered app mockup. This structure then gracefully collapses into a clean, stacked mobile layout that prioritizes content and whitespace.

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

**Skeleton:** A symmetrical split-screen hero with centered content, transitioning to a stacked mobile layout.

## 7. Motion & Interaction

Motion is applied with deliberate restraint, using smooth color transitions and subtle transform shifts to acknowledge user actions. The philosophy is one of enhancement, not performance; transitions operate in a measured 0.3s to 0.6s range to feel substantial yet immediate.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color transitions
  - Subtle transform shifts

- **Hover:** Subtle brightness or scale shifts on interactive elements.
- **Click:** Immediate visual feedback through color inversion or slight compression.
- **Transition:** Smooth 0.3s to 0.6s transitions for most state changes.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, modern, and direct, mirroring the system's visual clarity. It favors punchy, short phrases and action-oriented calls-to-action that communicate disruption without resorting to complex jargon.

- **Tone:** Confident, modern, and direct.
- **Headline style:** Punchy, short phrases that emphasize ease and disruption.
- **CTA style:** Action-oriented with directional arrows, using high-contrast colors.
- **Avoid:** Complex jargon / Cluttered layouts / Dull or muted palettes

### Don'ts
- ❌ Don't use muted, pastel color palettes — screenshot shows high-contrast black and vibrant neon green.
- ❌ Don't use complex serif typefaces — screenshot shows a clean, modern humanist-sans font.
- ❌ Don't clutter the layout with dense text — screenshot shows generous whitespace and a clear hierarchy.
- ❌ Don't use subtle, low-contrast borders — screenshot shows bold, clear surfaces and rounded corners.
- ❌ Don't use traditional, boxy button shapes — screenshot shows highly rounded, pill-shaped CTAs.
- ❌ Don't use dark grey instead of pure black — screenshot uses a solid, deep #000000 background.

The system deliberately rejects muted palettes, complex serifs, cluttered layouts, and boxy UI elements to preserve its core identity of sleek, modern financial clarity.

## System Prompt (paste into AI tool)

```
This is a high-contrast fintech app landing page using a dark mode aesthetic. The palette is anchored by deep black (#000000) and vibrant neon green (#00E013), with clean white for app UI surfaces. Typography relies on a modern, clean humanist-sans category. Critical constraints: maintain the bold high-contrast aesthetic, use pill-shaped buttons for primary actions, and ensure the layout remains spacious and uncluttered with generous whitespace. Avoid any use of serif fonts, muted pastels, or boxy UI elements that would conflict with the sleek, modern identity.
```
