## 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/ramp-com/ad2900d9-6fba-4f32-a572-3ba7a6ce9831-1789060913-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ramp-com/ad2900d9-6fba-4f32-a572-3ba7a6ce9831-1789060875-full.webp
- Component on Kage: https://kage.design/component/ramp-logo-cloud

# Before you start

Ask the user what their product does, who it is for, and what their brand personality and visual identity are. Then apply the principles below to create an original customer logo-cloud section tailored to that product—not a copy of any reference.

## Design language

Build a wide, spacious social-proof section that pairs a short editorial statement with a structured customer showcase.

### Layout and alignment

- Use a centered page container with a maximum width of roughly 1150–1250px and generous horizontal padding, around 32–64px depending on viewport size.
- Place the introductory copy in the upper-left portion of the section rather than centering it. Keep the text block relatively narrow, around 520–620px.
- Use a large statement made of two visual tones: a dark primary phrase and a softer muted phrase that completes the thought. The contrast should guide reading without feeling like a separate component.
- Place a small text link with a simple arrow beneath the statement, aligned to the same left edge.
- Below the copy, create a horizontal showcase panel with a responsive grid of customer tiles and one larger featured story tile at the far right or end of the row.
- Use a 2-row grid on desktop. Keep logo tiles close to square or slightly wider than tall, with consistent dimensions and a clear rhythm. Let the featured story tile span both rows.
- On smaller screens, switch to a 2-column or horizontally scrollable arrangement. Preserve the featured tile’s prominence, but never let the grid become cramped or unreadable.
- Align all tile boundaries precisely. The logo grid should feel like one system rather than a collection of independent cards.

### Typography hierarchy

- Use a contemporary sans-serif with a clean, humanist or neo-grotesk character. Use the user’s brand typeface when available.
- Make the editorial statement large and compact, approximately 28–34px on desktop with tight line-height around 0.98–1.08. Scale down responsively to around 24–28px on mobile.
- Use regular or medium weight for the statement; reserve bold weight for only the most important phrase if the brand supports it.
- Render the supporting link at approximately 15–17px with a calm, understated treatment.
- Keep logo wordmarks monochrome and optically centered. Do not force every logo into identical visual width; normalize by perceived scale instead.
- Keep featured-story metadata noticeably smaller than the main metric, with the metric large, high-contrast, and easy to scan.

### Colour

- Start with a warm or neutral near-white background, approximately #FAFAF8 or #FFFFFF.
- Use near-black for primary text, approximately #111111 or #171717.
- Use a cool or warm medium gray for secondary statement text and supporting labels, approximately #777777–#8A8A8A.
- Render logos in a single subdued gray, approximately #989898–#A3A3A3, so the section communicates breadth without becoming visually noisy.
- Use a very light border gray, approximately #E9E9E6 or #ECECEA, around tiles and between grid cells.
- For the featured story tile, use a brand-appropriate dark overlay or image treatment. If imagery is appropriate for the user’s product, ensure text remains readable with a strong contrast layer; otherwise use a solid dark brand colour such as #252525.
- Keep the overall palette restrained. The featured tile may carry the only strong tonal contrast.

### Borders, radius, and surfaces

- Give the overall showcase a subtle outer border and a medium rounded corner, approximately 14–18px.
- Use very fine internal dividers or adjacent tile borders; avoid heavy card shadows.
- Give individual logo cells softly rounded corners, approximately 10–14px, while keeping seams visually aligned.
- Use a minimal or imperceptible shadow only if needed to separate the showcase from the page background.
- Maintain generous internal whitespace in each logo tile so marks never feel crowded.

### Interaction and responsive behaviour

- Make the supporting link visibly interactive with a small arrow that shifts slightly on hover or focus.
- If logo or story tiles lead to customer stories, expose the affordance subtly: show a small circular arrow control or a slight background shift on hover, while preserving the calm grid.
- Ensure hover states are also available through keyboard focus, with a clear but refined focus ring.
- Keep logo tiles static when they are not links; never add motion merely for decoration.
- On touch devices, avoid hover-dependent meaning. Use clear links, accessible labels, and either a stacked grid or a deliberate horizontal scroll pattern with no accidental clipping.
- Provide meaningful alt text for logos and featured media. If a logo is decorative because its customer name is already present in accessible text, mark it appropriately.
- Maintain WCAG-compliant contrast, especially for muted text and any content over a featured image.

## Content structure

- Include one concise proof-oriented headline or statement, with an optional muted continuation.
- Include one understated text link for a report, case-study index, customer stories, or another relevant proof destination.
- Populate the grid with a varied set of customer or partner marks using neutral placeholders or the user’s approved assets.
- Reserve one larger tile for a featured customer result, quote, metric, or story. Keep the metric short and make the supporting context legible.

## Never

- Never reuse the reference’s logos, product names, customer names, headline copy, link copy, metrics, or wording.
- Never copy the exact tile count, ordering, proportions, or featured story treatment; adapt the system to the user’s content and responsive needs.
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never turn the logo cloud into a noisy carousel, dense logo wall, or decorative strip with no clear hierarchy.
- Never distort, recolour, or tightly crop approved customer logos.
- Never sacrifice accessibility, legibility, or keyboard interaction for visual similarity.