## 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-8.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-logo-cloud

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and visual language are. Then apply the principles below to create an original version for that product rather than reproducing the reference.

## Build a testimonial and social-proof section
Create a responsive section that communicates approachable, human customer support through a small set of customer quotes. The section should feel calm, credible, and slightly playful, with the testimonials as the visual focus.

### Layout and alignment
- Use a full-width section with a very pale, softly blended background. Keep the content inside a centered container with a maximum width of roughly 1100–1200px.
- Place a short centered heading near the top, followed by a single centered primary CTA beneath it.
- Below the CTA, add a three-column grid of equal-height quote cards on desktop. Use a single column on narrow screens and two columns at an intermediate breakpoint.
- Keep all text left-aligned inside the cards, while the heading and CTA remain centered.
- Leave generous vertical space between the intro, CTA, and cards. Align card tops and maintain consistent gutters.
- Let the cards extend naturally in height if quote lengths differ, but preserve a coherent row on large screens where practical.

### Typography hierarchy
- Use a clean modern sans-serif with a friendly, highly readable character.
- Make the section heading medium-to-large and conversational rather than display-heavy.
- Render quotes in a large, comfortable body size with a relaxed line height; the quote text should be the dominant element within each card.
- Use modest weight contrast instead of excessive bolding. Keep supporting metadata, if included, smaller and visually quieter.

### Colour
- Use a near-white base with an extremely subtle pastel gradient or atmospheric wash: pale blue around one side, soft lavender near the centre, and pale blush or peach toward the other side. Approximate colours: `#F4FBFF`, `#F7F3FF`, `#FFF4F5`.
- Use deep charcoal-purple text such as `#27243A` or `#343044` for strong readability.
- Use a saturated violet or purple for the CTA, approximately `#7C2FE2` to `#9140E8`, with white text.
- Keep the background effect low contrast so it supports, rather than competes with, the testimonials.

### Borders, cards, and radius
- Give each quote card a very light cool-grey or lavender border, approximately `#D9D8E5`.
- Use a subtle translucent or lightly tinted card fill, such as `rgba(255,255,255,0.45)`, allowing a hint of the background atmosphere to remain visible.
- Use a medium corner radius around 10–14px. Avoid strong shadows; if needed, use only a diffuse, low-opacity shadow.
- Keep card padding generous, around 28–34px on desktop and 22–26px on mobile.

### CTA and interaction
- Style the CTA as a compact filled button with a medium radius around 7–10px, comfortable horizontal padding, and a clear hover state.
- On hover, slightly brighten or deepen the purple and lift the button by 1–2px; include a subtle transition.
- Make the cards static by default. If the product needs interaction, use only a restrained hover treatment such as a small elevation or border-colour change.
- Ensure keyboard focus states are clearly visible and never rely on colour alone.
- Respect reduced-motion preferences.

### Responsive and accessibility details
- Maintain readable line lengths and avoid letting the quote cards become too narrow.
- Ensure the colour contrast of quote text and button text meets accessibility expectations.
- Use semantic section, heading, blockquote, and button/link elements where appropriate.

## Never
- Never copy logos, product names, brand names, or identifying marks from the reference.
- Never reuse the reference's exact testimonial copy, wording, customer names, or CTA language.
- Never copy illustrations, decorative assets, imagery, or background textures from the reference.
- Never treat the result as a pixel-perfect recreation; adapt the structure and design principles to the user's product and brand.
- Never use testimonials that imply real customers unless the user provides verified source material; use clearly fictional placeholder content during development.