## 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/fly-io/55088b40-21c4-4b5b-a67c-8a1494f33e2d-1789073900-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fly-io/55088b40-21c4-4b5b-a67c-8a1494f33e2d-1789073866-full.webp
- Component on Kage: https://kage.design/component/fly-footer

## Before you start
Ask the user what their product is, who it serves, and what visual brand system it uses. Then apply the principles below to create a version for that product rather than reproducing the reference.

## Design language

Build a compact newsletter-signup footer section for a software product website. Treat it as a calm closing band: useful, understated, and clearly separated from the content above without feeling like a large promotional hero.

### Layout and alignment
- Use a full-width footer band with a maximum content width of approximately 1150–1200px and horizontal padding of 24px on desktop, reducing to 20px on mobile.
- Add a subtle horizontal divider at the top of the section.
- On wide screens, arrange the content in one row: the signup explanation on the left and the form on the right. Vertically center both groups.
- Keep the explanatory block flexible but constrain its text width to roughly 560px so the description remains readable.
- Place the form controls in a single horizontal row on desktop: name field, email field, then primary submit button. Use consistent gaps of about 12px.
- Center a small copyright or legal line beneath the main row, with a generous top gap. It should read as secondary metadata rather than competing with the signup form.
- On narrow screens, stack the text and form, make fields full width, and allow the button to become full width or remain comfortably sized depending on the product’s mobile form conventions.

### Typography hierarchy
- Use a compact uppercase or small-label heading for the invitation, with noticeable tracking and medium-to-bold weight.
- Use a muted sentence below it in a smaller size, around 14–15px, with relaxed line height.
- Use 14–16px text inside form fields and a similarly sized, slightly heavier submit label.
- Keep the legal line small, around 12px, and lower contrast.
- Use the product’s own typeface if available; otherwise choose a clean modern sans-serif with strong readability at small sizes.

### Colour
- Start with a deep, nearly black tinted background such as `#18122f` or `#1b1433`, adapting the hue to the product brand.
- Use a very subtle divider around `#2b2345`.
- Set the heading and button text near `#f4f0ff`.
- Use muted lavender-gray for descriptive, placeholder, and legal text, approximately `#9b93ad` to `#aaa2bb`.
- Give the primary button a saturated brand accent, such as violet `#7c3aed` or `#843cf0`, with a slightly brighter hover state.
- Ensure the button has strong text contrast and all field text and focus states meet accessible contrast requirements.

### Borders, controls, and radius
- Give text fields a transparent or slightly lighter dark fill, such as `#211a3d`, with a 1px border around `#40365d`.
- Use a moderate corner radius of approximately 8px; keep the button radius consistent with the inputs.
- Inputs should have comfortable horizontal padding of 13–14px and a height of approximately 40px.
- Use distinct but restrained focus styling: an accent-coloured border or visible focus ring with sufficient contrast.
- The submit button should be filled rather than outlined, with horizontal padding of about 18px and a minimum height matching the inputs.

### Interaction
- On hover, slightly brighten the submit button and transition the colour smoothly in around 150–200ms.
- On focus, make the active field unmistakable without changing the layout.
- Preserve clear labels or accessible `aria-label` values for the name and email fields even if the visual treatment uses placeholders.
- Validate the email field accessibly and provide concise inline feedback without causing the footer to jump unexpectedly.
- Make the entire form keyboard navigable in a logical left-to-right order.

## Never
- Never copy logos, product names, brand marks, or identifying references from the reference.
- Never reuse the reference’s exact newsletter copy, copyright text, placeholder text, or button label.
- Never copy illustrations, imagery, icons, or decorative artwork from the reference.
- Never reproduce the reference as a pixel-perfect clone; adapt the layout principles, hierarchy, and mood to the user’s product and brand.
- Never sacrifice mobile usability, keyboard navigation, or accessible contrast for visual similarity.