## 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/basedash-in-espanol-francais-portugues/b3381e01-f9b6-42c9-8798-975c026618b1-1789106702-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/basedash-in-espanol-francais-portugues/b3381e01-f9b6-42c9-8798-975c026618b1-1789106655341-full.webp
- Component on Kage: https://kage.design/component/basedash-in-espanol-francais-portugues-feature-grid-3

# Build a centered integration ecosystem feature section

## Before you start
Ask the user what their product does, who it is for, and what their brand looks and sounds like. Then apply the principles below to their product rather than reproducing the reference. Use their real integration, partner, data-source, or capability categories and adapt the language to their market.

## Goal
Create a feature section that communicates “many parts of the user's workflow can come together in one place.” The section should feel calm, premium, trustworthy, and product-led: a concise headline and supporting sentence above a clear CTA, followed by a broad visual field of integrations or capabilities.

## Design language

### Layout and alignment
- Use a warm off-white page background, approximately `#FAF8F5` or a close brand equivalent.
- Center the section within a max-width of roughly `1120–1200px`; keep generous horizontal gutters of `24px` on mobile and `40–64px` on desktop.
- Place the content block in a vertical stack, centered on the page:
  1. headline,
  2. one-line supporting description,
  3. primary CTA,
  4. integration/capability grid.
- Leave a large amount of breathing room above the headline if this section follows a visual product demonstration. Aim for approximately `140–190px` of top separation on desktop and `88–120px` on mobile.
- Keep the headline and description narrower than the full grid: headline max-width around `760px`, supporting copy around `700–820px`.
- Put the grid below the CTA with approximately `28–40px` of separation.
- Build the lower visual field as a regular grid of compact, evenly spaced items. Use about `12–16` columns on wide screens, fewer on tablet, and `4–6` on mobile. Preserve consistent row and column rhythm.
- Let the grid extend close to the section edges while the editorial copy remains tightly centered. This creates a sense of scale and ecosystem breadth.
- If the product does not have integrations, substitute capabilities, workflows, data types, or customer outcomes. Keep the same “wide ecosystem beneath a focused promise” composition.

### Typography hierarchy
- Use a modern grotesk or neutral sans-serif with a clean, slightly human feel.
- Main heading: large, regular-weight, near-black text, approximately `48–56px` desktop, `36–42px` mobile, with `1.05–1.12` line-height and slight negative tracking around `-0.03em`.
- Supporting sentence: approximately `16–18px`, `1.45` line-height, medium gray, and regular weight.
- CTA label: `14–15px`, semibold or bold, with high legibility.
- Avoid excessive uppercase text, tiny labels, or decorative type treatments. The hierarchy should come from scale, spacing, and weight.

### Colour
- Page background: warm ivory/off-white around `#FAF8F5`.
- Primary text: near-black brown around `#171513`.
- Supporting text: muted warm gray around `#6E6A66`.
- CTA background: transparent or near-white `#FCFBF9`; border around `#DDD9D3`; text near-black.
- Integration marks should use the user's own brand colours, but standardize their visual treatment with consistent sizing and generous whitespace. Avoid adding coloured cards behind every mark unless the user's brand requires it.
- If using fades at the far left and right edges of the grid, make them subtle transitions back to the page background rather than obvious gradients.

### Borders, radius, and controls
- CTA: compact pill or softly rounded rectangle, approximately `10–12px` radius, `1px` border, and around `12px 20px` padding.
- Use a very light shadow only if needed: `0 1px 2px rgba(23,21,19,0.04)`.
- Integration items should not look like separate heavy cards. Give each item a consistent footprint, such as `40–48px` square, with no border or only an extremely faint one.
- Keep the grid visually airy; the logos or marks should be the focus, not their containers.

### Integration grid behaviour
- Use real, recognizable marks only when the user's product has permission and suitable assets; otherwise use abstract, product-specific symbols or text badges.
- Normalize all marks to a similar optical size rather than forcing identical dimensions. Preserve each mark's aspect ratio.
- Arrange enough items to suggest a large ecosystem, but avoid making the section feel randomly generated. Use subtle variation in colour and shape while maintaining consistent alignment.
- On responsive layouts, reduce the number of columns and hide or truncate the lowest-priority items rather than shrinking marks until they become illegible.
- If the grid is interactive, make each item keyboard-focusable with a tooltip or accessible label. On hover, allow a small lift or opacity increase and reveal the name; do not create distracting animations.

### Interaction and motion
- CTA should have a clear hover state: slightly darker border, near-white-to-white background shift, and a subtle `translateY(-1px)` or shadow change.
- Use a short ease-out transition of roughly `160–220ms`.
- Integration marks may gently brighten or scale to `1.04` on hover, but the overall grid should remain calm.
- Respect `prefers-reduced-motion` and disable transforms and nonessential animation when requested.

## Responsive and accessibility requirements
- Maintain a strong reading order: heading, description, CTA, then grid.
- Ensure the heading remains readable and does not wrap into an awkward single-word line.
- Provide meaningful accessible names for interactive integrations and sufficient contrast for all text and borders.
- The CTA must have a visible keyboard focus ring using the brand accent or a high-contrast neutral colour.
- Do not rely on colour alone to communicate categories or status.

## Content guidance
- Write a product-specific headline that expresses consolidation, coverage, or connected workflows without copying the reference wording.
- Keep supporting copy to one concise sentence explaining what can be connected or unified.
- Use a direct CTA such as “Explore connections,” “View supported sources,” or an equivalent phrase in the user's language.

## Never
- Never copy the reference product's logos, product names, integration marks, headline, supporting copy, CTA wording, or brand-specific language.
- Never use the reference image as an exact layout or asset source; reinterpret the principles for the user's product.
- Never include logos, product names, copy, illustrations, or imagery from the reference.
- Never make the grid so dense that marks become illegible or the section becomes visually noisy.
- Never use generic placeholder logos when authentic product-specific assets or neutral symbols would be more appropriate.