## 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/pitch-com/6703b162-6073-44e6-a626-e3df0dc35c4b-1789060649-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/pitch-com/6703b162-6073-44e6-a626-e3df0dc35c4b-1789060611-full.webp
- Component on Kage: https://kage.design/component/pitch-logo-cloud

## Before you start
Ask what the user's product is, who it is for, and what their brand language, colours, and visual assets are. Then apply the principles below to create an original version for that product—not a copy of the reference.

## Build a tabbed logo-cloud section
Create a full-width social-proof section that helps visitors identify with a specific audience segment and then see recognizable customer or partner brands associated with it. The section should feel confident, editorial, and spacious rather than like a crowded directory.

### Layout and alignment
- Use a deep, saturated background across the entire section; let the content sit inside a centered max-width container of roughly 960–1180px.
- Start with a centered eyebrow in uppercase or small caps, followed by a large two-line statement. Keep the text block narrow enough to create a deliberate line break and strong visual rhythm.
- Place a horizontal tab navigation beneath the statement with four audience or use-case categories. Center the tab row on desktop and allow horizontal scrolling or a stacked arrangement on small screens.
- Use a thin rule beneath the tabs spanning the tab-navigation width. Add a short, brighter active indicator aligned exactly with the selected tab.
- Below the tabs, use a two-column content area: a rounded visual or brand-proof panel on the left and supporting copy on the right. If the product specifically needs a logo cloud, replace the visual panel with a balanced grid or flowing arrangement of customer marks.
- Keep the section vertically generous: approximately 80–120px top and bottom padding on desktop, reducing to 56–72px on mobile.
- Align the lower content to a shared container edge, while keeping the eyebrow and main heading centered.

### Typography hierarchy
- Use a clean contemporary sans-serif with soft geometric proportions or the user's brand font.
- Make the eyebrow compact and high contrast, around 14–16px with medium weight.
- Set the main statement around 44–56px desktop, 34–40px mobile, with a tight line height around 1.05–1.12 and a confident semibold or bold weight.
- Use 14–16px tab labels with medium weight. The active label should be clearly brighter than inactive labels.
- Set supporting copy around 16–18px with a relaxed 1.45–1.6 line height. Add a short, strong subheading above it at approximately 28–34px.
- Avoid excessive text: the statement should be memorable, and the supporting paragraph should explain the audience benefit in two to four lines.

### Colour
- Choose a dark brand-led background, approximately `#24105F` to `#321477`, rather than default black.
- Use a soft near-white for primary text, approximately `#F7F4FF`.
- Use a pale brand tint for the main statement, approximately `#BFA8FF` or an equivalent accessible accent.
- Use muted lavender-grey for inactive tabs and secondary copy, approximately `#8C7CAB`.
- Use a brighter white or pale accent for the active tab and indicator.
- Check contrast for all text and never rely on colour alone to communicate the active state.

### Borders, radius, and surfaces
- Keep the tab divider subtle: a 1px line using a low-opacity light tint such as `rgba(255,255,255,.28)`.
- Use a 2–3px active indicator with a crisp, squared or gently rounded end.
- Give image or content panels a generous radius around 20–28px; keep the panel free of unnecessary borders.
- If displaying logos, place them in a responsive grid with generous internal padding, consistent optical sizing, and no heavy card treatment. Use monochrome or single-colour marks that meet the surrounding contrast requirements.
- Avoid shadows unless the user's brand system calls for them; the background and spacing should provide the hierarchy.

### Interaction and responsive behaviour
- Tabs should be keyboard accessible, focusable, and expose their selected state with `aria-selected` or an equivalent semantic state.
- On tab change, swap the associated audience copy and logo set with a subtle crossfade or short opacity transition; do not use a distracting slide animation.
- Make the active underline animate between tabs only if it remains performant and does not obscure focus styling.
- Preserve a clear visible focus ring for keyboard users.
- On mobile, keep the headline centered, make the tab row horizontally scrollable without wrapping, and stack the lower content into one column.
- Ensure logo marks remain legible at small sizes and do not force users to zoom or decipher overly dense grids.

### Content guidance
- Use audience categories relevant to the user's product, not generic labels by default.
- Show a varied but credible set of customer, partner, or community marks. Keep the number high enough to signal adoption but low enough to preserve calm.
- If real logos are unavailable, use neutral text placeholders or abstract wordmarks during development and make the data easy to replace.

## Never
- Never reuse the reference's logos, product name, audience labels, headline, body copy, illustrations, photography, or imagery.
- Never copy the exact tab names, logo arrangement, proportions, or visual treatment from the reference.
- Never add a logo cloud that implies customers or endorsements the user's product cannot substantiate.
- Never use inaccessible low-contrast text, tiny unreadable marks, or tabs that cannot be operated by keyboard and touch.
- Never make the section a static decorative replica; adapt its audience logic, content model, and visual language to the user's product and brand.