## 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/trigger-dev/b9ca49c4-30e6-4b69-8f7d-3e7049f90280-1789073778-11.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/trigger-dev/b9ca49c4-30e6-4b69-8f7d-3e7049f90280-1789073735-full.webp
- Component on Kage: https://kage.design/component/trigger-footer

## Before you start
Ask what the user's product is, who it is for, and what brand style, colour palette, and navigation structure it uses. Then apply the principles below to create an original footer for that product rather than reproducing the reference.

## Design the section
Build a dark, developer-oriented website footer with a compact, highly structured layout. Treat it as a utility/navigation area rather than a promotional panel.

### Layout and alignment
- Use a full-width footer with a very dark charcoal background, approximately `#111214` to `#151619`.
- Create a centered, wide content container with modest horizontal padding, around `32px` on desktop and `20px` on small screens.
- Organize the upper footer into a horizontal grid: a wider left area for social/community controls, followed by several evenly sized link columns.
- Separate the left area and link columns with subtle 1px vertical rules. Add additional vertical rules between link groups where useful, but keep them understated.
- Align all link groups to the top of the footer content area. Keep the grid balanced and avoid excessive empty space.
- Add a horizontal divider across the full content width beneath the main footer row. Place a small copyright or legal note beneath it, aligned to the right on desktop and stacked or left-aligned on mobile.
- On narrow screens, collapse the columns into a readable stacked layout while preserving grouping and dividers.

### Typography hierarchy
- Use a clean sans-serif UI font with a technical, modern feel.
- Footer links should be small, approximately `13–14px`, with medium line-height and regular weight.
- Use a slightly brighter tone for primary link text and a dimmer tone for secondary/legal content.
- Keep the copyright line smaller, around `12–13px`, and visually recess it from the navigation.
- Avoid headings if the product's information architecture does not need them; the reference pattern works through grouping and spacing instead of prominent labels.

### Spacing
- Give the main footer row approximately `28–40px` of top and bottom padding.
- Use `14–18px` vertical spacing between links within a column.
- Keep social buttons in a compact horizontal row with roughly `8–10px` gaps.
- Make the legal/copyright strip approximately `48–60px` tall, with comfortable side padding.
- Maintain consistent column padding so the vertical rules do not feel crowded against content.

### Colour and surfaces
- Use a near-black charcoal background around `#121315`.
- Use borders and dividers around `#24262a` or `#292b30` with low contrast.
- Use primary links around `#a5a7ad`, with hover states around `#e8e9ec`.
- Use muted/legal text around `#686b73`.
- Social buttons can use a transparent or slightly lighter surface around `#17191c`, with borders around `#303238`.
- Keep contrast sufficient for accessibility even though the overall treatment is intentionally subdued.

### Borders, radius, and controls
- Use thin 1px borders for the grid rules and social controls.
- Give social icon buttons a small radius, approximately `3–5px`, rather than a pill shape.
- Size icon buttons around `34–38px` square and center each icon precisely.
- Use simple monochrome line or glyph icons that represent the destination, but choose icons appropriate to the user's product and do not copy any specific icon arrangement.
- Avoid shadows, gradients, oversized rounded cards, or decorative effects.

### Interaction
- Make every social control and text link keyboard accessible with visible focus states.
- On hover, brighten link text and slightly increase the border contrast of icon buttons; do not use dramatic motion.
- Use a short transition of about `150–200ms` for colour and border changes.
- Ensure the responsive layout remains usable without hover and supports touch targets of at least `44px` where practical.

## Never
- Never copy logos, product names, navigation labels, copyright text, or other exact copy from the reference.
- Never reuse the reference's brand identity, icon set, or exact social-link arrangement.
- Never include illustrations, screenshots, or imagery from the reference.
- Never reproduce the footer as a pixel-for-pixel clone; adapt the grid, content groups, and emphasis to the user's product and brand.
- Never sacrifice accessibility for the low-contrast aesthetic.