## 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/uini-io/ef5b466a-1fe9-4cb6-9300-79049ee31244-1789059863-11.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/uini-io/ef5b466a-1fe9-4cb6-9300-79049ee31244-1789059824-full.webp
- Component on Kage: https://kage.design/component/uini-cta

## Before you start
Ask the user what their product does, who it is for, and what visual brand direction they want. Then apply the principles below to create an original closing CTA/footer for their product—not a copy of the reference.

## Build this section
Create a full-width closing website section that acts as both a final CTA area and a practical footer. Use a near-black background, generous vertical space, and a structured multi-column layout that feels editorial, warm, and slightly retro.

### Layout and alignment
- Use a full-bleed section with a centered content container, approximately 1120–1200px wide, with 60–80px horizontal padding on desktop.
- Arrange four desktop columns:
  1. A wider brand/CTA column containing a small brand mark placeholder, product name supplied by the user, and a short two-line value statement.
  2. A navigation column for primary product or resource links.
  3. A comparison, category, or secondary navigation column.
  4. A contact/legal column.
- Keep all columns top-aligned, with consistent gutters of approximately 56–72px. Let the first column occupy slightly more width than the others.
- Add a decorative pixel-art band or stepped geometric accent along one edge of the section, such as the bottom or top. It should be made with CSS blocks or an original SVG, not a borrowed illustration.
- On mobile, stack the columns in a sensible order. Keep the brand statement first, then navigation groups, with each group separated by generous vertical spacing. Avoid forcing a dense horizontal footer.

### Typography hierarchy
- Use a clean sans-serif for body copy and links, with a comfortable reading size around 15–16px and line-height around 1.5.
- Style navigation group labels as small uppercase headings with noticeable letter spacing, approximately 0.18–0.24em. Use a warm accent colour for these labels.
- Make the brand/product name visibly stronger than the body copy, around 24–28px, with medium or semibold weight.
- Keep the supporting statement muted but readable, limited to roughly 2–3 short lines.
- Use link text with regular weight and clear vertical rhythm; avoid underlining by default, but provide an obvious hover state.

### Colour and visual language
- Main background: near-black charcoal, approximately `#171817` or `#191A18`.
- Primary text: soft off-white, approximately `#F2EEE8`.
- Secondary text: muted warm grey, approximately `#B8B3AC`.
- Accent: saturated warm orange, approximately `#ED7048` or `#F0784C`.
- Optional pixel-art secondary colours: muted green `#5D9A63`, pale sage `#A6C477`, and sand `#C5A884`.
- Keep the palette restrained: use the orange mainly for the brand mark, section labels, CTA emphasis, or decorative geometry.

### Borders, shapes, and spacing
- Prefer open space over card containers; this footer should feel like one continuous field rather than a set of boxed panels.
- If separators are needed on mobile, use a subtle 1px border in approximately `#30312E`.
- Use small-to-medium corner radii, around 4–8px, for buttons or brand marks. Avoid excessive rounded cards.
- Give the section at least 88–120px of top and bottom padding on desktop, reducing to approximately 56–72px on mobile.
- Maintain a strong baseline rhythm: navigation links should be spaced about 12–16px apart, while heading-to-list spacing should be about 20–28px.
- Let the decorative pixel treatment intentionally break the otherwise precise grid, but keep it low enough in contrast that it does not compete with the links.

### Interaction
- Make every link keyboard accessible with visible focus rings in the accent colour.
- On hover, links may shift slightly in colour toward the accent or receive a subtle 1–2px horizontal movement; keep the motion quick and restrained.
- If there is a primary CTA, use a solid orange button with dark text or a dark button with an orange border, depending on the user's brand. Include a clear hover transition without adding heavy shadows.
- Respect reduced-motion preferences and keep decorative animation optional and minimal.

### Responsive behaviour
- At tablet widths, reduce the layout to two columns while preserving the brand column's prominence.
- At mobile widths, use one column and ensure long navigation labels wrap naturally without overflow.
- Keep the decorative pixel blocks clipped or repositioned so they never obscure content or create horizontal scrolling.

## Never
- Never use the reference site's logo, product name, navigation copy, comparison names, or exact wording.
- Never reproduce the reference pixel-art illustration or any other borrowed imagery.
- Never assume the user's product, audience, links, or brand colours; ask first and generate appropriate replacements.
- Never turn the footer into a generic dark card grid or a visually noisy collection of unrelated effects.
- Never sacrifice legibility or keyboard accessibility for the retro styling.