## 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-1.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-hero

## 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 dark split-layout hero inside a centered max-width container. Put a small uppercase eyebrow, a bold two-to-three-line headline, concise supporting copy, and one filled primary CTA plus a lower-emphasis secondary CTA on the left. Use a large product or editorial visual on the right, cropped cleanly with a soft tonal background. Under the text, add a horizontal row of three or four compact proof points with small icons and vertical separators. Use white typography on `#050505`, an orange or brand-specific accent around `#ff6b00` for the primary button, 48–64px heading type, 16px body copy, 24–32px gaps, and subtle `#333333` rules. Buttons should be pill-shaped with 999px radius and clear hover feedback.

On smaller screens, stack the image below the copy and convert proof points into a wrapping grid. Keep the hero visually decisive and reserve the strongest contrast for the main CTA.

### Never
- Never copy logos, product names, copy, illustrations, or imagery from the reference.
- Never use a generic oversized headline without supporting product context or a clear action.