## 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-10.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-banner

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

## Design the component
Build a minimalist multi-column navigation directory, suitable for a footer or secondary navigation panel. The section should feel editorial, calm, and information-dense without looking cramped.

### Layout and alignment
- Use a full-width, very light background with a centered inner container constrained to roughly 1100–1200px.
- Arrange destination groups in a horizontal grid of approximately four columns on desktop, with each column aligned to the same top baseline.
- Keep the grid asymmetrical only through content length; do not force equal-height cards or add decorative containers.
- Use generous horizontal gutters, around 48–72px between columns, and leave ample empty space around the grid.
- On tablet, reduce the number of columns while preserving readable line lengths; on mobile, stack groups vertically with consistent spacing.
- Each group should have a clear category label or heading followed by a simple vertical list of links.

### Typography hierarchy
- Use a modern sans-serif with a neutral, understated character.
- Category labels should be small and medium-weight, around 13–15px, with a restrained dark gray colour.
- Links should be around 14–16px with comfortable line height of 1.6–1.8; avoid oversized footer typography.
- Use sentence case and short labels. Maintain consistent text alignment and avoid unnecessary descriptions.

### Spacing and rhythm
- Give each link approximately 8–12px of vertical separation, allowing multi-line labels to breathe.
- Use 28–40px between a group heading and its links.
- Use 40–64px between separate groups when they stack on smaller screens.
- Preserve large areas of negative space around the grid so the section feels deliberately sparse.

### Colour, borders, and radius
- Use an off-white or near-white background, approximately `#FAFAFA` to `#FFFFFF`.
- Use dark gray text around `#555555` to `#666666`, rather than pure black.
- Use a slightly darker colour for headings, around `#3F3F3F`.
- Avoid cards, shadows, gradients, and visible borders unless the surrounding product system requires a very subtle divider such as `#EEEEEE`.
- If links have a hover state, shift them toward a darker neutral such as `#222222`; do not introduce bright accent colours unless they belong to the user's brand.
- Keep border radius at zero or very subtle, around 2–4px, because the component is typographic rather than card-based.

### Interaction and accessibility
- Make every destination a real keyboard-focusable link with a clear visible focus ring.
- On hover, use a restrained colour change and optionally a subtle underline; avoid motion that distracts from scanning.
- Preserve a logical reading order when the grid collapses on smaller screens.
- Ensure sufficient contrast and provide semantic navigation landmarks with accessible group labels.

## Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never copy the reference link labels or category names; invent content relevant to the user's product.
- Never turn the links into decorative cards, large CTA blocks, or a visually heavy mega-menu.
- Never rely on colour alone to communicate hover, focus, or grouping.