## 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-1789074882-3.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-feature-grid

# Before you start

Ask me what my product does, who it is for, and what its brand personality, colours, typefaces, and preferred imagery are. Then apply the principles below to create an original feature-grid section for my product—not a copy of the reference.

## Build this section

Create a responsive, three-column feature grid that introduces three related products, services, capabilities, or use cases under one shared platform idea. The section should feel editorial, premium, direct, and highly scannable. Use the user's actual product and brand language once I provide it.

## Design language

### Layout and alignment

- Place the section inside a centred container with a maximum width of approximately 1240px and generous horizontal padding of 20–32px.
- Begin with a large, centred section heading spanning the grid. Use one or two lines, with a maximum text width of roughly 850–950px.
- Add generous space between the heading and the cards—approximately 56–80px on desktop.
- Use three equal-width columns with a 16–24px gap. Keep every card aligned to the same top edge and use the same internal sequence: eyebrow/title, media, benefit headline, supporting description, CTA row, and optional microcopy.
- Let the card content remain left-aligned even though the section heading is centred.
- On tablet, use two columns if space allows; on mobile, stack cards in a single column with 40–56px vertical spacing.
- Keep media aspect ratios consistent across all cards, approximately 16:9 or 1.6:1. Images should span the card width and use `object-fit: cover`.

### Typography hierarchy

- Use a modern sans-serif with a neutral, polished character. If the product has a brand font, use it; otherwise choose a clean system or contemporary grotesk sans-serif.
- Section heading: approximately 48–56px on desktop, 38–44px on tablet, and 32–36px on mobile; use tight line-height around 0.98–1.08 and slightly negative tracking.
- Card title/eyebrow: approximately 22–24px, semibold, with compact line-height.
- Benefit headline: approximately 23–26px, medium weight, with 1.1–1.2 line-height. Make it persuasive but concise.
- Supporting description: approximately 14–16px, regular weight, with 1.45–1.6 line-height and a muted colour.
- Optional microcopy beneath the buttons should be 12–13px with a muted colour and comfortable line-height.
- Avoid excessive capitalization; use sentence case unless the user's brand requires otherwise.

### Colour

- Use a calm, near-white page background such as `#ffffff` or `#fafafa`.
- Use near-black for the main heading and primary text, such as `#171717` or `#202020`.
- Use a softer charcoal for descriptions, such as `#4f4f4f` or `#5f6368`.
- Primary buttons should use a dark fill such as `#242424` or the user's brand colour, with white text.
- Secondary buttons should use a very pale neutral fill such as `#f0f3f4`, with dark text.
- Keep the palette restrained; allow the imagery to provide most of the visual variation.

### Media, borders, and radius

- Use high-quality, product-relevant visual media in every card, but source or generate original media appropriate to the user's product.
- Give media a subtle border such as `1px solid #e2e2e2` and a rounded radius of approximately 8px.
- Use the same radius for buttons, around 6–8px, and avoid overly pill-shaped controls unless that is part of the user's brand.
- Do not add heavy card containers or drop shadows. The page background should separate the cards through spacing and alignment rather than boxed panels.
- Maintain consistent image cropping, visual weight, and corner treatment across all three cards.

### Interaction and responsive behaviour

- Make each CTA visibly interactive with clear hover, focus, and pressed states. Dark buttons may shift slightly lighter or darker on hover; secondary buttons may gain a subtle border or darker background.
- Add a visible keyboard focus ring using the brand accent or a high-contrast colour.
- If the cards are clickable, make the interaction model explicit and ensure the entire card or only the CTA is clickable consistently—do not create ambiguous nested links.
- Preserve readable text widths and prevent button labels from wrapping unnecessarily.
- On small screens, keep the CTA row flexible: allow buttons to wrap or stack without clipping.
- Respect reduced-motion preferences and use only subtle transitions, around 150–200ms.

## Content structure

For each of the three cards, provide:

1. A short category or offering label.
2. A distinctive image or media area.
3. A one- to three-line value proposition.
4. A concise supporting paragraph explaining the audience, use case, or outcome.
5. One primary CTA and, where useful, one secondary CTA.
6. Optional small trust, availability, or qualification microcopy beneath the actions.

Keep the three cards parallel in structure, but vary the messaging enough that each offering has a clear role. Use realistic content for my product rather than generic filler.

## Accessibility and implementation

- Use semantic section, heading, article, image, and button/link elements.
- Maintain logical heading order and provide meaningful alt text for every image.
- Ensure text and controls meet WCAG AA contrast requirements.
- Use CSS Grid for the desktop layout and responsive breakpoints for tablet and mobile.
- Do not rely on image text to communicate essential information.

## Never

- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never reproduce the reference's exact wording, visual assets, brand identity, or distinctive composition beyond the general feature-grid pattern.
- Never invent unsupported claims, customer numbers, integrations, or capabilities for my product.
- Never sacrifice accessibility or responsive behaviour for visual similarity.