## 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/runwayml-com/e724fd81-b6a6-43a2-b9ac-10cfe806f6fa-1789074883-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/runwayml-com/e724fd81-b6a6-43a2-b9ac-10cfe806f6fa-1789074862354-full.webp
- Component on Kage: https://kage.design/component/runwayml-footer

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

## Design the footer
Create a full-width, dark navigation footer for a modern software or technology product. It should feel editorial, systematic, and information-rich, with enough breathing room to remain easy to scan.

### Layout and alignment
- Use a nearly black footer surface, approximately `#0B0B0B`, spanning the full viewport width.
- Place the contents inside a wide responsive container with approximately 20px horizontal padding on small screens and 32–48px on larger screens.
- Organize navigation into a multi-column grid. On desktop, use four evenly distributed columns per row; allow the number of columns to adapt to the amount of content and viewport width.
- Group links by meaningful product areas such as product, developer, research, resources, company, or support. Each group has a small muted heading above its links.
- Use two or more rows of groups when the navigation is broad. Keep columns aligned vertically so the footer feels structured rather than like an unformatted link list.
- Add substantial vertical space before the bottom utility row. The bottom row should align a brand wordmark or brand text on the left, legal and policy text near the center, and social or utility links on the right on wide screens.
- On narrow screens, collapse the grid to one or two columns, preserve generous vertical rhythm, and stack the bottom utility row while keeping all content readable and tappable.

### Typography hierarchy
- Use a clean sans-serif typeface appropriate to the user's brand.
- Navigation links should be compact but readable, around 15–16px with a line height of 1.45–1.55.
- Section labels should be smaller, around 12px, with muted contrast and normal or medium weight.
- Legal text should be approximately 10–12px, with a subdued colour and enough line height to remain legible.
- Keep link labels short and sentence case. Use weight and colour—not oversized type—to establish hierarchy.

### Spacing and rhythm
- Give each group a consistent gap of roughly 8–10px between links.
- Leave approximately 24–28px between a group heading and its first link.
- Use approximately 56–72px between navigation rows, adjusting responsively.
- Give the footer generous top and bottom padding, roughly 40–56px at the top and 24–32px at the bottom on desktop.
- Keep the legal and social row visually separated through whitespace rather than a prominent divider.

### Colour, borders, and shape
- Use a dark background around `#0B0B0B` or adapt it to the product's darkest brand surface.
- Use primary navigation text around `#F2F2F2` and group labels around `#777777` to `#8A8A8A`.
- Use legal text around `#777777`; social icons can use muted grey and brighten on hover.
- Avoid unnecessary borders. If a divider is needed, use a very subtle line such as `rgba(255,255,255,0.08)`.
- Keep the design mostly flat and rectangular. Do not introduce cards, heavy shadows, or decorative gradients.
- If the product uses rounded controls elsewhere, use restrained radii around 4–8px only for interactive elements; the footer itself should not feel card-like.

### Interaction and accessibility
- Make every link visibly interactive with a subtle colour shift, underline, or opacity transition on hover and keyboard focus.
- Preserve a clear `:focus-visible` treatment with a high-contrast outline or underline.
- Mark external links with a small unobtrusive arrow or equivalent affordance only where useful; do not add icons to every link by default.
- Make the entire social icon hit area at least 40–44px square, even if the icon itself is small.
- Use semantic `footer`, `nav`, lists, and descriptive accessible labels for icon-only social links.
- Ensure sufficient contrast and allow legal text to wrap naturally instead of becoming clipped.

### Content behaviour
- Use realistic placeholder categories and links based on the user's product, but do not reproduce the reference site's wording or link taxonomy.
- Keep category sizes reasonably balanced so one column does not become dramatically taller than the others.
- Include a compact copyright, policy, and accessibility/legal area at the bottom, adapted to the user's organization.

## Never
- Never use the reference company's logo, wordmark, product name, or exact navigation labels.
- Never copy the reference site's legal copy, social icons as a branded set, or distinctive wording.
- Never reuse the reference's product-specific link structure or make the result look like a clone.
- Never include illustrations, photography, video, or imagery from the reference.
- Never add decorative content that competes with the navigation.
- Never sacrifice responsive behaviour, keyboard access, or readable contrast for visual similarity.