## 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/thousand/cb10af68-535d-4246-97d9-03dbd24306a9-1789106637-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/thousand/cb10af68-535d-4246-97d9-03dbd24306a9-1789106570706-full.webp
- Component on Kage: https://kage.design/component/thousand-logo-cloud

## Before you start
Ask what the user's product is, which tools or integrations it connects to, and what their brand identity is. Then apply the principles below to create an original version for that product rather than reproducing the reference.

## Design language

Build a compact integration-to-product logo bridge suitable for a hero section. The component should communicate that several existing tools, sources, or workflows converge into the user's product.

### Layout and alignment
- Center the component horizontally within the hero content area.
- Arrange 3–5 integration tiles in a single horizontal row, followed by a slim right-pointing arrow and one final destination tile or product mark.
- Keep the sequence visually balanced: equal gaps between integration tiles, a slightly larger gap before the arrow, and a slightly larger gap after the arrow.
- Use a responsive layout. On narrow screens, allow the row to wrap into two centered rows or become a horizontal scroll region; never let logos overlap or become unreadably small.
- Give the entire bridge generous surrounding whitespace. It should feel like a supporting visual beneath or beside the hero message, not a dense directory of logos.
- Align every tile and the arrow to a shared horizontal centerline.

### Tiles and logo treatment
- Place each integration inside a near-white rounded square tile, approximately 54–64px on desktop and 48–56px on mobile.
- Use a subtle warm-gray border such as `#E7E3DA`, a very soft shadow such as `0 4px 12px rgba(35, 32, 27, 0.08)`, and a radius of approximately 14–18px.
- Keep logos optically centered with consistent visual scale rather than forcing every logo to the same bounding box. Use restrained brand colors only when they are part of the user's actual integration identities.
- The destination should have slightly more visual emphasis than the source tiles, through modestly larger scale, stronger contrast, or a more distinctive container—not through a loud badge or oversized treatment.
- If actual logos are unavailable, use simple neutral placeholders or text-free geometric marks; do not invent recognizable third-party logos.

### Arrow and interaction
- Use a thin, quiet arrow between the source tiles and destination, approximately 28–44px wide. A line with a clean arrowhead is preferable to a heavy icon.
- Use a muted neutral color such as `#8B887F` so the arrow supports the flow without becoming a focal point.
- If tiles are interactive, add a gentle hover state: translate upward by 1–2px, slightly strengthen the border, and increase shadow opacity. Keep transitions around 160–220ms with an ease-out curve.
- Provide accessible labels for each integration and destination. If the bridge is decorative, expose it as one grouped decorative element instead.

### Typography hierarchy
- Keep typography minimal. If labels are needed, use a small sans-serif label below each tile, around 12–14px with medium weight and color `#6F6B63`.
- Do not add explanatory copy inside the bridge; the surrounding hero heading should carry the message.
- Use a modern, humanist or geometric sans-serif that matches the user's brand. Avoid decorative display type inside this component.

### Colour and atmosphere
- Prefer a warm off-white or cream background around the component, approximately `#F5F1E8` or `#F7F4EC`.
- Use near-black for the strongest marks, approximately `#171715`, and warm charcoal for secondary elements, approximately `#625F58`.
- Keep the palette quiet and low contrast apart from the logos themselves. The component should feel editorial, calm, and premium.
- Ensure sufficient contrast for any labels and focus states, while preserving the soft neutral atmosphere.

### Spacing and sizing
- Use a desktop gap of 12–16px between integration tiles, 24–32px before the arrow, and 20–28px after it.
- Set the bridge's maximum width around 440–620px depending on the number of integrations.
- Use at least 24px of vertical space between the bridge and adjacent hero content; increase it when the hero headline is large.
- Maintain consistent internal tile padding, typically 12–16px.

### Accessibility and implementation
- Use semantic links or buttons only when the tiles perform an action; otherwise render them as a visual group.
- Include visible keyboard focus states that do not rely on color alone.
- Preserve the logos' aspect ratios and use SVG or optimized image assets where available.
- Avoid layout shift by defining image dimensions before assets load.

## Never
- Never copy the reference's logos, product names, brand marks, or exact icon artwork.
- Never reuse the reference's headline, supporting copy, or any other written content.
- Never include illustrations or imagery from the reference.
- Never reproduce the exact spacing, proportions, or composition as a pixel-for-pixel clone.
- Never make the logo row so prominent that it competes with the user's product message.