## 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/railway-com/2043945d-689d-427f-b51d-92aa383b8c92-1789060665-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/railway-com/2043945d-689d-427f-b51d-92aa383b8c92-1789060635-full.webp
- Component on Kage: https://kage.design/component/railway-stats

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and visual system are. Then apply the principles below to create an original footer for that product—not a copy of the reference.

## Design the section
Build a dark, information-rich website footer with a wide centered container and a clear two-part structure:

- Use a near-black charcoal background around `#111019` or an equivalent shade from the product's brand palette.
- Set a responsive max-width around `1180–1240px`, with generous horizontal padding of `32–48px` on desktop and `20–24px` on mobile.
- In the upper region, create a responsive grid. Reserve the left, wider column for one or two editorial promotional cards; use the remaining columns for grouped navigation lists.
- On desktop, use approximately four columns: a wider feature column and three navigation columns, with consistent gaps around `56–96px`. On tablet and mobile, collapse to two columns or a stacked layout while preserving clear grouping.

### Promotional cards
- Give each card a subtle elevated surface around `#1b1924`, a 1px border around `#302d3b`, and a radius of `12–14px`.
- Use compact editorial copy: a short lead sentence, a supporting sentence, and an inline text link. Keep the card height consistent when multiple cards appear.
- Make linked words or calls to action use a restrained accent—lavender, violet, or the product's own highlight colour—rather than bright button styling.
- Use comfortable internal padding around `24px`; stack cards with `16px` vertical spacing.

### Navigation groups
- Organize links under short, high-contrast group headings. Use a 14–15px medium-weight heading and 14–16px links with a softer grey such as `#9a96a5`.
- Keep link rows vertically rhythmic, with approximately `12–16px` between items and `32–44px` between groups.
- Use several related groups distributed across the grid instead of one long undifferentiated list.
- Add subtle hover states: links can shift to `#f3f1f7`, gain a brand accent, or receive a delicate underline. Keep transitions around `150–200ms`.

### Lower utility area
- Place trust, compliance, or certification marks beneath the main footer content, but render them as understated monochrome treatments. Do not let them compete with navigation.
- Separate the bottom bar with a 1px horizontal rule around `#2a2733` and approximately `40–56px` of top spacing.
- In the bottom bar, align a small circular or compact product-status mark on the left with a muted operational-status link beside it. Place copyright or legal text on the right.
- Use a monospace or technical typeface for the operational status if that fits the product's brand, in a muted green such as `#6da995`; otherwise use the brand's utility type style.
- Keep the bottom bar quiet: small text around `12–14px`, muted contrast, and generous vertical breathing room.

### Typography and visual language
- Use a clean sans-serif with a precise, technical feel. Headings should be bright but not oversized; footer group headings can be around `14–15px`, body links around `14–16px`, and legal text around `12–13px`.
- Establish hierarchy primarily through colour, weight, spacing, and grouping rather than large type.
- Keep the overall tone calm, premium, and functional. Avoid excessive decoration, gradients, or large illustrations.
- Ensure all interactive links have visible keyboard focus states with a clear outline or high-contrast underline.
- Preserve adequate contrast for body text and status information, and make the full footer usable on narrow screens without horizontal scrolling.

## Never
- Never use logos, product names, copy, illustrations, certification marks, or imagery from the reference.
- Never reproduce the reference link labels or exact column arrangement verbatim.
- Never make the footer depend on the reference brand's colours; adapt the approximate palette and hierarchy to the user's product.
- Never hide essential navigation or legal information behind inaccessible hover-only interactions.