## Reference images

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

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/cash-app/7c13f178-963d-4437-bcf4-5300340c2bdd-1789146485-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cash-app/7c13f178-963d-4437-bcf4-5300340c2bdd-1789146441015-full.webp
- Component on Kage: https://kage.design/component/cash-navigation

## Before you start
Ask the user what their product is, who it serves, and what brand personality, colours, and interaction priorities should guide the build. Apply the following principles to that product rather than reproducing the reference.

Build a compact, full-width product navigation bar over a saturated hero background. Keep the brand mark or product wordmark aligned to the far left, and place two concise account actions plus a circular menu control on the far right. Use a restrained sans-serif type hierarchy, approximately 14px for actions and 12–13px for secondary labels. Use generous horizontal padding of about 16–24px, vertically center every control, and keep the bar around 56–64px tall.

Use a high-contrast palette adapted to the user's brand; for a similar energetic direction, start with a vivid green around #00E51A, near-black around #050505, and white around #FFFFFF. Make the primary account action a white pill with dark text, the secondary action a dark pill with a subtle light outline, and the menu button a dark circular control. Use full pill radii for buttons, a 1px translucent border where needed, and no heavy shadow. Ensure keyboard focus states, adequate touch targets, and a menu control that visibly responds on hover and focus.

Never: use the reference's logo, product name, exact copy, illustrations, imagery, or branded symbols.