Cash App Design System

Overview

Cash App's marketing canvas opens with a single design decision: the brand voltage is the canvas. A fully-saturated Cash Green #00e013 — oklch(0.79 0.26 143), a chroma value high enough that only pure black or pure white can be set on top — floods the entire above-the-fold band, edge to edge, ceiling to floor. The hero headline ("The way money should work") sits at 56px in Cash Sans weight 400 with letterSpacing: -1.68px on the green canvas in pure black. An iPhone mockup floats centre-page on a white-ish app surface #f7f7f7, displaying composited money rows ("Savings $980.00", "Borrow $150.00 available", "Bitcoin $8.05"). The only two buttons on the page — "Sign up" outlined in white and "Log in" filled black — sit pinned to the top-right nav.

The colour system has two structural backgrounds and one ink stack. Canvas Green ({colors.canvas-green} — #00e013) is the brand voltage, painted as a band rather than reserved for a CTA. Canvas Light ({colors.canvas-light} — #ffffff) is the alternate body band beneath the hero. Ink ({colors.ink} — #000000, pure black) does every text job — hero, h2, body, button label, footer. Ink Mute ({colors.ink-mute} — #999999) carries helper copy like "$20 to goal" inside the iPhone mockup. There is no fifth role and no secondary accent.

Typography is Cash Sans at the single weight 400 across every tier — a hero at 56px, h2 at 40px, lead paragraph at 25px, body at 18px, button label at 12px — with a negative-tracking ladder from -1.68px down to -0.24px. Light-weight as no-weight: Where Stripe holds display at weight 300 to signal editorial confidence and Monzo pins every heading at weight 800 to signal warmth, Cash App holds every tier at weight 400 — the absence of weight variation is the brand's confidence signal. The page never gets visually heavier; it gets visually larger.

Key Characteristics:

• Canvas-as-voltage: Cash Green #00e013 fills the full-bleed hero band as background, never as a CTA fill.
• Single-weight Cash Sans across every tier from 56px hero down to 12px label — no bold, no thin, no italic.
• Black-pill CTA on green canvas: #000000 background, white text, 999px radius, 0px 20px padding, 46px height.
• White-outlined secondary pill: same geometry, transparent fill on green, 1px white border, black text.
• Oversized 100px content-card radius — every mid-size surface inside the iPhone mockup carries this soft pill silhouette.
• Negative-tracking ladder: -1.68px at 56px, -1.20px at 40px, -0.75px at 25px, -0.54px at 18px, -0.24px at 12px.
• Zero secondary accent — black, white, green, gray do every job; the brand has spent its voltage on the canvas and held nothing back.

Colors

Source pages: home (/).

Brand & Canvas

• Cash Green ({colors.canvas-green} — #00e013) — frequency 2. Used as bg (2). The brand voltage, painted as a full-bleed canvas band. Carries the hero and the wordmark fill.
• Brand Mark Green ({colors.brand-mark} — #00e013) — alias of Cash Green used inside the top-left rounded-square wordmark on black.

Ink

• Black ({colors.ink} — #000000) — frequency 439. Used as text (220) and border (217). The universal ink for every type tier on green or white surfaces, and the fill of every primary CTA pill.
• Ink Mute ({colors.ink-mute} — #999999) — frequency 58. Used as text (29) and border (29). Helper copy and disabled chrome inside the iPhone mockup ("$20 to goal", "owed").
• Ink Disabled ({colors.ink-disabled} — #bfbfbf): A neutral step between ink-mute and hairline reserved for disabled chip outlines and inactive footer dots — observed in the iPhone mockup outline strokes.

On-Surface

• On Ink ({colors.on-ink} — #ffffff): Text on black pills and dark surfaces.
• On Green ({colors.on-green} — #000000): Black text on the Cash Green canvas — the structural rule for every word inside the hero band.
• On Green Soft ({colors.on-green-soft} — #ffffff): White text and white pill outline on Cash Green — used on the secondary nav button.

Surface

• Canvas Light ({colors.canvas-light} — #ffffff) — frequency 8. Used as bg (4). Default body band beneath the green hero.
• Surface White ({colors.surface-white} — #ffffff): Alias of canvas-light for CTA fills on green ("Get started" pill on white-ish surface).
• Surface App ({colors.surface-app} — #f7f7f7): The off-white inside the iPhone mockup chrome that holds the composited money rows.
• Surface Card ({colors.surface-card} — #ffffff): The fill of every mid-size content card composited inside the iPhone mockup.

Hairline

• Hairline ({colors.hairline} — #e5e5e5): 1px outlines on the iPhone mockup status rows.
• Hairline Mute ({colors.hairline-mute} — #cccccc): A slightly darker hairline on disabled chip outlines.
• Divider Soft ({colors.divider-soft} — #f0f0f0): The lightest divider used between footer link groups on the white band.

Link & Scrim

• Link ({colors.link} — #0000ee) — frequency 6. Used as text (3) and border (3). Default browser-blue used on legal footer links — the brand keeps the user-agent link colour unstyled rather than overriding it to black or green.
• Scrim ({colors.scrim} — #000000): Pure black overlay used as the modal backdrop and the mobile menu scrim.

Typography

Font Family

The display and UI tier is Cash Sans (proprietary) at the single weight 400. The variable font is loaded with no font-feature-settings modifications observed in the captured CSS. The fallback stack is "Cash Sans", "Helvetica Neue", helvetica, sans-serif.

When Cash Sans is unavailable, Inter (open-source via Google Fonts) at weight 400 with matching negative letter-spacing from -1.68px at 56px down to -0.24px at 12px renders the closest open-source approximation. General Sans at weight 400 also reads correctly. Avoid Helvetica or system-ui defaults — they round the letterforms wider than the brand needs.

Hierarchy

Principles

• Single weight is the brand. Display tiers and body tiers both render at weight 400. The one weight-700 token is an inline-bold variant used inside paragraph copy for emphasis — it is not a display weight.
• Negative tracking on every tier. Every typography token carries negative letter-spacing from -1.68px at 56px down to -0.24px at 12px. The tightened tracking is the brand's typographic signature.
• lineHeight tighter than display. Hero lineHeight: 53.2px is shorter than the fontSize: 56px — a deliberate over-stack that pulls the two display lines tighter than the cap height suggests.

Note on Font Substitutes

Cash Sans is proprietary. Use Inter (open-source via Google Fonts) at weight 400 with letter-spacing: -1.68px on the 56px display tier as the closest analogue. Avoid pushing display weight above 400 — at 500 the brand's confidence-through-restraint signature collapses, and at 700+ the page reads as a generic challenger-bank theme.

Layout

Spacing System

• Base unit: 4px (with 8 / 20 / 24 / 32 / 40 sub-tokens for finer work).
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 20px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 40px · {spacing.band-y} 90px · {spacing.band-x} 20px · {spacing.cta-x} 20px.
• Section padding: 90px 0px vertical on full-bleed bands; 40px 32px on footer rows; 0px 20px on horizontal CTA padding.
• Card internal padding: 32px 24px on the iPhone mockup chrome; 24px on the inner money-display rows.

Grid & Container

• Marketing page renders edge-to-edge: the green hero band fills the viewport width with no inner container. Content centres at roughly 1200px with the iPhone mockup pinned centre-band.
• Two-column hero layout: headline left, supporting copy + CTA right, iPhone mockup pinned centre.
• Footer collapses to a single-column link grid on mobile.

Whitespace Philosophy

Vertical rhythm is built on the 90px section-band stride. Each full-bleed band gets 90px 0px padding top and bottom; nothing inside the band tightens below 20px. The brand does not soften the boundary between the green hero band and the white body band — the surface transition is a hard edge.

Elevation & Depth

Decorative Depth

The iPhone mockup IS the depth system. The brand does not use CSS box-shadow on marketing surfaces — depth is supplied by the device-frame mockup composited over the green canvas, with the device's own bezel and inner-screen surface doing the elevation work. Literal CSS shadows would compete with the canvas voltage; the brand omits them entirely.

Shapes

Border Radius Scale

Photography Geometry

The brand uses a single composited iPhone mockup more than photography. The device frame is a real iPhone, rendered at roughly 720x1200px centre-band, with its inner screen displaying a stack of money-display rows. There is no other photography on the home page — no customer logos, no team photos, no lifestyle shots.

Components

Buttons

button-primary-pill — the dominant CTA system-wide.

• Background {colors.ink} (#000000), text {colors.on-ink} (#ffffff), type {typography.label} (12px / 500 / -0.24px), padding 0px 20px, height 46px, rounded {rounded.pill} 999px.

button-primary-pill-on-green — identical geometry, the same black pill rendered on the green canvas. The "Log in" CTA in the top-right nav.

button-secondary-pill-on-green — outline-style alternative on green.

• Background {colors.canvas-green} (transparent over green), text {colors.ink} (#000000), 1px stroke {colors.on-green-soft} (#ffffff) border, same pill geometry. The "Sign up" CTA in the top-right nav.

button-cta-arrow — white pill with an inline arrow used on green.

• Background {colors.surface-white} (#ffffff), text {colors.ink} (#000000), same pill geometry, with a small black arrow glyph appended after the label. The "Get started" CTA inside the green hero.

Hero & Bands

hero-band-green — the brand's signature band.

• Background {colors.canvas-green} (#00e013), text {colors.ink}, padding 90px 20px, no radius. Carries the hero headline left, supporting copy right, and the iPhone mockup centre.

hero-headline — the 56px headline on green.

• Text {colors.ink} (#000000) rendered in {typography.display-xxl} (56 / 400 / -1.68px), lineHeight: 53.2px. Set on the Cash Green canvas with no extra background fill.

hero-supporting-copy — the right-rail paragraph on green.

• Text {colors.ink} rendered in {typography.body-md} (18 / 400 / -0.54px). One paragraph, two-three lines, no decoration.

iPhone Mockup

iphone-mockup-surface — the composited device frame's inner screen.

• Background {colors.surface-app} (#f7f7f7), text {colors.ink}, padding 32px 24px, rounded {rounded.pill-alt} 100px. Holds a vertical stack of money-display rows.

card-status-row — the green-status progress row inside the mockup.

• Background {colors.surface-card} (#ffffff), text {colors.ink}, padding 24px, rounded {rounded.pill-alt} 100px. Contains a label, an amount-to-goal helper in {colors.ink-mute}, and a progress-bar-green fill.

card-money-display — the savings / borrow / bitcoin money rows.

• Background {colors.surface-card} (#ffffff), text {colors.ink} (#000000), type {typography.display-xl} (40px / 400 / -1.2px) for the amount, padding 24px, rounded {rounded.pill-alt} 100px. A title sits above the amount in {typography.body-md}; a helper sits below in {typography.caption} and {colors.ink-mute}.

progress-bar-green — the status fill bar inside card-status-row.

• Background {colors.canvas-green} (#00e013), height 8px, rounded {rounded.pill} 999px. The only place Cash Green appears inside the iPhone mockup surface.

Brand Mark & Nav

brand-mark-square — the rounded-square wordmark at the top-left.

• Background {colors.ink} (#000000), text {colors.canvas-green} (#00e013) — the green wordmark glyph rendered inside a black square at {rounded.pill-alt} 100px. The only place the green appears as a non-canvas fill.

top-nav — the top navigation bar on green.

• Background {colors.canvas-green} (#00e013), text {colors.ink}, padding 20px 32px, no radius. Holds the brand mark left, sign-up + log-in pills right, and a circular hamburger button at {rounded.circle} 50%.

Body & Footer

section-heading — the h2 rendered on either band.

• Text {colors.ink} rendered in {typography.display-xl} (40px / 400 / -1.2px). Used as section openers ("Earn, save, and do more with Cash App Green").

body-paragraph — default prose on the white body band.

• Background {colors.canvas-light} (#ffffff), text {colors.ink}, type {typography.body-md} (18px / 400 / -0.54px), no radius.

footer-row — the site-wide footer.

• Background {colors.canvas-light} (#ffffff), text {colors.ink-mute} (#999999), type {typography.caption} (14px / 400 / -0.28px), padding 40px 32px. Holds a multi-column link grid, app-store badges, and a legal regulatory text block.

legal-superscript — the 9px legal-mark superscript next to hero claims.

• Text {colors.ink} rendered in {typography.superscript} (9px / 400 / -0.54px). Inline next to numeric or claim copy as a footnote reference.

Do's and Don'ts

Do

• Paint Cash Green #00e013 as the full-bleed canvas of the hero band, not as a button fill.
• Hold every type tier at Cash Sans weight 400; reserve weight 500 for the 12px button label and weight 700 only for inline <b> emphasis at 20px.
• Render every CTA as a 999px pill at 46px height with 0px 20px padding — the brand never ships a rounded-rectangle button.
• Use the oversized 100px radius on every mid-size content card composited inside the iPhone mockup.
• Apply negative letter-spacing on every tier — -1.68px at 56px scaling down to -0.24px at 12px.
• Pin black text on Cash Green and white text on black {colors.ink} — those two pairings carry every type role.

Don't

• Don't use #00e013 ({colors.canvas-green}) as a button fill on a white surface — at oklch(0.79 0.26 143) the chroma is high enough that no text colour reads cleanly at button scale. The brand reserves the green for the canvas at 2-count frequency; promoting it to a button breaks the canvas-as-voltage rule.
• Don't introduce a third accent colour for highlights or success states — the system runs on green / black / white / gray and has no fifth role. A purple or red accent would compete with the canvas voltage.
• Don't render display tiers at weight 600+ — at 500 the brand's confidence-through-restraint signature starts to read as generic, and at 700+ the page becomes a different challenger-bank entirely.
• Don't drop the negative letter-spacing on body sizes — even the 12px label ships at -0.24px. Default tracking reads loose against the tight display ladder.
• Don't replace the 100px content-card radius with a customary 8-12px rectangle. The oversized fixed-pixel radius is the brand's mid-card silhouette; rectangles read as foreign.
• Don't apply CSS box-shadow to marketing surfaces — the iPhone mockup is the depth system, and literal shadows would compete with the canvas voltage at saturation 0.26.
• Don't override the default-browser link colour #0000ee on the legal footer — the brand intentionally keeps user-agent link styling for the regulatory block.

Responsive Behavior

Breakpoints

Touch Targets

• Pill buttons hit 46x46px minimum via the height token. On smaller screens, buttons retain the 46px height to maintain WCAG AAA.
• Hamburger menu and circular icons stay at 40x40px minimum.

Collapsing Strategy

• Display tier stair-steps 56 → 40 → 32 → 28px through the breakpoints.
• Hero layout collapses two-column → single-column, with the iPhone mockup pinning below the headline + supporting copy.
• The green canvas stays full-bleed at every breakpoint — the brand does not introduce a side gutter on mobile.

Image Behavior

The iPhone mockup uses srcset with art-direction crops at major breakpoints. Mobile crops focus on the centre of the device screen showing the savings row; desktop crops show the full multi-row composition.

Known Gaps

• Hover and pressed states: only the base CTA pairing (black pill on green / white pill on green) is documented. Hover, pressed, and focus specs are not captured from the marketing surface.
• Cash App Pay merchant palette: the merchant-checkout surface and the Cash App Card physical-card art tokens live on separate surfaces and are not part of this marketing-system spec.
• Logged-in app: Pay, Cash Card, Bitcoin, Stocks, Savings, and Borrow surfaces are out of scope; only the public marketing canvas at cash.app is captured.
• iPhone mockup inner-UI raster art: the green-status progress fill, the Bitcoin sparkline, and the circular Bitcoin glyph appear as composited raster art and are not enumerated as design tokens.
• Motion specs: the hero may carry a subtle parallax or zoom on scroll; precise easing and duration tokens were not captured.
• Mobile menu and modal: the hamburger-triggered overlay and any in-page modals are described in prose but not enumerated as token sets.