## 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/fly-io/55088b40-21c4-4b5b-a67c-8a1494f33e2d-1789073898-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fly-io/55088b40-21c4-4b5b-a67c-8a1494f33e2d-1789073866-full.webp
- Component on Kage: https://kage.design/component/fly-feature-grid-3

## Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, typography, and content they want to use. Then apply the principles below to create an original feature-grid section for that product—do not reproduce the reference literally.

## Build this section
Create a feature-grid section that introduces a low-maintenance or high-value product benefit, followed by three concise feature cards. The section should feel calm, optimistic, technical-but-human, and editorial rather than like a generic SaaS dashboard.

### Layout and alignment
- Use a wide, centered section inside the page with generous outer whitespace.
- Place the content in a large rounded container with a very subtle luminous pastel background.
- Constrain the inner content to approximately 960–1080px and align all text and cards to the same left and right edges.
- Add a heading and supporting sentence above the cards, with the heading occupying one or two lines at most.
- Use three equal-width cards in a horizontal row on desktop, with consistent gaps of roughly 20–28px.
- Each card should have a tall, quiet composition: a large visual area on top and a text block anchored toward the bottom.
- On smaller screens, stack the cards vertically or use a horizontally scrollable row only if that fits the product; preserve generous breathing room.
- Keep card heights equal on desktop and align the text baselines across cards.

### Typography
- Use a distinctive display serif or expressive headline face for the main heading, around 48–56px desktop with tight line-height around 0.98–1.08.
- Use a clean sans-serif for supporting text and card copy.
- Make the supporting sentence approximately 22–26px, medium weight, and muted rather than pure black.
- Card titles should be around 16–18px, semibold, with compact line-height.
- Card descriptions should be around 14–16px, regular weight, with 1.45–1.6 line-height and a softer contrast.
- Keep copy short, concrete, and benefit-led; avoid paragraphs that make the cards feel dense.

### Colour and surface
- Use a mostly white page around the section, such as `#FFFFFF` or `#FAFAF9`.
- Build the section background from a soft, low-contrast multi-stop gradient: mint `#D9FFF5`, powder blue `#EAF5FF`, lavender `#F0EAFE`, and pale pink `#FFEAF6`.
- The gradient should feel diffused and atmospheric, not like bold stripes. Add a very subtle dot, grain, or halftone texture only if it remains accessible and does not reduce legibility.
- Use near-black text such as `#111111` for the main heading and `#171717` for card titles.
- Use slate-grey supporting text around `#667080` and a slightly lighter grey such as `#737984` for descriptions.
- Keep illustrations or visual placeholders more colourful than the text, using a small palette of soft cyan, lilac, coral, yellow, and teal.

### Borders, radius, and depth
- Give the outer container a medium-large radius around 16–22px and a fine neutral border such as `rgba(20, 30, 45, 0.12)`.
- Use a restrained shadow: wide, soft, and low opacity, for example `0 8px 24px rgba(40, 45, 70, 0.08)`.
- Cards should use transparent or translucent backgrounds so the section gradient subtly shows through.
- Give cards fine 1px borders around `rgba(35, 45, 60, 0.16)` and square or lightly rounded corners around 0–4px; do not turn them into pill-shaped UI.
- Avoid heavy shadows inside the cards—the thin outline and artwork should provide the structure.

### Visual panels
- Reserve the upper half of each card for a small, whimsical product-relevant visual, diagram, icon, or abstract object.
- Use an imperfect, hand-drawn, sketched, or lightly rendered visual language to soften the infrastructure/technical subject matter.
- Keep the visuals contained within their cards with plenty of empty space; they should support recognition, not compete with the text.
- If real imagery is unavailable, create original abstract diagrams or simple vector compositions tailored to the user’s product. Do not use stock photography.

### Interaction and accessibility
- Cards may be static, or become subtly interactive if they link to deeper product information.
- On hover, use a restrained effect such as a slight lift, gentle border-colour change, or mild artwork movement; avoid dramatic scaling.
- Ensure keyboard focus is clearly visible if cards are interactive.
- Maintain WCAG-conscious contrast for all text against the gradient and provide meaningful alt text for informative visuals. Decorative artwork should use empty alt text.
- Respect reduced-motion preferences.

## Never
- Never use logos, product names, slogans, or exact copy from the reference.
- Never copy the reference illustrations, characters, objects, or visual compositions.
- Never reuse the reference brand’s typography, proprietary assets, or distinctive artwork.
- Never make the section dependent on the reference page’s content or implementation.
- Never add unrelated imagery, stock photos, or decorative elements that obscure the feature benefits.