## 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/ledger-com/abaab959-f9d6-43c3-8f0c-09f584ac8799-1789146871-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ledger-com/abaab959-f9d6-43c3-8f0c-09f584ac8799-1789146801441-full.webp
- Component on Kage: https://kage.design/component/ledger-banner

## Before you start
Ask what the user's product is, who it serves, and what its brand voice and visual identity are. Apply the following principles to that product rather than reproducing the reference.

Create a wide, shallow audience-routing banner with a dark photographic or abstract background and a readable overlay. Align the heading and two audience options to a centered inner grid. Each option should have a short label and a compact pill button, separated by a thin vertical rule on desktop. Use a 28–32px heading, 14–16px labels, white or off-white buttons, and a 1px border around the panel. Approximate colors: background `#101820`, overlay `rgba(0,0,0,.45)`, text `#ffffff`, button `#f4f4f4`, radius 999px.

Make both routes fully clickable and keyboard accessible; on mobile stack them and remove the vertical divider.

### Never
- Never copy logos, product names, copy, illustrations, or imagery from the reference.
- Never let the background image reduce text contrast or make the two routes ambiguous.