Kage Design logo kage
ledger.com
ledger.com call to action component

Design analysis

After a large breathing space, a focused content block reframes the product around informed decisions and ends with one clear app action. The simplicity gives the CTA authority.

Prompt preview
## 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-7.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-cta

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

Build a focused dark CTA section with a constrained text column rather than a full-width card. Use a confident 36–44px heading, two or three lines of explanatory copy, and one light pill button. Keep the section spacious, with the content aligned to the same left edge as earlier sections and no competing secondary action. Use near-black `#050505`, white text, muted gray copy, and a neutral button around `#f5f5f5` with dark text. Add a subtle accent only in a small label or hover state.

The button should have a visible focus ring and a clear loading/disabled state. On mobile, reduce heading size to 30–34px while preserving the generous vertical rhythm.

### Never
- Never copy logos, product names, copy, illustrations, or imagery from the reference.
- Never fill a spacious CTA with decorative content that weakens the single conversion goal.

More components