## 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-1789073899-7.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-4

## Before you start
Ask me what my product does, who it is for, and what brand personality, colours, typography, and content I want to use. 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 feature-grid section that presents three related product capabilities and a single primary call to action. The section should feel technical but friendly, with generous whitespace, soft pastel atmosphere, and an editorial card layout.

### Design language

- **Overall composition:** Place the section inside a wide, centered container with a softly rounded outer boundary. Use a subtle, low-contrast pastel background that blends pale cyan, lavender, and blush pink; the colour should feel atmospheric rather than like three obvious bands. Add a very fine dotted or halftone texture at low opacity if it suits the product, keeping it in the background.
- **Layout:** Use three equal-width cards in a horizontal row on desktop, with consistent gaps and aligned bottoms. Keep the grid comfortably narrower than the outer section so the background remains visible around it. Place one centered primary CTA beneath the cards with generous vertical separation. Collapse to one column on small screens; preserve readable card proportions and stack the CTA after the grid.
- **Cards:** Use transparent or near-transparent card surfaces with a thin, low-contrast border around each card. Avoid heavy shadows. Give cards a modest radius, approximately `10px–14px`, and use consistent internal padding. Each card should have a tall visual area above its text, followed by a compact content area.
- **Illustration area:** Reserve roughly half of each card’s height for one distinctive, whimsical visual treatment related to the feature. Prefer abstract shapes, simple diagrams, hand-drawn forms, or custom product-relevant illustrations. Keep illustrations visually bold and centred, but do not let them overpower the title and description. Do not reuse reference artwork.
- **Typography:** Use a confident sans-serif or a product-appropriate display/sans pairing. Card titles should be medium-to-semibold, approximately `18px–21px`, with near-black text such as `#17151D`. Descriptions should be smaller, approximately `14px–16px`, with a relaxed line height around `1.5`, using muted slate-purple such as `#777486`. Keep titles short and descriptions to two or three lines where possible.
- **Spacing:** Use approximately `24px–30px` card padding, `28px–40px` between illustration and title, `8px–12px` between title and description, and `44px–56px` between the card row and CTA. Use a generous outer section padding, approximately `64px–88px` vertically and `24px–40px` horizontally.
- **Colour:** Use a pale background blend around `#D9F7F5` cyan, `#EDE5FF` lavender, and `#FFE3F0` blush, with very low-opacity transitions. Use near-black for headings, muted grey-violet for body text, and a saturated violet CTA around `#7437E8` or `#7A35E8`. Ensure text contrast remains accessible.
- **CTA:** Create one compact, rounded primary button with white text, medium weight, and approximately `14px–16px` type. Use a radius around `7px–9px`, horizontal padding around `20px–24px`, and a subtle shadow or brighter edge only if needed. On hover, slightly darken the violet, raise the button by 1–2px, and keep the transition quick and understated. Include a visible keyboard focus state.
- **Interaction:** Cards may have a restrained hover treatment—such as a slight lift, border colour change, or subtle illustration movement—but they should not become noisy or depend on animation to communicate meaning. Respect `prefers-reduced-motion`.
- **Responsive behaviour:** At tablet widths, reduce card padding and gaps while retaining a three-card rhythm if it remains legible. At narrow widths, stack cards vertically, keep each illustration area visually balanced, and make the CTA easy to tap. Avoid horizontal scrolling.
- **Accessibility:** Use semantic headings, descriptive text, meaningful button labelling, visible focus states, sufficient contrast, and `alt` text or accessible labels for any informative visuals. Decorative artwork should be hidden from assistive technology.

## Content guidance
Write original, product-specific feature titles and descriptions based on my product. Make the three features feel like parts of one coherent story, and make the CTA describe the next useful action. Do not use placeholder filler if my product context is available.

## Never
- Never copy the reference layout’s exact copy, feature names, button label, illustrations, characters, logos, or product names.
- Never use logos, brand marks, or partner names from the reference.
- Never reproduce the exact artwork, mascot style, composition, or decorative objects from the reference.
- Never use imagery or copy from the reference; create original content for my product.
- Never make the pastel background so strong that it harms text contrast or distracts from the cards.
- Never add unnecessary navigation, testimonials, partner-logo rows, or unrelated sections to this component.