## 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/inngest-com/085d18d8-47d3-43b1-92ae-d8bd045a677d-1789074881-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/inngest-com/085d18d8-47d3-43b1-92ae-d8bd045a677d-1789074849550-full.webp
- Component on Kage: https://kage.design/component/inngest-logo-cloud

## Before you start
Ask what the user's product is, who it is for, and what their visual brand guidelines are. Then apply the principles below to create a logo-cloud section for that product—not a copy of the reference.

## Design the section
Build a wide, low-height customer or partner logo strip intended to sit between major sections of a modern SaaS landing page. The section should feel like quiet social proof: recognizable logo marks are visible but deliberately secondary to the surrounding page content.

### Layout and alignment
- Use a full-width horizontal band with a centered inner container, ideally capped around 1180–1280px and padded 32–48px on desktop.
- Arrange 5–7 logo slots in one row on large screens, with visually balanced rather than mechanically equal spacing. Align each logo to the vertical center of the band.
- Give every slot a consistent maximum width and height, while allowing different logo aspect ratios to preserve their natural proportions.
- On smaller screens, either allow a controlled horizontal overflow/scroll pattern or wrap into two compact rows; avoid cramped logos and avoid a dense carousel unless the product needs one.
- Keep the band visually compact, approximately 120–180px tall, with generous vertical breathing room around the marks.

### Typography and logo treatment
- Use provided brand assets or neutral placeholder wordmarks only; never recreate third-party logos inaccurately.
- Treat logos as monochrome artwork in a soft gray/off-white range, approximately #8B8D92 to #D4D5D8, with opacity around 0.55–0.9 depending on contrast needs.
- Keep all marks optically similar in height, generally 22–30px, while preserving each mark’s proportions.
- If a label is needed for accessibility, keep it visually hidden or use a subtle, small sans-serif label; the logos themselves should carry the visual weight.

### Colour and surface
- Use a near-black charcoal background such as #101112 or #151617 rather than pure black.
- Add a very subtle grain, noise, or fine tonal variation at low opacity to prevent the surface from feeling flat. It must remain accessible and not reduce logo legibility.
- Use restrained warm accent flecks only as occasional decorative details, approximately #F26B4F or #FF765C. Place them sparingly and independently from the logos so they do not look like punctuation in a wordmark.
- Ensure logo contrast meets practical readability expectations while maintaining a muted, premium appearance.

### Borders, radius, and separation
- Use no visible card radius if the band is full bleed; let the background run edge to edge.
- Separate the band from adjacent sections with either no border or a very subtle 1px line around #252628 at low opacity.
- Avoid individual logo cards, shadows, badges, or pill containers; the openness of the strip is central to the composition.

### Interaction and accessibility
- If logos link to customer stories or company pages, make each mark a clear, keyboard-focusable link with a discreet focus ring in the warm accent colour.
- Add a gentle opacity/brightness increase on hover and focus, but avoid dramatic animation.
- Respect reduced-motion preferences and do not animate the entire logo row automatically unless there is a clear content need.
- Provide meaningful alt text for linked logos and mark purely decorative logos appropriately.

## Never
- Never use the reference page’s logos, product names, company names, or exact copy.
- Never copy the reference’s logo order, spacing measurements, texture treatment, or decorative placement literally.
- Never include logos, product names, copy, illustrations, or imagery from the reference.
- Never distort, recolour, or redraw user-provided brand marks in a way that violates their identity guidelines.
- Never make the logo cloud louder than the hero, primary CTA, or core product message.