What is Cash App's primary brand color and how is it used?

Cash Green — `#00e013`, a fully-saturated digital green that reads as bright traffic-light green rather than fintech mint. The structural rule: Cash Green is the canvas, not the CTA. It fills the full-bleed hero band as a background colour, never as a button fill. The primary button is a black pill at `#000000` with white text and a `999px` radius. The secondary button is a white-outlined pill on the green canvas. Cash Green also fills the small wordmark rounded-square at the top-left and accents the iPhone status icons inside the mockup, but it never carries text and never fills a CTA.

What typography does Cash App use, and what should I use if Cash Sans isn't available?

Cash App runs Cash Sans across every tier at the single weight 400 — no thin display weight, no bold body weight. The hero renders at 56px with `lineHeight: 53.2px` and `letterSpacing: -1.68px`, h2 at 40px with `-1.2px`, lead paragraph at 25px with `-0.75px`, body at 18px with `-0.54px`, and the button label at 12px with `-0.24px`. The fallback stack ships `Helvetica Neue, helvetica, sans-serif`. When Cash Sans is unavailable, Inter at weight 400 with matching negative letter-spacing renders the closest open-source silhouette; General Sans at weight 400 also reads correctly. Hold the weight ladder at 400 — pushing display to 600+ collapses the brand's confidence-through-restraint signature.

Why is the green a canvas instead of a button?

Cash Green at `#00e013` sits at `oklch(0.79 0.26 143)` — a chroma value high enough that any text rendered on top must be either pure black or pure white to pass WCAG AA. A button fill at that saturation would over-power every adjacent UI element. By spending the voltage on the full-bleed canvas instead, the brand achieves maximum visual recognition on first paint and then steps the page down to a strict black-on-white product surface (the iPhone mockup) where actual money displays read. The trade-off the system accepts: no room for a secondary accent. The page runs on four colours total — green, black, white, gray — and the green-to-white surface transition is the brand's sole depth move.

What is the shape language and what does the `100px` radius do?

Three radius tiers carry the system. Buttons are pills at `999px` — the customary infinity-radius shortcut. Mid-size surfaces (the iPhone mockup's status card, the savings card, the borrow card composited inside the phone frame) sit at `100px` — an unusually large fixed-pixel radius for content cards, which gives the inner UI a soft, oversized-pill silhouette rather than the typical 8-12px rectangle. Profile avatars and circular icons use `50%`. There is no sharp-cornered geometry in the system at all — the smallest radius value the brand ships is `100px` on a content card.

Can I use this DESIGN.md to build my own React fintech app?

Yes — the file is structured to feed into Claude, Cursor, or any AI coding tool that reads structured design tokens. The agent will reproduce Cash App's green-canvas hero, black-pill CTA nav, Cash Sans weight-400 uniformity, and oversized `100px` content-card radius rather than a generic consumer-banking theme. You can also reference the tokens directly: every colour is a quoted hex, every radius and padding is a quoted pixel string, and the 17 component definitions reference each other by token name so `button-primary-pill` resolves through `{colors.ink}` over `{colors.canvas-green}` to the actual black-on-green CTA pairing the brand ships.

What's missing from this DESIGN.md spec?

A few items, documented in the Known Gaps section: pressed and focus states are not captured — only the base CTA pairing is documented. The Cash App Pay merchant-surface palette and the Cash App Card physical-card art tokens are out of scope; only the public marketing canvas at cash.app is in this spec. The iPhone mockup's inner-UI gradient bars (the green status fill, the Bitcoin chart sparkline) appear as raster art rather than CSS-rendered colour and are not captured as design tokens. The logged-in app surfaces (Pay, Cash Card, Bitcoin, Stocks, Savings, Borrow) and the legal-footer regulatory text block are described in prose but not enumerated.

Cash App Design System

Cash App's design system as a DESIGN.md file.

About Cash App DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source cash.app

Fintech & Crypto
Banking & Payments

Cash App's marketing canvas inverts the fintech default. Where Stripe paints indigo onto a white canvas and Monzo paints navy onto white, Cash App paints the entire canvas Cash Green `#00e013` — a fully-saturated digital green at `oklch(0.79 0.26 143)` — and lets black and white do everything else. The hero band fills the viewport with green; an iPhone mockup floats centre on white-ish app surfaces; the brand wordmark sits inside a black rounded-square at the top left; and the only two buttons on the page are a white-outlined pill ("Sign up") and a black-filled pill ("Log in") in the top-right nav. Display type is Cash Sans at a single weight — 400 — across every size from the 56px hero down to the 12px button label, with a tight negative-tracking ladder from `-1.68px` to `-0.24px`.

This page packages the Cash App marketing canvas into a single DESIGN.md file built on the Google Labs DESIGN.md specification. Inside the spec: 18 colour tokens grouped into brand-canvas, ink, on-green, and structural roles; 10 typography tokens spanning a 56px hero down to a 12px label with the full Cash Sans weight-400 ladder including a 25px lead paragraph and a 39px section heading; five radius tokens including the load-bearing `999px` pill, a `100px` mid-card corner, and a `50%` circular avatar; nine spacing tokens climbing from 4px to a 90px section band; and 17 component tokens covering buttons, the green hero band, the white iPhone mockup surface, the status-progress bar, money-display rows, FAQ items, and the footer link grid. Every value is quoted as an exact hex, pixel, or weight number.

A working React or Next.js developer drops the file into Claude, Cursor, or GitHub Copilot and the agent reproduces Cash App's green-canvas rhythm — full-bleed Cash Green hero, black-pill nav CTAs, Cash Sans weight-400 uniformity, iPhone-mockup white surface composited centre-band — rather than a generic neobank theme. Tokens map onto Tailwind config or CSS variables, and components reference each other by name. The system is worth studying for one disciplined choice that mirrors Linear's single-accent restraint: the brand voltage is too saturated to share the page with any secondary accent, so the system gives up the secondary accent entirely. Where most fintech brands hold their brand colour in reserve as a button fill, Cash App spends it all at once on the canvas — and then has nothing else to spend.

What makes it distinct

Brand voltage as canvas`#00e013` floods the full hero band as background, not as a CTA fill
Black pill as primary CTA`#000000` background, white text, `999px` radius, `0px 20px` padding at 46px height
Single-weight Cash Sansevery tier from 56px hero to 12px button label renders at weight 400
Negative tracking ladder`-1.68px` at 56px, `-1.20px` at 40px, `-0.54px` at 18px body
No secondary accentblack, white, green, and one neutral gray `#999999` do every job on the page

Live at cash.app

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

cash.app

Explore Cash App

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Cash App design system FAQ

Common questions about Cash App's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Cash App — official site

The Block-owned consumer fintech's marketing canvas — source of every hex, font, and radius in this spec.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Cash App in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→