A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
10type steps
3radius steps
10pxspacing base
Cash App, in one page
Cash App is a fintech rendered as a pop-art club flyer. The canvas is near-black, the type is loud, the accent is one violently saturated green, and the most important screen in the app — the $-amount keypad — is essentially a 1990s ATM reimagined as a high-fashion poster. Where Venmo leans social, Cash App leans cultural: the brand has dressed Megan Thee Stallion in custom Cash Cards, paid YouTubers in $CASHTAG drops, and turned the act of sending money into a remix of Black culture, hip-hop typography, and DIY screen-print energy. The UI rejects every fintech cliche — no charts, no investing-app blues, no bank-app navy — and instead asks you to type a number, name a person, and hit Pay.
The accent is Cash Green (#00D632) — a near-traffic-light green that's deliberately too-bright on near-black canvas, the way a neon sign is too-bright in a dark bar. It's the only color that touches money: the Pay button, the $-amount display when valid, the boost glyphs on the Cash Card, and the Bitcoin and Stocks indicators when up. Every other accent is muted by comparison — the Cash Card itself is matte black with a custom Cashtag etched in a single color, the Card tab uses the user's chosen card art as the hero, and the Activity feed alternates between green (received) and gray (sent) with no other chromatic noise.
Typography is Cash Sans, an in-house geometric sans Block (the company) commissioned to replace their earlier reliance on Helvetica Now. It's slightly condensed, has a tall x-height, and carries a deliberate stencil-adjacent personality at display weights — the kind of letter you see on a basketball jersey or a vinyl record sleeve. At keypad sizes (the giant $-amount in the middle of the screen), Cash Sans Mono Bold renders at 72-96pt and dominates the entire viewport. The system is intentionally loud — Cash App does not whisper — and Cash Sans is built to scream legibly.
Key Characteristics:
- Near-black canvas (
#000000) with#0F0F0Ffor slightly elevated surfaces — true black, not warm gray - Cash Green (
#00D632) is the single brand accent — Pay CTA, valid amount, success states, active tab glyph - Giant $-amount keypad as the home screen —
$0at 96pt+ Cash Sans Mono Bold, custom 0-9 keypad below - Cash Card is matte black with the user's
$Cashtagengraved in a chosen accent color — the card is the brand - Bottom tab bar: 5 tabs as icon-only with NO labels (Money / Card / Pay / Activity / Investing-Bitcoin)
- The Pay tab is a custom dollar-sign glyph, larger than the other tabs, centered as the visual anchor
- All-caps, condensed, slightly oversized type for transaction headers and section labels
- Cash Sans across the board; Cash Sans Mono on amounts, $Cashtags, and the keypad
- Pure-black surfaces with hairline
#1A1A1Adividers — no shadows, no blur, only contrast - Boosts (Cash Card discounts) use custom icon art with neon-saturated palettes pulled from artists Block partners with
Do's and don'ts
Do
- Use
#000000pure black as the canvas — not warm gray, not#111 - Use Cash Green
#00D632as the ONLY accent — Pay button, success states, active tab glyph - Set the $-amount in Cash Sans Mono at 96pt+ on the Pay screen — this is the signature
- Use Cash Sans Black (weight 900) for screen titles like "Money", "Card", "Activity"
- Render every $-amount and every $Cashtag in Cash Sans Mono with tabular numerals
- Keep the tab bar icon-only with NO labels — and make the Pay (center) tab visually larger
- Use random saturated avatar background colors (pink, orange, blue, green, purple) for users without photos
- Use commissioned hand-drawn illustration for Boost glyphs — not stock icons
- Put black text on the green Pay button (not white) — the contrast is the signature
- Make the keypad large — 96pt × 64pt buttons in a 3×4 grid, "0" double-width
Don't
- Don't use blue or navy anywhere — Cash App is anti-bank-app blue
- Don't add shadows — Cash App is flat; depth is fill-color contrast only
- Don't use
#111or warm dark grays as canvas — pure#000000is core - Don't dim inactive tab icons — Cash App keeps them at full white opacity
- Don't add tab bar labels — this is a hard rule
- Don't use a serif or humanist sans — Cash Sans is geometric, slightly condensed, urban
- Don't render amounts in proportional type — always Cash Sans Mono with tabular numerals
- Don't use the $Cashtag without the "$" — the dollar sign is part of the brand
- Don't crowd the Pay screen — the giant amount needs 40% of the viewport
- Don't use chart-y Bitcoin orange anywhere except the Bitcoin tab and BTC line — keep accents disciplined
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Cash App design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- The accent is Cash Green: #00d632
- Cash Green: #00d632
- Cash Green Pressed: #00b829
- Cash Green Dim: #008c20
- Cash Black: #000000
- Card Black: #0a0a0a
- Bitcoin Orange: #f7931a
- Boost Red: #ff453a
- Canvas Black: #000000
- Surface 1: #0f0f0f
Type:
- families: Cash Sans, Cash Sans Mono, Mono, Weights
- scale: 11, 13, 15, 16, 17, 22, 28, 48, 64
- weights: 400, 500, 700
Shape:
- radius: 12, 16, 30
Spacing: 10, 12, 16, 32
Rules:
- Use `#000000` pure black as the canvas — not warm gray, not `#111`
- Use Cash Green `#00D632` as the ONLY accent — Pay button, success states, active tab glyph
- Set the $-amount in Cash Sans Mono at 96pt+ on the Pay screen — this is the signature
- Use Cash Sans Black (weight 900) for screen titles like "Money", "Card", "Activity"
- Render every $-amount and every $Cashtag in Cash Sans Mono with tabular numerals
- Keep the tab bar icon-only with NO labels — and make the Pay (center) tab visually larger
Avoid:
- Don't use blue or navy anywhere — Cash App is anti-bank-app blue
- Don't add shadows — Cash App is flat; depth is fill-color contrast only
- Don't use `#111` or warm dark grays as canvas — pure `#000000` is core
- Don't dim inactive tab icons — Cash App keeps them at full white opacity
- Don't add tab bar labels — this is a hard rule
- Don't use a serif or humanist sans — Cash Sans is geometric, slightly condensed, urban
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Cash Green (
#00D632): THE brand accent — Pay CTA fill, valid-amount glow, success states, active tab glyph, Cashtag confirmation. Used aggressively against black. - Cash Green Pressed (
#00B829): Active/pressed state on the Pay button. - Cash Green Dim (
#008C20): Disabled Pay button, secondary green moments.
Brand Identifiers
- Cash Black (
#000000): Canvas — pure black, the matte-card finish. - Card Black (
#0A0A0A): Card surface emboss — a hair lighter than canvas to imply depth on the physical Cash Card render. - Bitcoin Orange (
#F7931A): Bitcoin tab glyph, BTC line in Investing. - Boost Red (
#FF453A): Decline states, Stocks down indicators.
Canvas, Surfaces & Dividers
- Canvas Black (
#000000): Primary canvas — every screen. - Surface 1 (
#0F0F0F): Elevated surfaces — bottom sheets, cards, the Activity row press state. - Surface 2 (
#1A1A1A): Pressed states, input field fill, keypad button press. - Divider (
#1F1F1F): Hairline dividers between Activity rows and list items — barely visible by design. - Hairline (
#2A2A2A): More visible divider used sparingly on sheets.
Text
- Text Primary (
#FFFFFF): Pure white — every primary text, amounts, names, tab glyphs. - Text Secondary (
#9E9E9E): Metadata — "Sent to", date stamps, balance subtitle. - Text Tertiary (
#6E6E6E): Disabled labels, placeholder text. - Text Muted Green (
#005C16): The faint green ghost when the amount field is empty showing "$0".
Semantic
- Success Green (
#00D632): Same as brand — money received, payment sent confirmed. - Error Red (
#FF453A): Insufficient funds, declined card, validation errors. - Warning Amber (
#FFA300): Pending state on Activity rows, identity verification needed.
Light Mode
Cash App ships a light mode primarily for accessibility — but the brand identity lives in the dark. Light mode flips canvas to white, primary text to black, and surfaces to warm gray, while Cash Green stays identical.
- Light Canvas (
#FFFFFF) - Light Surface 1 (
#F5F5F5) - Light Surface 2 (
#EEEEEE) - Light Text Primary (
#000000) - Light Text Secondary (
#6E6E6E) - Cash Green (light) (
#00B829): Slightly darkened to maintain AA contrast on white.
Type scaleRead the full spec
Font Family
- Primary:
Cash Sans(proprietary, drawn for Block by an in-house type team — released ~2020) - Mono:
Cash Sans Mono— tabular numerals, used for all $-amounts, $Cashtags, and the keypad - Weights: Light (300), Regular (400), Medium (500), Bold (700), Black (900)
- Fallback stack:
-apple-system, BlinkMacSystemFont, 'Helvetica Now', 'SF Pro Text', sans-serif— Cash Sans is closest to Helvetica Now and SF Pro at body sizes - Mono fallback:
'SF Mono', 'Roboto Mono', 'Menlo', monospace - Google Fonts substitute:
Interfor Cash Sans,JetBrains Monofor Cash Sans Mono
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Amount Hero (Keypad) | Cash Sans Mono | 96pt | 700 (Bold) | 1.0 | -2pt | The giant $-amount on the Pay screen — shrinks as digits add |
| Amount Receive (Confirmation) | Cash Sans Mono | 64pt | 700 | 1.0 | -1.5pt | "Pay $20" confirmation modal |
| Balance Display | Cash Sans Mono | 48pt | 700 | 1.0 | -1pt | The balance shown on Money tab |
| Screen Title | Cash Sans | 28pt | 900 (Black) | 1.1 | -0.5pt | "Money", "Card", "Activity" — set in BLACK weight, often all-caps for headers |
| Section Header | Cash Sans | 22pt | 700 | 1.15 | -0.3pt | "Recent activity", "Boosts" |
| Cashtag Display | Cash Sans Mono | 22pt | 500 (Medium) | 1.2 | 0pt | The user's "$jackdorsey" shown on their profile and Cash Card |
| Card Label | Cash Sans | 16pt | 500 | 1.3 | 0pt | Activity row name, "From John Smith" |
| Body | Cash Sans | 15pt | 400 | 1.4 | 0pt | About text, settings descriptions |
| Metadata | Cash Sans | 13pt | 400 | 1.3 | 0pt | "Yesterday at 3:42pm", row subtitles |
| Button Label | Cash Sans | 17pt | 700 | 1.0 | 0pt | "Pay", "Request", "Add Cash" |
| Tab Label | Cash Sans | 0pt | — | — | — | NO LABELS on tab bar — icons only |
| All-Caps Section | Cash Sans | 11pt | 700 | 1.2 | 1.5pt | "BOOSTS", "RECEIVED", "PENDING" — small caps headers |
| Cashtag in body | Cash Sans Mono | 15pt | 500 | 1.3 | 0pt | "$johndoe" rendered inline in messages |
Principles
- Mono for money, sans for everything else: Every $-amount, every $Cashtag, every Bitcoin price uses Cash Sans Mono with tabular numerals — this is non-negotiable. The kerning is consistent so amounts align visually in a vertical list.
- Black weight (900) for screen titles: "Money", "Card", "Activity" are set in the heaviest available weight — Cash Sans Black — at 28pt. This is the visual signature.
- Tight negative tracking at hero sizes: -2pt at 96pt down to 0pt at body — Cash Sans is condensed and the negative tracking pulls digits together for the keypad's poster-like density.
- All-caps for micro-headers: "RECEIVED", "PENDING", "BOOSTS" are set in 11pt Bold all-caps with +1.5pt letter spacing — a deliberate retro/streetwear gesture.
- Pure white on pure black for primary: No off-white, no warm gray. Cash App's contrast is hard and uncompromising — this is core to the aesthetic.
Components and layoutRead the full spec
Buttons
Primary Pay CTA (the Pay button)
- Background:
#00D632 - Text:
#000000(yes — black text on green, NOT white) - Font: Cash Sans 17pt weight 700
- Padding: 16pt vertical, 32pt horizontal
- Corner radius: 30pt (effectively a pill at 60pt button height)
- Height: 60pt minimum on the Pay screen
- Pressed: background
#00B829, scale 0.97 - Disabled (amount = 0 or invalid): background
#1A1A1A, text#6E6E6E - Haptic:
.notificationOccurred(.success)on send confirmation
Request Button (twin of Pay)
- Background:
#1A1A1A(Surface 2) - Text:
#FFFFFF - Font: Cash Sans 17pt weight 700
- Same dimensions as Pay
- Pressed: background
#2A2A2A
Secondary Pill Button ("Add Cash", "Cash Out", "Add to Bitcoin")
- Background:
#1A1A1A - Text:
#FFFFFF, Cash Sans 15pt weight 500 - Padding: 10pt vertical, 18pt horizontal
- Corner radius: 500pt (full pill)
- Height: 36pt
Keypad Button (0-9, decimal, backspace)
- Container: 96pt × 64pt (3-column grid)
- Background: transparent (only press state shows fill)
- Text:
#FFFFFF, Cash Sans Mono 32pt weight 400 - Pressed: background
#1A1A1A, scale 0.96 - Haptic:
.impactOccurred(.light)per tap - The "0" button spans 2 columns (twice as wide); decimal is below the "9"; backspace is to the right of "0" with a custom glyph
Boost Button (Cash Card)
- Pill container with custom artist-designed glyph (e.g., a coffee cup for Starbucks Boost, a fork for a restaurant Boost)
- Background:
#0F0F0F - Border: 1pt
#1F1F1F - Padding: 12pt vertical, 16pt horizontal
- Corner radius: 16pt
- Glyph is the visual — text "Activate Boost" sits below in Cash Sans 13pt Medium
#FFFFFF
Cards & Containers
Cash Card Render (the hero on Card tab)
- Aspect ratio: 1.586:1 (real credit card ratio)
- Background:
#000000(matte black — the physical card is matte) - Border: 1pt
#1F1F1F(a hairline edge to imply the card thickness) - Corner radius: 12pt
- $Cashtag etched on front: Cash Sans Mono 24pt weight 700 in the user's chosen accent color (Cash green, neon pink, white, etc.) — positioned bottom-left with 24pt inset
- Cash App "$" logo: bottom-right, 32pt, in the same accent color
- Shadow: NONE — the card sits flat on the black canvas; the slight border is the only depth cue
- Tap: scale 0.99 briefly
Activity Row
- Height: 64pt minimum
- Background:
#000000 - Leading: 40pt circular avatar (initial-letter fallback in a randomly-assigned bright color)
- Middle: Name in Cash Sans 16pt weight 500
#FFFFFF→ "Sent to [Name]" / "From [Name]" in Cash Sans 13pt weight 400#9E9E9E - Trailing: $-amount in Cash Sans Mono 17pt weight 500 —
#00D632if received (with "+"),#FFFFFFif sent (with "-") - Divider: 0.5pt
#1F1F1Fbottom hairline - Tap: background flashes
#0F0F0F, scale 1.0 (no scale; just background)
Balance Tile (Money tab top)
- Container: full-width, 24pt horizontal padding, no card chrome
- Layout: "Cash balance" label in Cash Sans 11pt weight 700 all-caps
#9E9E9Eletter-spaced +1.5pt → balance "$1,247.92" in Cash Sans Mono 48pt weight 700#FFFFFFwith the cents at 24pt - Below: two pill buttons side-by-side, "Add Cash" and "Cash Out" (Surface 2 pill style)
Boost Card
- Stack of stylized illustrated cards in the Cash Card tab — each features a custom artist illustration as the hero (e.g., a hand-drawn coffee cup, a vinyl record)
- Container: rounded rectangle 16pt radius, full width on the Cash Card tab
- Background: dark gradient or solid accent matching the boost's brand partner
- Text overlay: boost name in Cash Sans 22pt weight 700 white, percentage discount in Cash Sans 32pt weight 900
- Tap: subtle scale 0.98
Navigation
No Top Nav Bar (almost ever)
- Cash App's home screens have NO traditional nav bar — the screen title (e.g., "Money") sits in the content area as a 28pt Black-weight word, left-aligned, with the user's profile avatar in the top-right corner
- 16pt top safe-area inset before the title begins
Bottom Tab Bar (the signature)
- Height: 56pt + safe area
- Background:
#000000(pure black) - Top divider: 0.5pt
#1F1F1F - 5 tabs: Money / Card / Pay / Activity / Bitcoin (or Investing depending on user config)
- ALL ICONS ONLY — NO LABELS, ever
- Icon size: 28pt (larger than typical iOS for legibility without labels)
- Pay tab is the CENTER tab and uses a distinct visual: a large "$" glyph rendered slightly bigger (32pt) — sometimes inside a circle on the older designs
- Active state: glyph fills with Cash Green (
#00D632) - Inactive: white outline glyphs
#FFFFFFat full opacity (Cash App keeps inactive tabs prominent — they don't dim them) - Tap haptic:
.selectionChanged()
Modal Sheet (Confirm Payment, Profile, Settings)
- Slides up from bottom over a dimmed black overlay (
rgba(0,0,0,0.8)) - Top corners: 24pt radius
- Background:
#0F0F0F(Surface 1) - Drag indicator: 4pt × 36pt pill at top,
#2A2A2A - Dismiss: swipe down or tap outside
Distinctive Components
The $-Amount Keypad (Pay tab)
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Keypad amount caps at 72pt; balance display at 40pt |
| iPhone 13/14/15 | 390pt | Standard 96pt amount; full keypad |
| iPhone 15/16 Pro | 393pt | Dynamic Island respected; profile avatar moves below it |
| iPhone 15/16 Pro Max | 430pt | Amount can render at 108pt; keypad scales 110pt × 72pt |
| iPad | 768pt+ | Two-column layout: keypad and amount on left, recipient browser on right; rarely used |
Dynamic Type
- Most labels honor Dynamic Type
- The $-amount on Pay screen does NOT scale — it's auto-sized based on digit count; user scaling is overridden because layout is critical
- Tab glyphs are fixed 28pt (Pay glyph 32pt)
- Activity row $-amounts honor scaling but clamp at 22pt max
Orientation
- Portrait only — Cash App locks to portrait everywhere
Touch Targets
- Keypad buttons: 96pt × 64pt — well above 44pt minimum
- Tab bar icons: 28pt glyph in a 56pt-wide hit area
- Pay/Request buttons: 60pt height
- Activity row: full-width 64pt hit area
Safe Area Handling
- Top: 16pt inset below safe-area top before the screen title
- Bottom: tab bar pins above the home indicator
- The Pay screen's keypad sits directly above the tab bar with only 8pt gap
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-cash-app {--page-bg: #000000;
--page-bg-gradient: none;
--text-color: #ffffff;
--heading-color: #ffffff;
--link-color: #00d632;
--link-hover-color: #00a326;
--border-color: #2e2e2e;
--card-bg: #000000;
--card-shadow: 0 1px 2px rgba(255,255,255,0.06);
--card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
--header-bg: #141414;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #000000;
--footer-text-color: #a6a6a6;
--button-bg: #00d632;
--button-text-color: #000000;
--button-hover-bg: #00a326;
--button-border: none;
--button-border-radius: 16px;
--button-secondary-bg: #0f0f0f;
--button-secondary-text-color: #ffffff;
--button-secondary-hover-bg: #1f1f1f;
--button-secondary-border: 1px solid #2e2e2e;
--prompt-bg: #0d0d0d;
--prompt-text-color: #ffffff;
--base-font: var(--font-helvetica);
--heading-font: var(--font-mono);
--card-border-radius: 16px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/finance/cash-app/DESIGN.md· 24.4 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.