## 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/labs-winszn-xyz/4df5b54d-904b-4cf9-bf65-93181d626a5e-1789097619-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/labs-winszn-xyz/4df5b54d-904b-4cf9-bf65-93181d626a5e-1789097588315-full.webp
- Component on Kage: https://kage.design/component/labs-winszn-logo-cloud

## Before you start
Ask the user what their product is, who it is for, and what their brand personality and visual system are. Then apply the principles below to create an original technology, partner, capability, or ecosystem cloud for their product—not a copy of the reference.

## Build this section
Create a wide, editorial logo-cloud section that communicates a curated set of tools, platforms, partners, or capabilities. Use text labels or the user's own approved marks, but make the component adaptable to different list lengths and content. The section should feel like a confident statement followed by evidence, with the statement on the left and the cloud on the right at larger widths.

### Layout and alignment
- Use a full-width rectangular section with generous horizontal padding, approximately 40px on desktop and 24px on small screens.
- Give the section a strong, high-energy brand background; use the user's brand colour when available.
- Organise the content in a two-column layout: a narrow editorial column around 32–36% wide and a flexible cloud column for the remaining space.
- Align both columns toward the top, with the cloud beginning close to the section's eyebrow rather than vertically centering it.
- Arrange labels as an inline flex-wrap group with consistent horizontal and vertical gaps. Let pills wrap naturally instead of forcing a rigid grid.
- On screens below roughly 760px, stack the statement above the cloud and preserve a clear separation between them.
- Keep the outer section visually calm: do not add a card around the cloud or introduce unnecessary dividers.

### Typography hierarchy
- Use a small uppercase eyebrow with generous letter spacing, around 10–12px, medium or semibold weight.
- Use a large, compact headline beneath it, approximately 30–36px on desktop, with tight line height around 0.98–1.08. Make it expressive but short enough to read as a statement.
- Use a highly legible sans-serif with a slightly technical or editorial character. Use the product's typeface if supplied.
- Render each cloud label in uppercase or the product's chosen casing at approximately 10–11px, with medium weight and 0.12–0.18em tracking.

### Spacing, colour, and surfaces
- Use approximately 96–120px vertical padding on desktop and 56–72px on mobile, adjusting to the surrounding page rhythm.
- Use a vivid orange-red field as a fallback, approximately `#F04405` or `#F04A05`, with near-black text around `#111111`.
- Keep contrast strong between the background and text while allowing the pill outlines to be quieter than the headline.
- Style each label as a transparent pill with a 1px border using a darker, slightly transparent version of the foreground colour, such as `rgba(17,17,17,0.22)`.
- Use fully rounded pills with a radius of 999px and approximately 10–14px vertical padding and 16–18px horizontal padding.
- The section may use softly rounded outer corners, around 28–36px, if that matches the page's broader visual language; otherwise use square edges.
- Do not place logos inside white cards unless the user's brand system specifically requires that treatment.

### Interaction
- If labels represent links or filterable items, make the entire pill keyboard-focusable and provide a clear focus ring with sufficient contrast.
- On hover, slightly increase border contrast and optionally shift the pill background by a subtle amount; avoid dramatic animation.
- Keep motion quick and restrained, around 150–220ms, and respect reduced-motion preferences.
- If the labels are purely descriptive, render them as non-interactive tags and do not imply clickability.

### Responsive behaviour and accessibility
- Preserve the reading order: eyebrow, headline, then the complete cloud.
- Ensure the cloud remains readable when it wraps to many lines and never clips labels.
- Use semantic heading structure, sufficient colour contrast, visible focus states for interactive pills, and an accessible label or context for the collection.

## Never
- Never copy the reference's logos, product names, technology names, or exact wording.
- Never use the reference's brand identity as if it belonged to the user's product.
- Never include logos, product names, copy, illustrations, or imagery from the reference.
- Never force the labels into an exact row arrangement or reproduce the reference pixel-for-pixel.
- Never add decorative imagery when the component's strength should come from typography, colour, and wrapping structure.