## 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/render-com/a2f1bfec-cff8-46a3-938e-5c68bed6eccd-1789073951-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/render-com/a2f1bfec-cff8-46a3-938e-5c68bed6eccd-1789073879-full.webp
- Component on Kage: https://kage.design/component/render-footer

## Before you start
Ask me what my product does, who it is for, and what its brand personality, colour palette, and navigation structure are. Then apply the principles below to create an original footer for my product—not a copy of the reference.

## Design language

Build a large, responsive website footer that combines a structured link directory, a dark content panel, a subtle technical grid, and small abstract decorative accents.

### Layout and alignment
- Treat the footer as a full-width section on a light background, with a faint square grid extending behind and around the main dark panel.
- Place the primary footer panel inside a centered container that is slightly narrower than the viewport and visually offset from the left and right edges. On desktop, use a broad horizontal rectangle; on mobile, let it become a full-width stacked block.
- Use a six-column desktop navigation layout, with columns for major product or company areas. Allow the final column to contain a secondary subsection such as social links.
- Align every column to a shared top baseline. Keep headings short and links vertically stacked beneath them.
- Add a separate bottom utility row outside the dark panel for a small set of external links on the left and copyright or legal information on the right. Stack and left-align this row on small screens.
- Use decorative geometric fragments around the outer edges of the section—pixel clusters, stepped bars, checker patterns, or cropped blocks. They should sit behind the content and partially leave the viewport or container bounds rather than becoming a central illustration.
- Preserve generous negative space above the panel if the footer follows a CTA or hero section. The transition should feel intentional, not cramped.

### Typography hierarchy
- Use a clean modern sans-serif with a slightly technical, product-oriented character.
- Footer category labels: approximately 11–12px, uppercase or small caps, medium weight, high contrast, and generous letter spacing.
- Navigation links: approximately 15–16px, regular weight, muted grey, with comfortable line-height around 1.55–1.7. Permit long labels to wrap naturally within their column.
- Utility-row links and copyright: approximately 13–15px, regular weight, dark charcoal on the light background.
- Keep hierarchy quiet and editorial: headings should be clear, but links should not look like large buttons.

### Colour
- Main page background: warm near-white, approximately #FAFAF8 or #FFFFFF.
- Grid lines and panel borders: very light cool grey, approximately #E3E3E1, with low visual contrast.
- Main footer panel: near-black charcoal, approximately #141414 or #151515.
- Column headings: off-white, approximately #F4F4F2.
- Navigation links: subdued charcoal-grey on dark, approximately #747474 to #858585.
- Decorative accents may use one vivid brand colour such as electric violet, approximately #7A00FF–#9300FF, paired with pale tints or a second restrained accent. Derive these colours from my brand rather than assuming purple.
- Ensure all text and interactive states meet accessible contrast requirements.

### Borders, radius, and surfaces
- Keep the main panel square or only very subtly rounded, around 0–2px radius; the reference feels architectural rather than card-like.
- Use thin, low-contrast rules where separation is needed, approximately 1px.
- Avoid shadows, gradients, glass effects, and excessive cards. The visual interest should come from the grid, contrast, spacing, and geometric accents.
- Decorative blocks can use crisp square edges and modular pixel units.

### Interaction and responsive behaviour
- Make every navigation item a real link with a clear hover and keyboard-focus state.
- On hover, shift link colour toward the panel’s primary text colour and optionally add a restrained underline or slight colour accent; do not use large motion effects.
- Use visible, high-contrast focus rings that remain accessible on the dark panel.
- On desktop, preserve the multi-column directory. At medium widths, reduce gaps and allow columns to compress or wrap. On mobile, stack navigation groups vertically with consistent spacing and optionally use disclosure panels if the link list is long.
- Keep the utility row readable on all widths and prevent copyright text from colliding with links.
- Decorative artwork must be non-essential, `aria-hidden`, and hidden or simplified on small screens if it creates clutter or horizontal overflow.

### Content modelling
- Populate columns from my product’s actual information architecture, such as Product, Solutions, Resources, Company, Support, Legal, or Community.
- Keep each group concise and scannable. Prefer 4–9 links per group, with longer lists split into meaningful subsections.
- Include a clear social or community subsection only if it serves the product.
- Use real accessible labels and descriptive link text, while keeping the visual density close to a professional SaaS footer.

## Never
- Never reuse the reference’s logos, product names, navigation copy, social names, or copyright text.
- Never copy the reference’s exact column labels, link ordering, decorative pixel artwork, iconography, or visual assets.
- Never use the reference’s illustrations, technology marks, floating brand tiles, or imagery.
- Never make decorative elements necessary for understanding the links.
- Never add excessive animation, gradients, rounded dashboard cards, or a generic template footer that ignores my product’s brand.
- Never reproduce the reference layout pixel-for-pixel; use the underlying principles to create a distinct footer for my product.