## 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-1789146872-5.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-2

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

Design a shallow split promotional banner with concise copy on the left and a cropped lifestyle/product image on the right. Use a dark-to-slate gradient, 1px muted border, and a clear heading around 26–30px. Add one outlined or neutral pill CTA beneath two lines of supporting copy. Keep the image anchored to the right edge and allow it to bleed vertically within the panel while preserving a readable text area. Use `#0d0f12`, `#c3c9d0`, and a soft white button; use a 24px panel radius only if it fits the user's brand.

On mobile, stack the image after the copy and retain a minimum contrast ratio of 4.5:1. Make the CTA specific to the promoted behavior.

### Never
- Never copy logos, product names, copy, illustrations, or imagery from the reference.
- Never use a decorative image that obscures the offer or turns the banner into an ad with no useful action.