## 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/astro-build/2448cc02-1e48-497c-9333-8941f9d81557-1789073850-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/astro-build/2448cc02-1e48-497c-9333-8941f9d81557-1789073818-full.webp
- Component on Kage: https://kage.design/component/astro-build-logo-cloud

## Before you start
Ask what the user's product is, who it is for, and what its brand guidelines are. Then apply the principles below to create a logo-cloud section for that product rather than reproducing the reference literally.

## Build this section
Create a full-width social-proof logo cloud on a dark, atmospheric background. The section should feel confident, premium, and lightweight: a small centered statement introduces a broad collection of recognizable customer or integration marks, while the logos themselves form the visual focus.

### Design language

- **Layout and alignment:** Use a wide horizontal section with a centered content column and generous side padding. Place a short eyebrow or sentence at the top, centered above the logo field. Arrange logos in two or three responsive rows with intentional variation in logo widths; use flex or grid with centered alignment and generous horizontal and vertical gaps. Keep the final row centered rather than left-aligned when it contains fewer marks. On narrow screens, allow wrapping into fewer columns or a horizontally scrollable row, but preserve even spacing and clear breathing room.
- **Typography hierarchy:** Set the introductory line in a small, readable sans-serif at approximately 15–17px with medium weight and relaxed line height. Keep it visually subordinate to the marks. Use the product's own type system for any supporting copy, avoiding oversized headlines in this compact component.
- **Logo treatment:** Render supplied customer or partner logos as monochrome light marks, approximately `#F5F4FF` to `#FFFFFF`, with consistent optical height rather than identical bounding-box dimensions. Preserve each mark's aspect ratio and give wide wordmarks enough space. If real logos are unavailable, use neutral text placeholders or the user's approved assets—not invented brand identities.
- **Colour:** Use a deep navy-to-violet background, approximately `#080B24` at the lower-left and `#321080` to `#5A18B7` toward the upper-right. Add a soft, oversized radial purple glow behind the logo field, with a subtle near-black fade near the bottom so the section remains legible. Keep contrast high and avoid colorful logo treatments.
- **Borders and radius:** Prefer no visible card border; this should feel integrated into the page rather than boxed in. If the section needs separation, use a nearly invisible 1px line around `rgba(255,255,255,0.08)`. Avoid rounded containers around individual logos.
- **Spacing:** Use roughly 72–112px of vertical padding on desktop, 40–64px on mobile, with 28–40px between the intro line and first row. Use approximately 32–56px column gaps and 28–40px row gaps, adjusting responsively. Keep the logo cloud contained within a max width around 1080–1200px.
- **Interaction:** Logos may have a restrained hover treatment such as a slight opacity increase, brightness lift, or 1–2px upward movement. If logos link to customer stories, integrations, or case studies, make the entire mark keyboard-focusable and provide an accessible label. Do not add distracting animation; a slow, subtle glow or fade-in on entry is optional.
- **Accessibility and responsiveness:** Use meaningful alt text for every logo, maintain WCAG-friendly contrast, support keyboard focus, and ensure the layout does not overflow at common viewport widths. Respect reduced-motion preferences.

## Never
- Never copy the reference's logos, product names, customer names, or exact wording.
- Never use the Astro brand, Astro-specific copy, or any other recognizable identity from the reference.
- Never reuse the reference's exact logo arrangement, dimensions, spacing, or gradient as a pixel-for-pixel composition.
- Never add unrelated illustrations, decorative imagery, or stock photography.
- Never invent customer endorsements or imply usage without user-provided evidence.
- Never make every logo an identical width if that distorts its proportions.