## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cash-app/7c13f178-963d-4437-bcf4-5300340c2bdd-1789146441015-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cash-app/7c13f178-963d-4437-bcf4-5300340c2bdd-1789146439052.webp
- Design on Kage: https://kage.design/designs/cash-landing-page

## Before you start
Ask the user:
- What product are you building, and what is its one-sentence promise for the hero?
- Who is it for (consumers, businesses, engineers)?
- What brand assets already exist: name, logo/wordmark, brand colours (hex values), typeface, and real product screens or imagery they have the rights to show?

Wait for the answers. Everything below is applied to *their* product and brand assets, never to the reference.

## Page structure
1. **Top bar on the colour field** — logo mark alone at the left inside a black rounded-square container; at the right a tight cluster of three controls: a white pill button with a small arrow (primary signup), a black pill button (login), and a black circular hamburger button. No visible nav links — navigation is folded into the menu.
2. **Hero (full first viewport, ~100vh)** — one flat brand-colour field with a three-part composition:
   - Left third: oversized two-line headline, left-aligned, vertically optically centred.
   - Centre: a phone mockup showing a believable product UI (dark header band with title, search and avatar; a white rounded card with a masked account number and a very large balance numeral; two pill action buttons; a list row with icon, label and price). The device is deliberately cropped by the hero's bottom edge so it bleeds out of the section.
   - Right third: a narrow copy column (~30 characters per line) with a 2–3 line supporting paragraph and one white pill CTA with an arrow.
3. **Below the hero** — the reference capture renders only white space here; do not invent reference sections. When the user asks for more sections, extend the hero's language instead: alternate flat colour fields with white ones, give each section one focal product object, and keep every section to headline + short paragraph + a single pill CTA.

## Design language
- **Colour as backdrop:** one saturated brand colour (≈#00D632 vivid green in the reference — substitute the user's brand colour) floods the entire first viewport edge-to-edge. No gradients, textures or photography. Pair it with pure black (#000) for text and controls and white (#FFF) for cards and primary pills.
- **Hierarchy by scale alone:** one type family, extreme scale contrast — headline ~64–88px with tight leading (~1.05) and sentence case in two lines max; the in-app balance numeral ~44–56px bold; body copy 14–15px; button labels 13–14px. Nothing else competes.
- **Grid:** asymmetric three-column hero — headline | device | copy. Outer margins generous (~40–64px). The cropped device at the fold creates the tension; the narrow copy column keeps the colour field dominant.
- **Type:** a single geometric grotesque sans for everything (headline, body, buttons, and the UI inside the mockup). No serif pairing; the size range does the pairing work.
- **Shape system:** fully rounded pills everywhere — buttons, a circular menu button, a squircle logo container (~25–30% radius), and ~16–24px radius cards inside the phone screen.
- **Buttons:** two treatments only — white pill with black text as primary on the colour field, black pill with white text as secondary; end labels with a small (10–12px) arrow glyph.
- **Depth:** flat. No shadows on buttons or text; the only permitted elevation is a soft ambient shadow under the phone frame.
- **Density:** very low — roughly fifteen elements in the hero. Whitespace is the main material; resist filling the colour field.
- **Mockup realism:** the device screen must look like a working app: status bar, dark translucent header, balance card with masked number, pill actions, list rows. Build it from the user's own product, with their own data.
- **Motion:** quiet — pill buttons invert colours on hover with the arrow nudging right; the device may rise slightly on scroll. No parallax or showpiece animation.

## Never
- Do not use Cash App's logo, dollar-sign mark, wordmark, tagline ("The way money should work") or any of its copy.
- Do not recreate Cash App's app screens, balance values or list content inside the mockup — show the user's own product with their own data.
- Do not adopt the exact green/black/white palette unless the user's brand genuinely owns a similar colour; derive the field colour from their assets.
- Never present the result as Cash App or imply any affiliation.