## 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/superhuman-com/aa0f5749-a8ae-405c-9afb-679f6a47222d-1789060754-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/superhuman-com/aa0f5749-a8ae-405c-9afb-679f6a47222d-1789060721-full.webp
- Component on Kage: https://kage.design/component/superhuman-logo-cloud

## Before you start
Ask the user what their product is, who it is for, and what their brand identity should feel like. Then apply the principles below to create a version for their product—do not reproduce the reference brands or wording.

## Build a trusted-by logo strip
Create a wide, understated social-proof section for a modern software website. Its purpose is to reassure visitors through recognizable customer or partner marks without competing with the primary hero message.

### Design language

- **Layout and alignment:** Use a full-width, warm off-white section with a centered content container. Place a short centered eyebrow statement above the logo group, with ample vertical breathing room. Below it, create one horizontal grid row of six equal-width logo cells on desktop. Align every mark to the exact center of its cell, both vertically and horizontally. Keep the grid within the page’s standard max width and allow it to become a horizontally scrollable row or a two-column responsive grid on small screens rather than letting logos become cramped.
- **Typography hierarchy:** Use a small, neutral sans-serif eyebrow in a medium gray, approximately 15–16px with comfortable line height. Keep the message sentence case and avoid oversized marketing typography. Logos should be rendered as supplied wordmarks or simple text placeholders, with each mark sized according to its visual weight so the row feels optically balanced.
- **Spacing:** Give the section generous top and bottom padding, roughly 96–136px on desktop and 64–88px on mobile. Leave around 40–56px between the eyebrow and logo grid. Use consistent cell dimensions, with a desktop cell height around 80px and modest horizontal padding inside each cell.
- **Colour:** Use a soft warm background close to `#F8F7F4` or `#FAF9F6`. Set the eyebrow to a muted charcoal gray around `#5F5F5B`. Render all marks in a single deep ink tone around `#17172B`, or use each customer’s one-colour brand treatment only if the product’s identity calls for it. Keep contrast calm rather than flashy.
- **Borders and radius:** Separate the logo cells with a fine, low-contrast 1px border around `#D9D8D3`. Use square corners or a barely perceptible radius of 0–2px to preserve the editorial, institutional feel. Avoid shadows, gradients, and cards that look elevated.
- **Logo treatment:** Use a mix of typographic wordmarks and compact symbols where appropriate, but keep all marks optically similar in height and visual prominence. Do not stretch logos. Preserve their aspect ratios and provide accessible text labels or alt text.
- **Interaction:** This section can remain static. If logos link to customer stories or partner pages, make the entire cell keyboard-focusable and add a very subtle hover state such as a slightly darker border or a near-invisible background shift. Do not add loud animations or auto-scrolling.
- **Responsive behavior:** On narrow screens, reduce the number of visible columns to two or three, preserve generous cell padding, and maintain a clean reading order. If using horizontal scrolling, hide the scrollbar visually while retaining keyboard and touch access and avoid trapping focus.
- **Accessibility:** Use a semantic section with a concise accessible label, meaningful logo alt text, visible keyboard focus, and sufficient text and border contrast. Do not rely on the logos alone to communicate important information.

### Never

- Never use the reference page’s logos, company names, product names, or exact copy.
- Never copy the reference layout so literally that it becomes a branded reproduction; adapt the proportions and content to the user’s product and brand.
- Never include unrelated logos, invented endorsements, or claims that the user cannot substantiate.
- Never use promotional illustrations, decorative imagery, gradients, heavy shadows, or distracting motion in this component.
- Never distort, recolour, or crop a real customer logo against its usage guidelines.