## 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-1789067453-2.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

## Before you start
Ask the user what their product is, who it serves, and what their brand language, colours, and typography are. Then apply the principles below to create an original trust/logo-cloud section for that product—not a copy of the reference.

## Design the section
Build a compact social-proof logo strip that sits on a deep, nearly black navy background. Its purpose is to communicate broad adoption or credibility quietly, using a short label and a row of recognizable customer, partner, publication, or community marks.

### Layout and alignment
- Make the section full width with a centered inner container, roughly 1200–1320px wide.
- Use a compact vertical composition: approximately 44–56px of top padding, a centered eyebrow, 34–48px of space below it, then the logo row, with 48–60px of bottom padding.
- Center the eyebrow and align every logo optically along one shared horizontal baseline or centerline.
- On wide screens, distribute 6–8 marks across one row with flexible gaps rather than fixed columns. Let each mark retain its natural proportions, but constrain its visible width and height so no single logo dominates.
- On smaller screens, allow the row to wrap into two balanced rows or become a horizontally scrollable row with hidden scrollbar; preserve generous gaps and avoid cramped marks.
- Use a responsive container with approximately 24px horizontal padding on mobile and 40–64px on desktop.

### Typography hierarchy
- Use a small all-caps eyebrow in a neutral sans-serif: 12–14px, 700 weight, approximately 0.08–0.12em letter spacing, and strong line-height.
- Keep the eyebrow short and confidence-building, such as a category-level statement supplied by the product owner.
- Do not add headings, body copy, buttons, or supporting paragraphs; the visual restraint is part of the component’s effect.

### Colour and logo treatment
- Use a deep navy/black background around `#080719` or adapt it to the user’s brand’s darkest surface.
- Set the eyebrow to a soft white around `#F4F2F8`.
- Render logos in a consistent monochrome light treatment—white or pale lavender around `#F5F3FA`—with enough contrast to remain recognizable.
- If source logos arrive in multiple colours, normalize them with CSS masking, a monochrome asset variant, or a carefully chosen filter. Do not use bright individual brand colours.
- Allow slightly reduced logo opacity, around 0.88–0.96, but prioritize legibility over a faded effect.

### Borders, radius, and spacing
- Keep the background flat and unboxed; do not place each logo in a card.
- Avoid visible borders, dividers, shadows, or rounded containers around the marks.
- Use consistent optical spacing: approximately 32–68px between logos on desktop, reducing to 24–36px on smaller screens.
- Give every logo a common visual frame, such as a max-height of 28–34px and a max-width of 150–180px, while allowing text-heavy marks to occupy more width than compact symbols.
- Balance the row optically rather than relying only on mathematical equal widths.

### Interaction and accessibility
- This is primarily a static credibility element. If logos link to customer stories or external sites, make the entire mark a clear, keyboard-focusable link.
- Add a subtle opacity or brightness increase on hover and a visible focus ring that fits the product brand.
- Provide meaningful alt text for each logo; if a logo is purely decorative and the eyebrow already conveys the message, use an empty alt attribute.
- Ensure the section remains readable at increased text sizes and does not rely on colour alone.

## Never
- Never copy the reference’s logos, product names, publisher names, eyebrow copy, exact ordering, or brand assets.
- Never include logos, product names, copy, illustrations, or imagery from the reference.
- Never invent an implied endorsement; use only brands, customers, or partners the user is authorized to mention.
- Never make one logo visually dominant through excessive size or colour.
- Never overcrowd the row, use low-contrast marks, or turn the section into a grid of cards.