## 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-8.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-footer

## Before you start
Ask what the user's product is, who it is for, and what their brand personality and visual system are. Then apply the principles below to create an original footer for that product—not a replica of the reference.

## Design the section
Build a short, full-width website footer with a vivid textured background and a deliberately sparse editorial composition.

### Layout and alignment
- Use a compact horizontal footer band, approximately 72–104px tall on desktop, with responsive height driven by content on smaller screens.
- Constrain the inner content to a centered max-width container of roughly 1080–1240px.
- Place a small vertical stack of utility links toward the left side of the container. Keep the links tightly grouped and aligned to one left edge.
- Position a small social-icon group near the link stack, either inline with its lower portion on desktop or beneath it on mobile.
- Balance the left-side utility content with a distinctive brand signature or legal/descriptor treatment aligned to the far right. It should feel like a typographic mark without using a literal logo from the reference.
- Preserve substantial empty space between the left and right groups; the footer should feel intentionally under-filled rather than densely navigational.
- On narrow screens, stack the groups or use a two-column layout with comfortable gutters, keeping the signature from colliding with links.

### Typography hierarchy
- Use a compact sans-serif for navigation and utility links, around 12–14px with medium weight and a 1.45 line height.
- Make the right-side signature visibly more expressive through a contrasting serif, display, or editorial typeface, around 15–18px with restrained line height. Use a second line or italic treatment only if it suits the user's brand.
- Keep all type crisp and modest; the signature should be recognizable through composition and typography rather than scale.
- Use sentence case or short labels, with no oversized heading.

### Colour and texture
- Start with a saturated blue-violet or another brand-appropriate accent field; an approximate reference direction is electric indigo `#3F2BDB` with subtle variations toward `#3420C5` and `#5639F0`.
- Use near-white text and icons, approximately `#F7F7FF`, with slightly reduced opacity for secondary links if needed.
- Add a very subtle grain, fine noise, or low-contrast dither over the background. Keep it atmospheric and restrained: opacity around 6–12%, never muddy or distracting.
- If a gradient is used, keep it broad and tonal rather than glossy; avoid obvious lighting effects.

### Borders, radius, and depth
- Prefer no visible border so the footer reads as one continuous colour field.
- Use little or no shadow.
- Keep link and icon hit areas generous even though the visual elements are small.
- If social icons sit inside controls, use a small radius around 4–6px or a fully rounded shape only when consistent with the user's design language.

### Interaction
- Links should have a clear hover and keyboard-focus state, such as a subtle underline, brightness shift, or opacity change.
- Social icons should be accessible buttons/links with descriptive labels and visible focus rings.
- Keep motion minimal: a short 150–220ms colour or opacity transition is enough. Do not animate the grain or make the footer distracting.
- Maintain sufficient contrast between text, icons, and the background, and ensure the layout works at zoom and with reduced-motion preferences.

## Never
- Never reuse the reference site's logos, product names, brand signature, or exact copy.
- Never copy the exact link labels, social icon arrangement, dimensions, or typeface pairing from the reference.
- Never include illustrations, photographs, or imagery from the reference.
- Never make the footer a pixel-perfect recreation; adapt its hierarchy and atmosphere to the user's product and brand.
- Never sacrifice accessibility for the sparse visual treatment.