ledger.com
Design analysis
The footer prelude splits into a social/contact column and a newsletter form. A restrained panel background and clear email field create a practical transition into site-wide information.
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-1789146873-11.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-form ## 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 two-column newsletter and social-contact block on a subtly lighter black panel. The left side has a heading, short contact sentence, and a row of circular social buttons. The right side has a two-line heading, supporting copy, an email input, and a contrasting submit button in one horizontal form. Use `#111111` or `#151515` for the panel, `#ffffff` headings, `#b5b5b5` body text, 1px `#333333` borders, and pill controls with 999px radius. Keep the form label accessible even if visually hidden and include an inline validation/error state. Stack columns on mobile, make social links recognizable through accessible text labels, and include concise consent/privacy language below the form. ### Never - Never copy logos, product names, copy, illustrations, or imagery from the reference. - Never collect email addresses without explaining consent, use, and unsubscribe behavior.
kage