## 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/arc-net/a4b44bb4-fce3-4305-950f-d12af4bc9a59-1789060399-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/arc-net/a4b44bb4-fce3-4305-950f-d12af4bc9a59-1789060376-full.webp
- Component on Kage: https://kage.design/component/arc-cta

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

## Build an electric closing CTA and footer
Create a full-width closing section that combines a final download or conversion CTA with a compact, practical footer. It should feel like the visual endpoint of a bold marketing page: energetic, slightly editorial, and easy to scan.

### Layout and alignment
- Use a deep, saturated blue background across the entire section, with the content constrained to a centered max-width container of roughly 1120–1280px.
- Place the primary CTA above the footer content, centered horizontally. Let the CTA sit partly above or close to a thin decorative divider so it feels like a final action before the site utility area.
- Use a generous top area for the CTA, followed by a narrow horizontal divider spanning the viewport. The divider may use a repeating wave, loop, stitch, or other very subtle ornamental pattern.
- Below the divider, align the footer content to the same container grid. Put a small brand mark or product symbol at the left, followed by two or more columns of grouped links. Keep the link groups left-aligned and vertically stacked.
- Reserve the lower-right area for a quiet legal, company, or editorial wordmark treatment if the product needs one. It should remain secondary to the navigation.
- On small screens, collapse link columns into a single or two-column stack, keep the CTA centered, reduce the decorative treatment, and preserve generous horizontal padding.

### Typography hierarchy
- Use a compact, bold sans-serif for navigation labels and links, approximately 13–15px with a 1.35 line-height.
- Make category headings uppercase or otherwise visibly distinct, around 11–12px, semibold, with restrained letter spacing.
- If including a company statement or legal line, use a contrasting serif or display face at a larger size, approximately 16–22px, but keep it low contrast.
- The CTA label should be short, direct, and semibold. Pair it with a platform icon only when relevant to the user's product.

### Colour and texture
- Use an approximate background of electric blue, such as #3027E8 or #3528F0, adjusted to the user's brand.
- Use white or near-white text for primary links, around #FFFFFF or #F5F4FF.
- Use a slightly transparent white for secondary text and category labels, around rgba(255,255,255,0.72).
- Make the CTA a white or near-white pill/button with dark indigo text, approximately #24167D.
- Add very subtle monochromatic grain or fine noise over the blue background—enough to prevent a flat digital field, never enough to reduce legibility.
- Keep the divider ornamental pattern low contrast, using a pale blue-white at roughly 35–60% opacity.

### Borders, shape, and spacing
- Give the CTA a softly rounded rectangle or pill shape, around 10–14px radius, with a height of roughly 44–52px and horizontal padding of 24–32px.
- Avoid heavy cards, shadows, or excessive borders. The background should do most of the visual work.
- Use approximately 80–120px of space above the footer links, 40–64px below the divider, and 24–36px between link rows.
- Keep footer columns separated by generous whitespace rather than visible vertical rules.
- Align the icon, link columns, and legal treatment to a consistent baseline and grid.

### Interaction and responsive behaviour
- Make the CTA clearly clickable with a subtle hover change: slightly darker white, a small upward translation, or a restrained shadow. Include a visible keyboard focus ring.
- Footer links should shift from white to a slightly brighter or more opaque state on hover, without underlines unless that matches the user's accessibility system.
- Ensure all interactive elements have accessible names, sufficient contrast, and a touch target of at least 44px.
- Preserve the visual hierarchy when links wrap or when the footer becomes a single-column mobile layout.

### Never
- Never use the reference site's logos, product names, exact copy, brand marks, or legal/company wording.
- Never copy the reference's ornamental divider as an exact asset; create a new simple pattern or omit it.
- Never reuse illustrations, imagery, textures, or icon artwork from the reference.
- Never make the footer depend on a specific browser, platform, or download destination unless that is true for the user's product.
- Never sacrifice readability for visual texture or decorative styling.