Cash App

name Cash App

colors background: "#ffffff" foreground: "#000000" brand: "#00d632" # Cash App Green muted: "#a0a0a0" border: "#e0e0e0" card: "#ffffff" accent: "#00d632" dark: background: "#000000" foreground: "#ffffff" muted: "#666666" border: "#1a1a1a" card: "#121212" accent: "#00d632"

typography fontFamily: sans: "Cash Market, Inter, system-ui, sans-serif" body: fontSize: "16px" lineHeight: "1.4" heading: fontWeight: "900" # Extra bold for brutalist look letterSpacing: "-0.03em"

rounded default: "0px" # Cash App often uses sharp, brutalist edges md: "8px" full: "9999px"

Design System: Cash App

Overview

Cash App's design system is "Financial Brutalism." It is a high-energy, high-contrast environment that rejects traditional banking aesthetics in favor of a bold, youth-centric, and slightly "glitchy" visual language.

Design Philosophy

• Financial Brutalism: Uses sharp edges, massive typography, and high-vibrancy green to create a disruptive, non-corporate feel.

• The "Green" Money: Cash App Green (#00D632) is synonymous with digital currency and fast P2P transfers.

• Cultural Relevance: Integrates street-wear aesthetics, custom illustrations, and high-energy motion to feel more like a lifestyle brand than a bank.

• Immediate Action: The "Pay" and "Request" buttons are the absolute focal point of the interface.

Colors

• Screamin' Green (#00D632): A high-saturation green that represents the "new" money.

• Pure Contrast: Heavy use of absolute Black (#000000) and White (#FFFFFF) to create a high-impact, graphic feel.

• Dark Void: Dark mode is pure black, allowing the neon green to pop aggressively.

Typography

• Cash Market: A custom, heavy-set sans-serif that provides a bold, confident, and slightly "industrial" voice.

• Massive Scales: Uses oversized font sizes for balances and primary labels to create a "monumental" hierarchy.

Components

• The "$Cashtag" Bar: A prominent, high-contrast search bar for finding people instantly.

• Brutalist Cards: Content units with 0px rounding, heavy 1px borders, and solid color backgrounds.

• The "Activity" Feed: A clean, high-density list with vibrant profile icons and bold status indicators.

Visual Effects

• Glitches & Motion: Uses fast, snappy, and occasionally "glitchy" animations to mimic the speed of the digital internet.

• Hard Shadows: Uses solid, non-blurred shadows to create a 3D-graphic look.

• Patterned Backgrounds: Uses repeating $ symbols or custom geometric patterns in marketing sections.