## 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/attio-com/853806da-b35e-493c-a2ae-f3b42d8e3fbb-1789060461-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/attio-com/853806da-b35e-493c-a2ae-f3b42d8e3fbb-1789060424-full.webp
- Component on Kage: https://kage.design/component/attio-feature-grid-3

## Before you start
Ask me what my product is, who it is for, and what its brand personality and visual system are. Then apply the principles below to create an original newsletter signup section for that product rather than reproducing the reference literally.

## Design this component
Build a wide, minimal newsletter subscription band suitable for a product website footer or transition into the footer. The section should feel editorial, calm, and highly structured: a short two-line message aligned on the left and an email capture form aligned horizontally on the right.

### Layout and alignment
- Place the component inside a centered page shell with a maximum width around 1200–1280px.
- Use a full-width section with a thin top border and a thin bottom border; preserve generous horizontal gutters of roughly 52–76px on desktop.
- Arrange the content in one horizontal row on larger screens, vertically centered within a spacious band approximately 190–210px tall.
- Keep the message block on the left and the form on the right. The form should be a compact flex row with the input slightly wider than the button.
- On screens below roughly 700px, stack the message and form, align them to the left, and allow the form controls to become fluid-width while retaining a comfortable gap.
- Add a subtle technical/grid detail above or around the band only if it suits the user's brand: use evenly spaced vertical rules, clipped to the section width, and keep them decorative rather than dominant.

### Typography hierarchy
- Use a modern sans-serif with clean geometry and strong legibility.
- The first line is the primary statement: medium or semibold weight, approximately 24–26px on desktop, with tight line-height around 1.1.
- The second line is supporting copy: the same or slightly smaller size, regular weight, and a muted colour so the two lines read as one concise message with clear hierarchy.
- Keep the copy to two short lines; do not introduce a heading, paragraph, or extra promotional content that makes the band feel busy.
- Use 14–16px text for the input placeholder and button label.

### Colour and surfaces
- Use a near-white background such as #fbfbfa or #ffffff.
- Use near-black text such as #202124 for the primary line and a cool gray such as #74777d for supporting text.
- Use very light gray borders such as #dedfdf or #e5e6e6 for the section rules and input outline.
- Make the submit button a near-black fill such as #202124 with white text; on hover, shift it slightly lighter or darker while maintaining strong contrast.
- Avoid gradients, shadows, loud accent colours, and decorative imagery unless the user's brand system specifically requires them.

### Borders, controls, and spacing
- Give the email input a 10–12px corner radius and a 1px border. Use a white or slightly off-white fill.
- Give the button a matching 10–12px radius, compact horizontal padding around 16–18px, and a height around 40px.
- Keep 8–10px between the input and button.
- Use roughly 28–36px vertical padding inside the band if the surrounding shell already provides height; otherwise use larger padding to create the spacious reference feel.
- Include a clear visible focus ring on the input and button, using the product's accent colour or a dark high-contrast outline.
- Add subtle hover and active states: the button may change shade, and the input border may become more pronounced.
- Make the form functional: validate that the email is present and correctly formatted, show a concise success state after submission, and expose an accessible error message without shifting the layout unpredictably.

### Responsive and accessibility rules
- Ensure the layout does not overflow horizontally at any viewport size.
- Use semantic markup: a section, a concise heading or label, a form, a properly labelled email input, and a submit button.
- Maintain WCAG-compliant contrast and provide keyboard-visible focus states.
- Respect reduced-motion preferences; do not rely on animation to communicate success or errors.

## Never
- Never copy the reference's logos, product names, brand assets, or exact wording.
- Never reuse the reference's promotional copy; write concise, product-specific copy after learning about the user's product.
- Never use illustrations, photographs, or imagery from the reference.
- Never reproduce the exact page layout or decorative grid treatment if it conflicts with the user's brand.
- Never sacrifice form usability or accessibility for visual minimalism.