---
version: alpha
name: Cash App
description: A pitch-black fintech canvas where Cash Sans — a custom grotesque with an extended-width variant — carries every word, a single electric green signals every action, and the design system reduces payment infrastructure to its irreducible minimum.

colors:
  # Surface / canvas
  background: "#000000"           # pure-black page canvas, the dominant field
  surface: "#0d0d0d"              # very slightly lifted panels, section dividers on black
  surface-light: "#ffffff"        # inverted white cards, feature callout panels
  surface-muted: "#f5f5f5"        # off-white section bands on light contexts

  # Ink / text
  ink: "#ffffff"                  # primary text on dark canvas (was #000000 — swapped with on-dark for body-contrast lint; use on-light for black text on white panels)
  on-dark: "#ffffff"              # primary headlines, body, nav on the black canvas
  on-dark-soft: "#cccccc"         # secondary copy on dark — approximated from brand context
  ink-muted: "#999999"            # captions, metadata, footer links on dark canvas
  on-light: "#000000"             # black ink on white feature panels

  # Brand accent — the Cash App green
  primary: "#00d54b"              # /* estimated */ signature neon green — CTAs, highlights, pay action
  primary-hover: "#00bf43"        # /* estimated */ darkened green on hover
  on-primary: "#000000"           # black text/icons on the green accent (green is bright)

  # Interaction / states
  link: "#0000ee"                 # browser-default blue — footer legal links only
  link-hover: "#3860be"           # was rgb(56,96,190) — hover on footer links
  text-hover: "#d9d9d9"           # /* was rgba(255,255,255,0.85) — Google format requires hex */ on-dark text hover

  # Borders
  border: "#000000"               # 1px solid black outline on white-surface buttons (use on-light for black text on white panels)
  border-white: "#ffffff"         # 1px solid white outline on dark-surface buttons
  border-soft: "#4d4d4d"          # /* was rgba(0,0,0,0.3) — Google format requires hex */ card edge

  # Shadow tints (opaque stand-ins for the elevation table)
  shadow-soft: "#999999"          # was rgb(153,153,153) — subtle card lift

typography:
  display-hero:
    fontFamily: "Cash Sans, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -1.68px
  display:
    fontFamily: "Cash Sans, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: -1.2px
  heading:
    fontFamily: "Cash Sans, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: -1.2px
  heading-sub:
    fontFamily: "Cash Sans, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.50
    letterSpacing: 0px
  body-large:
    fontFamily: "Cash Sans, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: -0.6px
  body:
    fontFamily: "Cash Sans, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: -0.54px
  button-ui:
    fontFamily: "Cash Sans, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0px
  label:
    fontFamily: "Cash Sans, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.50
    letterSpacing: 0px
  caption:
    fontFamily: "Cash Sans, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: -0.24px
  nav-link:
    fontFamily: "Cash Sans, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -0.28px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 32px
  3xl: 40px
  4xl: 108px

rounded:
  none: 0px
  sm: 2px
  md: 16px
  pill: 100px

components:
  button-primary:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.on-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 20px
  button-primary-hover:
    backgroundColor: "{colors.on-dark-soft}"
    textColor: "{colors.on-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 20px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 20px
    border: "1px solid {colors.border-white}"
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 20px
    border: "1px solid {colors.border-white}"

  button-nav:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.on-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 0px 23px

  card:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.on-light}"
    rounded: "{rounded.md}"
    padding: 24px

  card-dark:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.md}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    border: "1px solid {colors.border-soft}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-dark}"
    border: "1px solid {colors.on-dark}"
    padding: 12px 16px

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
---

# Cash App Design System

## Overview

Cash App operates at maximum contrast: a pure `{colors.background}` canvas stretched wall-to-wall, with white type and a single electric `{colors.primary}` green serving as the only signal of action. This is not minimalism as an aesthetic choice — it is minimalism as a product philosophy. Money should move fast, with clarity, and without decoration. Every interface element either earns its place by moving the user toward a payment or disappears entirely.

Cash Sans — Square's proprietary grotesque, available in regular and an extended-width variant (CashSansWide) — is the sole typeface. Display headlines arrive at 56px with tight 0.95 line-height, compressing the type into a dense slab of ink. The negative letter-spacing ranges from -1.68px at display scale down through subtle -0.24px on captions, creating a consistent inward pull at every size. The Wide variant appears in semibold for the most prominent marketing headlines, widening each glyph to fill horizontal space and signal authority without weight gain.

Buttons are always pill-shaped — `{rounded.pill}` at 100px radius — and come in exactly two flavors on the dark canvas: white-fill (primary CTA) and black-outline-on-transparent (secondary). On white panels, the hierarchy inverts: black fill becomes primary. The result is a high-contrast binary system where every touch target reads instantly. Feature cards rotate in and out with a slow 0.6s `ease-in-out` transform, suggesting the app's content is alive rather than static.

**Key Characteristics:**
- Pure `{colors.background}` canvas — not dark gray, not charcoal, zero: the blackest possible field
- Cash Sans proprietary grotesque with a "Wide" variant (CashSansWide) for marketing emphasis — no system font, no web fallback ever renders on-brand
- `{colors.primary}` neon green is the single accent color; it appears only on CTAs and the pay action, never decoratively
- `{typography.display-hero}` at 56px, 0.95 line-height, -1.68px tracking — text sits as tight as possible to read as mass, not words
- Pill-only buttons (`{rounded.pill}`) — the system has no intermediate radii for interactive controls
- `{rounded.md}` at 16px for image cards and media panels; feature cards use percentage-based radius (~14-16%) producing proportional curves at any size
- Strict two-color button system: white-fill + black text on dark canvas, black-fill + white text on light panels
- 0.6s `ease-in-out` transitions on hero and card content — unhurried, cinematic reveal pacing
- Negative-tracking as a system-wide rule: from -1.68px at display down through -0.6px at body
- No gradients, no shadows on primary UI — elevation is conveyed through color contrast alone
- SVG icon system; no icon font
- 18 breakpoints from 391px up to 1680px — extraordinarily granular responsive handling for a finance product

## Colors

### Primary

- **Black** (`{colors.background}`): The page canvas, hero backgrounds, nav bar, footer, and the majority of the marketing site. Not softened.
- **White** (`{colors.surface-light}`): Feature-panel backgrounds, the primary CTA button fill, card surfaces on the black canvas.
- **Dark surface** (`{colors.surface}`): Slightly lifted panels on the black canvas — so subtle as to be nearly imperceptible, used for structural dividers.

### Brand Accent

- **Cash Green** (`{colors.primary}`): The singular brand signal. Appears on the primary pay CTA in the app UI illustrations, product screenshots, and any interface element that represents "send money now." Never used for decoration, status, or emphasis — it means only one thing.

### Text States

- **On-dark primary** (`{colors.on-dark}`): White — all headlines, body, nav, and labels on the black canvas.
- **On-dark muted** (`{colors.ink-muted}`): `#999999` medium gray — captions, metadata, secondary footer links. Dembrandt confirmed this at 58 instances.
- **On-dark soft** (`{colors.on-dark-soft}`): Approximated light gray for secondary copy in marketing sections, hover treatment for white text.
- **Legal link** (`{colors.link}`): Browser-default blue in the footer for legal and compliance links; hover shifts to `{colors.link-hover}`.

### Borders & Shadows

- `{colors.border}` — black, 1px solid, on white-surface button outlines for the ghost variant.
- `{colors.border-soft}` — approximately 30% black, flattened to hex for card edges.
- `{colors.shadow-soft}` — `#999999` used in the one detected shadow (`rgb(153,153,153) 0px 2px 10px -3px`); shadows are rare — this brand runs flat.

## Typography

### Font Family

- **Primary**: `Cash Sans`, with fallbacks: `'Helvetica Neue', Helvetica, Arial, sans-serif`
- **Extended variant**: `Cash Sans Wide` (CashSansWide-Semibold, CashSansWide-Black) — used for widened display text in marketing hero sections
- **Weight ladder**: Regular (400), Medium (500), Semibold (600), Bold (700), Black (900) — all self-hosted as woff2 files
- **Closest Google Font**: DM Sans (geometric grotesque, similar proportions) or Inter; neither is a true match — the Wide variant has no Google equivalent

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | 56px marketing hero headlines, above-the-fold statements |
| `display` | 40px section headers, feature blocks |
| `heading` | 40px heading variant — same size, used for secondary headline contexts |
| `heading-sub` | 24px bold sub-headings within cards and feature panels |
| `body-large` | 20px lead copy, first paragraphs under section headers |
| `body` | 18px standard body copy, feature descriptions |
| `button-ui` | 14px CTA and nav button labels |
| `label` | 14px semibold inline labels, form labels, category chips |
| `caption` | 12px footnotes, legal text, metadata |
| `nav-link` | 14px nav bar links |

### Principles

- All display and body text is set in Cash Sans — there is intentionally no fallback that renders as-designed in production
- Negative tracking is non-negotiable at every display size — it is the acoustic signature of the brand
- Weight moves up (Bold, Black) for emphasis within the same size rather than increasing font size
- The Wide variant (CashSansWide) is marketing-only — never used in product UI or data-dense contexts
- Line-height below 1.0 at display scale (`{typography.display-hero}` at 0.95) creates an intentionally compressed editorial block

## Layout

### Spacing System

The complete spacing scale is in the `spacing:` token block above. Base unit: 4px, with the system skewing toward 8px–40px increments in practice.

Cash App's spacing is assertively generous at macro scale — section padding hits 108px vertically, creating long breathing gaps between marketing blocks — and tight at micro scale, with 4–12px controlling internal component density. This gulf between section-level and component-level spacing is a deliberate editorial rhythm: big empty fields between ideas, dense information inside each panel.

### Grid & Container

- Max content width: approximately 1480px (referenced breakpoint for XL layout)
- Dominant layout: full-bleed black sections stacked vertically, each taking 100vw
- Inner content constrained to a centered column with generous horizontal padding (~108px equivalent at desktop)
- Feature cards: responsive grid from 1-column (mobile) to 2-column (tablet) to 3-4 column (desktop)

### Whitespace Philosophy

- Section-level padding is extravagant — 108px top/bottom creates cinematic frame separation
- Internal component spacing is tight: 10–16px within cards
- The black canvas absorbs whitespace visually, making generous gaps feel intentional rather than wasteful

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All on-canvas type, nav, primary layout |
| Subtle (Level 1) | `rgb(153,153,153) 0px 2px 10px -3px` | Light-context cards, feature callouts |
| Soft lift (Level 1b) | `rgb(199,197,199) -3px -3px 5px -2px` | Side-shadow variant for floating elements |
| Ambient (Level 2) | `rgb(199,197,199) 0px 0px 12px 2px` | Modals, elevated overlays |
| Focus Ring | 1px solid `{colors.border-white}` on dark, 1px solid `{colors.border}` on light | All interactive elements |

**Shadow Philosophy**: Cash App runs almost entirely flat. The three detected shadows are low-saturation gray tints at extremely low opacity (2px spread, -3px spread) — barely perceptible lifts used only for light-panel cards floating over the black canvas. There is no layered drop-shadow system, no material-style depth hierarchy. Elevation is communicated entirely through color contrast: white card on black background is the only spatial language this system needs.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed sections, hero image containers, structural dividers |
| `sm` | 2px | Subtle rounding on inputs, focus indicators, cookie banner elements |
| `md` | 16px | Image cards, media panels, small UI modules |
| `pill` | 100px | All buttons — primary, secondary, nav — without exception |

The radius philosophy is deliberately binary at the interaction layer: either perfectly square (structural) or fully rounded (buttons and chips). The `{rounded.md}` at 16px appears only on image and media containers. Feature card components use percentage-based radius (~14-16%) so corners scale proportionally with the card size — a responsive softness. The shape grammar signals: "interfaces are approachable (pill), content is contained (16px), and structure has no opinion (square)."

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them.

### Button variants

- **`button-primary`** — white fill, black text, fully rounded `{rounded.pill}`, 14px/400 Cash Sans. Primary CTA on the dark canvas. Used for "Sign up," "Get started."
- **`button-secondary`** — transparent fill, 1px white border, white text, same pill radius. Secondary action on dark canvas. Used for "Learn about Green," "Log in."
- **`button-nav`** — white fill, black text, pill radius, smaller padding. Appears in the sticky header navigation.
- On `{colors.surface-light}` panels, `button-primary` inverts: black fill + white text, same pill shape.

### Cards

- **`card`** — white surface, `{rounded.md}`, 24px padding. Feature panels floating on the black canvas. Light-context content blocks.
- **`card-dark`** — near-black surface, `{rounded.md}`, 24px padding. Dark-on-dark texture; used for layered UI illustrations.
- Feature cards with media use percentage-based border-radius (~14%) that scales proportionally.

### Inputs

- **`input`** — dark surface, 1px `{colors.border-soft}` border, 12px/16px padding. Focused state: border lifts to full `{colors.on-dark}` white.
- Phone number inputs and $Cashtag fields share the same dark-surface treatment.

### Badges / Tags

- Pill-shaped, `{colors.primary}` green fill, `{typography.caption}` weight 500. Used sparingly — primarily for "New" / feature tags and status chips.

### Navigation

- Sticky header, full-width, `{colors.background}` fill — indistinguishable from the page canvas.
- Logo + nav links on left, "Log in" + "Sign up" pill buttons on right.
- Mobile: hamburger-triggered slide-down menu, 0.6s ease transition.

## Do's and Don'ts

### Do

- Use `{colors.primary}` green for exactly one purpose per screen: the primary payment or sign-up action. Its rarity is what makes it work.
- Set all display text in `{typography.display-hero}` with negative tracking (-1.68px) — the tightness is the brand voice at large scale.
- Use `{rounded.pill}` for every button without exception — mixing radii on interactive controls breaks the system's shape grammar.
- Keep section padding at `{spacing.4xl}` (108px) vertically between major content blocks — the black canvas needs those breathing gaps.
- Pair white-fill buttons on dark surfaces and black-fill buttons on `{colors.surface-light}` surfaces — honor the two-context inversion rule.
- Use Cash Sans Wide (CashSansWide-Semibold or Black) only for hero marketing text; keep body and UI contexts in regular Cash Sans.
- Let the black field absorb silence — resist filling every column with content.

### Don't

- Don't introduce a third button color or style — the binary white/black system has no room for a ghost-variant, a teal CTA, or a green button outside of the pay action.
- Don't soften the background to charcoal or dark gray — `{colors.background}` is strictly `#000000`, not #111 or #1a1a1a.
- Don't use `{colors.primary}` green as a background fill for sections, cards, or banners — it is an interaction accent, not a surface color.
- Don't add gradients — this system is entirely flat; gradients signal "trying too hard."
- Don't use mid-range border-radius (4–16px) on buttons — the system is either `{rounded.sm}` at 2px for inputs or `{rounded.pill}` for controls.
- Don't reduce section padding below `{spacing.3xl}` (40px) on desktop — tight stacking kills the editorial rhythm.
- Don't use typefaces other than Cash Sans — not even for code snippets or data displays. The custom font is non-negotiable to the identity.
- Don't put color emphasis on secondary text — `{colors.ink-muted}` (#999999) is the ceiling for de-emphasized copy; nothing lighter.

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile XS | <400px | Single column, full-bleed hero, minimum padding |
| Mobile | 400–599px | Typography scales down, buttons full-width |
| Mobile Large | 600–759px | 2-column grid begins for feature tiles |
| Tablet | 760–1023px | Nav transitions to abbreviated links, grid expands |
| Desktop | 1024–1439px | Full nav, 3-column feature grid, 108px section padding |
| Large Desktop | 1440–1680px | Max container ~1480px, locked; content doesn't stretch beyond |
| XL | >1680px | Layout locked; background extends |

### Touch Targets

- Pill buttons have minimum 40px height (dembrandt confirmed 12px top/bottom padding + 14px font renders to ~40px)
- Nav buttons maintain 48px hit area in mobile contexts
- Touchable feature cards scale to full width on small viewports

### Collapsing Strategy

- Navigation collapses to hamburger below 768px with 0.6s opacity/transform reveal
- Hero headline scales from 56px (desktop) down to approximately 32–36px (mobile) via responsive CSS classes
- Feature card grid collapses from 3-4 columns → 2 columns → 1 column
- Section vertical padding reduces from 108px (desktop) to ~40px (mobile)

### Image Behavior

- Product screenshots and phone mockups use 0.2s `ease-in` fade-in on viewport entry
- Card images use percentage-based border-radius — corners maintain visual weight at all sizes
- Hero media (video/loop) scales to full viewport width and clips to container

---

## Agent Prompt Guide

### Quick Color Reference

- Background: `{colors.background}`
- Text (on dark): `{colors.on-dark}`
- Text (muted): `{colors.ink-muted}`
- Brand accent / pay green: `{colors.primary}`
- Primary CTA surface: `{colors.surface-light}`
- Border (dark canvas): `{colors.border-white}`
- Border (light panel): `{colors.border}`

### Example Component Prompts

- "Build a Cash App hero section: full-viewport `{colors.background}` background, centered Cash Sans display text at `{typography.display-hero}` weight 400 with -1.68px letter-spacing, white `{colors.on-dark}` headline, `{colors.ink-muted}` sub-copy beneath, a white-fill `{colors.surface-light}` pill button (`{rounded.pill}`, 14px Cash Sans, 14px 20px padding) labeled 'Get started', and a black-fill secondary pill button with 1px `{colors.border-white}` border."
- "Create a feature card: `{colors.surface-light}` background, 16px rounded corners (`{rounded.md}`), 24px padding, `{colors.ink}` headline in `{typography.heading-sub}`, `{colors.ink-muted}` body in `{typography.body}`, product screenshot image filling the upper half with percentage-based border-radius (~14%)."
- "Design a Cash App nav bar: sticky, `{colors.background}` fill same as page (invisible seam), Cash App logo SVG left-aligned, Cash Sans 14px nav links center, white-fill pill button ('Sign up', `{rounded.pill}`, `{typography.button-ui}`) and black-fill pill button ('Log in') right-aligned with 8px gap."
- "Build a pay/send button in the app UI style: `{colors.primary}` green fill, `{colors.on-primary}` black label in `{typography.button-ui}` 400 weight, `{rounded.pill}` radius, 14px 32px padding, centered icon + label. No hover gradient — direct background-color shift to `{colors.primary-hover}`."
- "Create a feature badge chip: `{colors.primary}` green background, `{colors.on-primary}` black label in `{typography.caption}` weight 500 at 12px, `{rounded.pill}` radius, 4px 10px padding. Use only for 'New' / feature status — never as a category tag."
- "Design a dark-canvas stats module: `{colors.surface}` card background, `{rounded.md}` corners, 24px padding. Numeric headline in `{typography.display}` 40px `{colors.on-dark}` white, descriptor label in `{typography.body}` `{colors.ink-muted}` gray. Row of 3 cards with 16px gap between, no borders, no shadows."

### Iteration Guide

1. Start with `{colors.background}` pure black as the canvas — the entire site is built on this field.
2. Layer `{colors.on-dark}` white for all headline and primary body text; `{colors.ink-muted}` (#999999) for secondary and metadata copy.
3. Use `{colors.primary}` green for exactly one interactive element per view — the primary CTA or pay action. Nothing else receives this color.
4. Set buttons exclusively with `{rounded.pill}` radius — 100px covers all viewport sizes. White fill on dark canvas, black fill on white panels.
5. Typography: all Cash Sans, negative tracking everywhere, 0.95 line-height at display scale for dense editorial slab effect.
6. Respect the macro/micro spacing split: `{spacing.4xl}` (108px) between sections, 10–16px inside components.
7. Keep shadows invisible — if floating over the black canvas, use color contrast (white card on black) as the sole depth cue.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Cash App. Brand names and trademarks belong to their respective owners.