Kage Design logo kage
getincredible.com
getincredible.com footer component

Design analysis

A deliberately sparse footer that gives regulatory context and legal links priority without competing with the page content. Generous vertical whitespace, small type, and a low-contrast structure make it feel calm and trustworthy.

Prompt preview
## 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/getincredible-com/e2886fef-b68a-4ec0-9c25-0cadbf1e05de-1789067377-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/getincredible-com/e2886fef-b68a-4ec0-9c25-0cadbf1e05de-1789067365-full.webp
- Component on Kage: https://kage.design/component/getincredible-footer

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

## Design the section
Build a minimal, text-led website footer for a software or service product. The footer should feel quiet, credible, and intentionally sparse, with legal and compliance information presented clearly but without a heavy visual container.

### Layout and alignment
- Use a full-width footer with a centered content column aligned to the same left edge as the main page content.
- Keep the content column relatively narrow-to-medium, around 1100–1200px maximum, with responsive horizontal padding of about 24px on mobile and 48–64px on larger screens.
- Place a small disclaimer or regulatory note near the top of the footer.
- Put legal links beneath the disclaimer, stacked vertically with a compact gap.
- Push the copyright line toward the bottom using generous vertical space, rather than filling the footer with extra navigation or decorative elements.
- On mobile, preserve the single-column flow and let long disclaimer text wrap naturally.

### Typography hierarchy
- Use a clean sans-serif typeface with a restrained, editorial feel; use the product’s brand typeface if one exists.
- Set the disclaimer in small text, approximately 11–13px, with relaxed line height around 1.45–1.6.
- Set legal links at approximately 11–13px and make them visibly interactive through underlines or a similarly clear treatment.
- Set the copyright notice slightly larger or heavier than the legal metadata, around 12–14px, while keeping it visually understated.
- Avoid headings, oversized branding, or bold marketing language in this section.

### Colour
- Use a white or near-white background, approximately `#FFFFFF` to `#FAFAF8`.
- Use a dark charcoal for readable body text, approximately `#242424` to `#333333`.
- Use a slightly softer charcoal for secondary disclaimer text, approximately `#555555` to `#6A6A6A`.
- Keep links dark enough to meet accessibility contrast and distinguish them with an underline; do not rely on colour alone.

### Spacing and dimensions
- Give the footer generous top padding, approximately 28–48px.
- Allow a noticeable gap between the disclaimer and the legal-link group, around 24–32px.
- Keep links separated by about 6–10px vertically.
- Create substantial space before the copyright line, approximately 72–120px on desktop and 56–80px on mobile.
- Give the footer enough bottom padding to feel complete, around 28–48px.

### Borders and radius
- Prefer no card, shadow, or enclosing border.
- If the wider page needs a boundary, use one very subtle 1px top rule in approximately `#E8E8E5`.
- Keep the footer flat and rectangular with no visible corner radius.

### Interaction
- Make every legal link keyboard accessible with a clear focus ring or underline treatment.
- On hover, slightly darken the link or increase underline contrast without adding animation-heavy effects.
- Keep transitions brief and subtle, around 150–200ms.
- Ensure the disclaimer remains readable at all viewport widths and that links have comfortable tap targets on touch devices.

## Never
- Never use the reference product’s logo, product name, company name, or exact copyright text.
- Never copy the reference disclaimer, legal-link labels, wording, or dates.
- Never include illustrations, imagery, icons, or decorative graphics from the reference.
- Never reproduce the exact page copy, brand identity, typography, or visual styling as a direct clone.
- Never add unrelated navigation, social icons, newsletter fields, or marketing content unless the user’s product genuinely needs them.

More components