## 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/beehiiv-com/23eb8ac3-d7aa-449f-95ad-92bcd925810d-1789067455-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/beehiiv-com/23eb8ac3-d7aa-449f-95ad-92bcd925810d-1789067406-full.webp
- Component on Kage: https://kage.design/component/beehiiv-logo-cloud-2

# Build an integrations logo-cloud section

## Before you start
Ask me what my product is, who it is for, and what its brand personality and visual identity are. Then apply the principles below to my product rather than reproducing the reference section literally.

## Goal
Create a premium, editorial integrations section for a modern software product. The section should communicate that the product connects to a broad ecosystem of tools, with a clear path to explore or activate those integrations. Use a logo cloud or logo grid as the primary visual proof point, but keep the layout adaptable to the number and shape of available partner marks.

## Design language

- **Layout and alignment:** Use a full-width, very dark section with a centered content container around 1120–1180px wide. Place the intro copy in the upper portion or left side of the section, depending on the product’s content length. Align the heading and body copy to a consistent vertical edge. Place the primary CTA near the copy, not detached at the far edge unless the product’s desktop layout benefits from a split composition. Arrange integration marks in a loose, balanced cloud or responsive grid beneath or beside the copy. Preserve generous empty space so the section feels intentional rather than crowded.
- **Responsive behavior:** On desktop, use a two-column composition or an intro row followed by a multi-column logo grid. On smaller screens, stack the content, reduce the logo grid to two columns, and keep the CTA full-width or naturally sized. Ensure logos with different aspect ratios occupy visually balanced cells without distortion.
- **Typography hierarchy:** Use a bold, condensed or display-style uppercase heading, approximately 42–56px on desktop with tight line-height around 0.95–1.05. Keep supporting copy at 17–20px with 1.4–1.55 line-height and a readable maximum width of roughly 520px. Use a clear, semibold CTA label around 15–17px. Adjust the typeface to match the user’s brand while retaining a strong contrast between display heading and explanatory text.
- **Colour:** Use a near-black navy background such as `#07051A` or `#08061D`. Set the heading and primary text to warm white, around `#F7F5F2`. Use a muted lavender-white for secondary text, around `#B9B6C9`. Accent the CTA with a saturated electric blue or the product’s primary action colour, for example `#3546C8`, with a slightly brighter hover state such as `#4659E0`. Logos may use white, soft grey, or restrained brand colours, but avoid letting the logo treatment overpower the heading.
- **Logo treatment:** Use text or SVG placeholders for integrations supplied by the user; never invent recognizable third-party marks. Place each mark in a consistent visual area with comfortable horizontal and vertical padding. For monochrome logos, use `currentColor` and a muted white/grey default. If using cards, make them subtle and flat rather than decorative; the ecosystem should feel curated, not like a dense marketplace.
- **Spacing:** Give the section approximately 120–180px of vertical padding on desktop and 72–96px on mobile. Keep 24–40px between the heading and supporting copy, 28–40px between copy and CTA, and 48–80px between the intro and logo cloud. Use a consistent 8px spacing system and avoid filling every available area.
- **Borders and radius:** If logo cells or a logo panel are used, use a very subtle 1px border around `rgba(255,255,255,0.08)` and a small radius of 6–10px. Keep the surrounding section borderless. The CTA can use an 8–10px radius with a solid fill and no heavy shadow.
- **Interaction:** Make the CTA visibly interactive with a gentle colour transition and a 1–2px lift or subtle brightness change on hover. If logo marks link to integration details, give each logo cell a quiet hover state using a slightly lighter surface, border, or logo opacity increase. Include visible keyboard focus styles with a high-contrast outline. Do not add animation unless it supports the product’s brand; a restrained fade or stagger on entry is enough.
- **Accessibility:** Use semantic section and heading structure, meaningful accessible labels for logo links, sufficient colour contrast, and reduced-motion support. Preserve the reading order on mobile and never communicate meaning through logo colour alone.

## Content guidance
Use the user’s own integration names, supporting message, CTA label, and brand voice. If no logo assets are available, create clearly labeled neutral placeholders or typographic wordmarks that do not resemble real companies. The section should work whether the product has six integrations or several dozen.

## Never
- Never copy the reference layout pixel-for-pixel or reproduce its exact proportions.
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never invent or imitate recognizable third-party logos; use supplied assets or neutral placeholders only.
- Never make the logo cloud so dense that the heading, CTA, or content hierarchy becomes unclear.
- Never use low-contrast text, inaccessible focus states, or hover-only interaction.