## 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/datafa-st/3396b937-0925-4898-ae76-13fd2ccd1a9f-1789067842-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/datafa-st/3396b937-0925-4898-ae76-13fd2ccd1a9f-1789067801-full.webp
- Component on Kage: https://kage.design/component/datafa-logo-cloud

# Build a framed integration logo-cloud section

## Before you start
Ask me what my product does, who it is for, and what its brand personality, colours, and preferred typefaces are. Then apply the principles below to my product and brand rather than reproducing a reference site.

## Goal
Create a logo-cloud section that communicates broad compatibility through a calm, highly structured collection of integration tiles. It should feel trustworthy and lightweight, with the logos acting as evidence rather than as the main visual event. Use realistic placeholder integration names or the user's approved assets only.

## Design language

### Layout and alignment
- Place the section inside a centered content container, approximately 980–1,120px wide on desktop.
- Organize integrations into one or more large grouped panels rather than presenting an unstructured list. Each panel contains a regular grid of compact tiles, typically three columns on desktop and two columns on smaller screens.
- Keep the grid aligned to a shared outer edge and use consistent tile widths and heights. Preserve generous whitespace around the collection so it feels like a supporting proof point.
- If the page has a primary CTA nearby, keep it visually separate and centered beneath or beside the logo cloud; do not let the integration grid become a competing button area.
- On mobile, collapse to one or two columns while maintaining equal tile heights and comfortable horizontal padding. Avoid horizontal overflow.

### Tile treatment
- Use pale off-white or white tile surfaces on a warm near-white page background.
- Give each grouped panel a subtle double-layer or nested-card effect: a very soft outer shadow or offset border, then a thin inner border around the grid.
- Use thin, low-contrast borders around tiles, approximately `#e5e3df` to `#eeece8`.
- Use modest rounded corners, approximately 10–14px for the outer panel and 7–10px for individual tiles.
- Keep shadows diffuse and almost imperceptible, such as `0 2px 8px rgba(30, 28, 24, 0.06)`. The section should not look glossy or heavily elevated.
- Allow logos to be monochrome, muted, or rendered as simple text marks so the overall system remains cohesive. Do not force every mark into a loud brand colour.

### Typography hierarchy
- If there is a heading, use a short, plainspoken heading in a dark charcoal such as `#292824`, with a medium or semibold weight.
- Integration labels should be small and readable, around 14–16px, with normal or medium weight and a dark gray such as `#3f3d39`.
- Supporting text, if present, should use 13–15px type and a softer gray such as `#77736d`.
- Prefer a clean sans-serif with a human, editorial feel. Use a line height around 1.35–1.5 and avoid all-caps labels unless the product brand specifically calls for them.

### Spacing
- Give the section 72–120px of vertical breathing room on desktop and 48–72px on mobile.
- Use 16–24px between a heading and the panel collection.
- Use 8–12px gaps between tiles and 8–10px internal padding inside each tile.
- Keep logos optically centered with a consistent mark height, approximately 20–28px, and reserve enough width for longer names without causing wrapping where possible.

### Colour
- Page background: warm white, approximately `#faf9f7` or `#fbfaf8`.
- Panel and tile surfaces: `#ffffff` or `#fefefd`.
- Main text: warm charcoal, approximately `#292824`.
- Secondary text: muted stone gray, approximately `#77736d`.
- Borders: soft beige-gray, approximately `#e5e3df`.
- If the product has an accent colour, use it sparingly for a tiny mark, active state, or nearby CTA—not to colour every logo tile.

### Interaction
- Tiles may be static. If they are clickable, make the whole tile a clear link with a subtle hover state: slightly darker border, a 1–2px lift, or a very soft shadow increase.
- Include a visible keyboard focus ring using the product accent or a high-contrast neutral.
- Do not add distracting animation, auto-scrolling marquees, or logo-spin effects. The value comes from clarity and breadth.
- Provide accessible names for image-based logos and fall back gracefully to text when an asset is missing.

## Content and implementation
- Use the user's actual integration list, approved logos, and terminology when available.
- Build the section responsively with CSS grid or flexbox and semantic markup.
- Ensure contrast, focus states, and reduced-motion preferences are respected.
- If assets are unavailable, create restrained text-based placeholders that preserve the intended geometry rather than inventing branded artwork.

## Never
- Never copy the reference site's logos, product names, integration names, marketing copy, or exact content.
- Never use the DataFast brand, logo, screenshots, founder imagery, or any other reference-specific asset.
- Never reproduce the reference page's exact dimensions, ordering, spacing values, or visual artwork; use the principles to create an original version for my product.
- Never use logos, product names, copy, illustrations, or imagery from the reference.