## 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/supabase-com/b03f69f9-4b47-487d-8f2b-17d7cd19e877-1789060354-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/supabase-com/b03f69f9-4b47-487d-8f2b-17d7cd19e877-1789060301-full.webp
- Component on Kage: https://kage.design/component/supabase-cta-2

# Build a newsletter signup footer CTA

## Before you start
Ask me what my product is, who it serves, and what its brand identity, voice, and visual system are. Then apply the principles below to create an original footer CTA for my product—not a copy of the reference.

## Goal
Create a spacious website footer that combines a small email-newsletter call to action with social navigation and several grouped link columns. The footer should feel editorial, trustworthy, and easy to scan while remaining compact enough to sit naturally at the end of a product page.

## Design language

### Layout and alignment
- Use a wide, centered container with a generous horizontal gutter; on desktop, use a multi-column grid.
- Reserve the left column for the brand mark or product descriptor, social links, newsletter message, email field, and submit button.
- Place navigation groups in evenly aligned columns to the right. Each group should have a clear heading and a vertical list of links.
- Align all column content to the same top edge, while allowing the left CTA area to contain its own vertical rhythm.
- On smaller screens, collapse the columns into a single readable stack, keeping the newsletter signup near the top and navigation groups separated with consistent spacing.
- Keep the footer background visually quiet so the signup and link structure provide the hierarchy.

### Typography hierarchy
- Use a clean sans-serif or the product’s existing UI font.
- Make navigation headings medium-weight and compact, approximately 14–16px.
- Set links and supporting copy in a muted 14–15px size with comfortable line height around 1.5–1.7.
- Make the newsletter message slightly more prominent than the link text, but avoid oversized marketing typography.
- Keep labels short and sentence case; use weight and colour rather than excessive uppercase styling to establish hierarchy.

### Spacing
- Use generous top and bottom padding, approximately 64–96px on desktop and 40–56px on mobile.
- Keep 24–40px between the social row, newsletter copy, form, and navigation groups.
- Use 12–18px vertical gaps between links in a group and 28–40px between navigation columns or groups.
- Give the email input and button enough height to feel tactile, approximately 34–42px.

### Colour
- Use a near-white or very light neutral footer background, approximately `#FAFAFA` or `#F8F8F8`.
- Use near-black for headings and primary text, approximately `#111111`.
- Use a cool medium gray for secondary links and supporting copy, approximately `#6B6B6B` to `#777777`.
- Use one restrained brand accent for the subscribe button, such as a mint, blue, violet, or other colour derived from the user’s brand. A light mint example is `#55D9A6` with dark text around `#12352A`.
- Ensure text and controls meet accessible contrast requirements.

### Borders, controls, and radius
- Use subtle gray borders around the email input, approximately `#D6D6D6`.
- Keep the input and button modestly rounded, around 6–8px, unless the product’s brand calls for another treatment.
- The form can be a compact horizontal row on desktop and stack or expand to full width on mobile.
- Use a simple outline or filled treatment for the subscribe button, with a clear hover state that slightly darkens the accent or adds a subtle shadow.
- Give social icons a consistent size and hit area, around 28–36px, with muted default colour and a darker or brand-coloured hover state.

### Interaction and accessibility
- Make every social icon and footer link keyboard accessible with visible focus states.
- Use an explicit email label or accessible label even if the visual design uses placeholder text.
- Validate email input and show a concise success or error message without shifting the entire layout dramatically.
- On hover, transition link colour and icon colour quickly and subtly, around 150–200ms.
- Use real text links and recognizable icons with accessible names; do not rely on icons alone for essential destinations.

## Content guidance
- Write original newsletter copy suited to the user’s product and audience.
- Include only navigation groups that are genuinely useful for the product, such as Product, Resources, Developers, Company, or Support.
- Keep each group concise so the footer remains scannable rather than becoming a sitemap dump.

## Never
- Never copy the reference’s logos, product names, navigation labels, newsletter copy, or exact content.
- Never reuse the reference’s illustrations, imagery, icon set, or brand assets.
- Never reproduce the exact layout, dimensions, typography, colours, or spacing as a pixel-for-pixel imitation.
- Never invent destinations that do not exist in the user’s product.
- Never omit responsive behaviour, accessible labels, keyboard focus states, or form feedback.