ravio.com
Design analysis
A dark newsletter band presents a clear promise on the left and a compact email field plus subscribe button on the right.
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/ravio/21fc8fab-2ae9-4a70-87c8-10ebee6c9a8e-1789142160-8.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ravio/21fc8fab-2ae9-4a70-87c8-10ebee6c9a8e-1789141806972-full.webp - Component on Kage: https://kage.design/component/ravio-form ## Before you start Ask what ongoing value the user's newsletter or update stream provides, what email consent language is required, and what brand tone to use. Apply the principles below to that product. Build a full-width dark subscription strip using near-black charcoal (#111619) with a subtle bottom border. Align a concise two-line promise on the left in white, around 18–20px semibold, and an inline email form on the right. Use a dark gray input (#22272a) with #8f9697 placeholder text, 1px #3a4142 border, 8px radius, and a white or very light submit button. Keep the strip around 120–160px tall with generous horizontal padding and a max-width inner container. Add validation, clear focus rings, success/error messaging, and stack the form beneath the copy on narrow screens. Never: copy the reference's product name, newsletter copy, logos, imagery, exact form labels, or branding.
kage