## 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/noodle-seed/892ab390-1bf9-4a7d-a1b3-8cebe5820ba8-1789106719-11.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/noodle-seed/892ab390-1bf9-4a7d-a1b3-8cebe5820ba8-1789106640138-full.webp
- Component on Kage: https://kage.design/component/noodle-seed-cta-2

## Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, typography, and CTA goal should be used. Then apply the principles below to create a version for their product—not a copy of the reference.

## Build a closing CTA section
Create a minimal, full-width CTA designed to sit between the main page content and a site footer. The section should feel like a calm visual conclusion: one short supporting line, one primary action, and generous black space around them.

### Layout and alignment
- Use a full-width section with a near-black background and a centred content column.
- Add a thin horizontal divider near the top of the CTA and another near the bottom. Keep the content vertically centred between them.
- Constrain the inner content to roughly 560–640px so the supporting text remains compact.
- Stack the supporting copy above the button with approximately 24–32px of space.
- Give the section generous vertical padding, around 72–112px on desktop and 56–80px on mobile.
- Keep the CTA visually separate from the footer; the lower divider should act as a clean boundary.
- On small screens, preserve the centred alignment and reduce padding rather than introducing complex columns.

### Typography hierarchy
- Use a modern sans-serif with clean, neutral forms.
- Keep the supporting line short, sentence case, and medium-sized: approximately 18–22px on desktop and 16–18px on mobile.
- If a larger heading is needed, use a confident lightweight or regular display style above the supporting line, but do not let it dominate the action.
- Use comfortable line-height around 1.35–1.5 and avoid wrapping the CTA copy across too many lines.
- Make button text compact, bold or semibold, and easy to scan.

### Colour
- Page background: near black, approximately `#050505` to `#080808`.
- Primary text: soft white, approximately `#F5F5F2`.
- Secondary text: muted grey, approximately `#A2A2A0`.
- Dividers: very subtle charcoal, approximately `#242424`; they may include a barely perceptible warm tint if that suits the brand.
- Primary button: off-white, approximately `#F2F2EE`.
- Button label: near black, approximately `#0A0A0A`.
- Use colour sparingly; the button should be the strongest contrast in the section.

### Borders, shape, and spacing
- Use 1px divider rules with low contrast rather than heavy borders.
- Make the primary action a fully rounded pill, roughly 44–48px tall, with horizontal padding around 20–24px.
- Use a generous pill radius, at least 999px.
- Keep the section free of cards, shadows, gradients, illustrations, and decorative framing.
- Align the button and text to the same centre axis.

### Interaction
- Make the entire pill button an obvious link or button with a clear accessible focus state.
- On hover, slightly darken the light surface or translate the arrow/icon by a few pixels; keep the transition subtle, around 150–200ms.
- Preserve strong contrast in hover and focus states.
- Include a simple directional arrow or equivalent affordance only if it supports the user's CTA; it should remain secondary to the label.
- Ensure keyboard focus is visible and touch targets are at least 44px tall.

### Content guidance
- Write one concise line that reinforces the product's next step or value.
- Use one action-oriented CTA, not a group of competing buttons.
- Let the surrounding page provide context; this component should close the argument rather than introduce a new feature.

## Never
- Never use the reference product's logo, product name, or brand language.
- Never reuse the reference copy or invent copy that implies the reference product.
- Never copy any exact layout dimensions, wording, or distinctive visual treatment; adapt the principles to the user's product and brand.
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never add unnecessary navigation, multiple competing CTAs, busy decoration, or large image treatments.