## 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/adscope/d628eaa8-0259-4816-ad11-db69e3ce98d4-1789106702-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/adscope/d628eaa8-0259-4816-ad11-db69e3ce98d4-1789106621890-full.webp
- Component on Kage: https://kage.design/component/adscope-logo-cloud

## Before you start
Ask what the user's product does, who it is for, and what its brand personality and visual identity are. Then apply the principles below to create an original integration/logo-cloud section for that product rather than reproducing the reference.

## Design the section
Build a responsive integration showcase that communicates which external channels, services, or platforms a product supports. Treat it as a logo cloud with useful product context: each logo belongs to a compact status card rather than floating as decoration.

### Layout and alignment
- Place the section on a clean, light neutral background with a centered content container approximately 1180–1230px wide.
- Add a centered section heading above the cards with substantial vertical breathing room. Keep the heading to one concise line on desktop and allow it to wrap naturally on smaller screens.
- Use a three-column grid on desktop, with equal-width cards and a consistent gap of roughly 16px.
- Collapse to two columns at medium widths and one column on mobile. Cards must remain readable without horizontal scrolling.
- Make every card use the same internal structure: a top row with a small logo tile and service name, a short description below, then a thin divider and a bottom status row.
- Keep content aligned to the left; use the status control or badge at the far right of the bottom row.
- Allow card heights to accommodate different descriptions, but avoid awkwardly uneven rows where possible. Use a sensible minimum height and consistent padding.

### Typography hierarchy
- Use a modern sans-serif with a calm, product-led feel; use the user's brand font when available.
- Section heading: approximately 30–32px, regular weight, muted gray rather than pure black.
- Service name: approximately 19–20px, medium or semibold, dark charcoal.
- Description: approximately 16px with 1.45–1.55 line height, dark gray, and a comfortable readable measure.
- Status label: approximately 15–16px, regular weight, medium gray.
- Use weight and spacing—not oversized type—to establish hierarchy.

### Colour and surfaces
- Use a near-white page surface, approximately #FFFFFF, with a very subtle warm or cool neutral section background such as #FAFAF8 or #F8F8F6.
- Card surfaces should be white or nearly white, approximately #FFFFFF.
- Primary text can be approximately #171717; secondary description text approximately #343434; muted heading and status text approximately #737373.
- Use one restrained brand accent for active controls, such as a blue-violet around #5865E8, but adapt it to the user's brand.
- For unavailable or planned services, use a very pale highlight badge—soft yellow-green, approximately #E8F58A—with dark text. Do not let the badge dominate the card.

### Borders, radius, and spacing
- Give cards a thin dark neutral border, approximately 1px solid #1D1D1D, with a lightly rounded radius around 15–17px.
- Use approximately 24px internal card padding, reducing to 18–20px on narrow screens.
- Logo tiles should be roughly 64px square, softly rounded around 12–14px, and filled with a very light neutral such as #F3F3F1.
- Keep a 18–22px gap between the logo tile and the service text. Use around 8–10px between the service name and description.
- Add a subtle divider in the lower third of each card, approximately #E1E1E1, then give the status row 16–20px of top padding.
- Avoid shadows, gradients, excessive decoration, or dense borders inside the cards.

### Logo treatment
- Use original, legally appropriate placeholder marks or simple abstract symbols supplied by the user's product—not copied third-party logos from the reference.
- Center each mark inside its neutral tile and keep the visual weight balanced across services.
- The tile should be recognizable as a logo container even when a service is not yet available.

### Interaction and states
- Active integrations may show a compact on/off switch at the right side of the status row. Use an accessible button or switch with a clear label, keyboard focus state, and a visible active/inactive distinction.
- Active switch: accent-colored track with a contrasting light thumb. Inactive switch: pale gray track with a white or light thumb.
- Planned integrations should show a compact status badge such as “Planned” or “Coming later” instead of implying that the switch is functional.
- Cards may lift or change border colour subtly on hover, but keep the interaction restrained and preserve the editorial, utility-first feel.
- Ensure status is never communicated by colour alone; include readable text and accessible labels.
- On mobile, preserve the same hierarchy and make controls easy to tap.

### Responsive and accessibility requirements
- Maintain adequate contrast for all text and controls.
- Provide meaningful accessible names for logos, switches, and status badges.
- Respect reduced-motion preferences and avoid auto-scrolling logo marquees.
- Keep the grid performant and let descriptions wrap naturally.

## Never
- Never copy the reference's logos, product names, service names, or exact marketing copy.
- Never use AdScope branding, wording, or visual identity.
- Never reproduce proprietary third-party marks unless the user has supplied permission and assets.
- Never use illustrations or imagery from the reference.
- Never turn the section into an automatic scrolling marquee.
- Never rely on tiny text, colour alone, or disabled-looking controls without explaining the integration state.
- Never copy the exact card dimensions, spacing values, or arrangement as a pixel-for-pixel recreation; use the principles to fit the user's product and brand.