explainx.ainewsletter3.4k
Back to designs

DESIGN.md · explainx registry

Cash App

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 System#design#ui#ux#template
Get a custom design.md for your product
DESIGN.md (markdown body)
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

  1. Financial Brutalism: Uses sharp edges, massive typography, and high-vibrancy green to create a disruptive, non-corporate feel.
  2. The "Green" Money: Cash App Green (#00D632) is synonymous with digital currency and fast P2P transfers.
  3. Cultural Relevance: Integrates street-wear aesthetics, custom illustrations, and high-energy motion to feel more like a lifestyle brand than a bank.
  4. 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.

Usage

  1. Copy DESIGN.md into your project or paste it into your IDE agent chat.
  2. Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
  3. When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.

Common questions

What is Cash App on explainx.ai?
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. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
What is DESIGN.md?
DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?
Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
Where is the source repo?
Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
How current is this DESIGN.md?
Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
Need a fresh DESIGN.md from scratch?
Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.

Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.

Reference →DESIGN.md generator →Skills registry →

List Your Design.md

Share your design system with AI agents worldwide

GET_STARTED →