## 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/mintlify-com/71224961-d985-451b-9e35-e02eddcee178-1789060645-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mintlify-com/71224961-d985-451b-9e35-e02eddcee178-1789060616-full.webp
- Component on Kage: https://kage.design/component/mintlify-gallery

## Before you start
Ask the user what their product is, who it is for, and what their brand personality and visual identity are. Then apply the principles below to their product rather than reproducing this reference section.

## Build a proof-points and showcase section
Create a responsive marketing-page section that pairs a compact metrics row with a spacious customer or use-case showcase. It should feel editorial, premium, calm, and highly legible, with visual energy concentrated in the showcase cards rather than scattered throughout the layout.

### Layout and alignment
- Use a centered page container with a maximum width of roughly 1080–1200px and generous horizontal gutters.
- Start with a three-column metrics row. Each metric has a small muted icon or abstract symbol above a large value and a short supporting label below it.
- Separate metric columns with extremely subtle vertical rules on desktop. Remove the rules or stack the metrics cleanly on narrow screens.
- Leave substantial vertical breathing room between the metrics row and the showcase introduction; the transition should feel intentional, not crowded.
- Below the metrics, create a showcase header with a slim coloured accent rule at the far left, followed by a two-line statement: a dark, assertive first line and a softer muted continuation. Keep the text block left aligned.
- Place compact controls on the right side of the showcase header: previous and next square buttons, followed by one dark primary action button. On mobile, move controls below the text and allow the action to become full-width if needed.
- Under the header, show a horizontally scrolling or clipped card rail. Display three cards prominently on desktop with a partial fourth card visible at the right edge to signal more content. Use overflow clipping rather than a visible scrollbar.
- Make the card rail extend slightly beyond the inner text container if that helps create the gallery feel, while preserving consistent left alignment with the section content.

### Typography
- Use a modern neutral sans-serif with high-quality numeral rendering.
- Metric values should be large and lightweight-to-regular, approximately 34–40px desktop, with tight line height.
- Metric labels should be around 16px, medium gray, and sit close beneath the values.
- The showcase statement should be approximately 34–40px on desktop with tight line height and slightly negative tracking. Use near-black for the lead phrase and gray for the supporting phrase.
- Buttons should use compact 13–14px medium-weight text. Avoid excessive uppercase styling.
- Scale the headline to roughly 28–32px on smaller screens and keep the statement readable across no more than a comfortable measure.

### Colour and visual tone
- Use a near-white page background, approximately #FFFFFF or #FCFCFB.
- Use near-black text around #111111–#171717 and secondary text around #6B6F70–#858887.
- Use very pale neutral rules around #EAECEA or #F0F1EF.
- Use a restrained green accent for the small vertical marker, approximately #3F9E79, but adapt it to the user's brand accent.
- Keep metric icons monochrome, tiny, and low contrast.
- Let showcase cards carry the colour: each card can use a distinct saturated gradient or flat field, such as coral/magenta, mint green, deep indigo, or orange. Keep the card palette coordinated with the user's brand rather than copying these exact colours.
- Put any customer mark, product symbol, or short label inside a centered white rounded tile so it remains legible against the expressive background.

### Borders, radius, and surfaces
- Use 1px low-contrast borders for metric dividers, control buttons, and the section boundary where appropriate.
- Give showcase cards a medium radius around 6–10px and clip all background artwork within the radius.
- Give the inner white card tile a larger radius around 14–18px with a soft, subtle shadow or no shadow depending on the brand.
- Keep navigation buttons nearly square with a small 2–4px radius; use a white surface and faint border for secondary controls.
- Make the primary action a dark filled rectangle with a small radius and generous horizontal padding.

### Showcase card treatment
- Use cards with a consistent aspect ratio, roughly 1.15:1 to 1.35:1, and a minimum desktop width around 300–340px.
- Add abstract, non-literal decorative geometry—fine flowing lines, grids, or soft gradients—behind the centered tile. Keep decoration low contrast enough that the foreground remains dominant.
- Avoid overcrowding the cards with copy. The central tile should contain only a simple brand-neutral mark, short name, or category label relevant to the user's product.
- Add hover behaviour that subtly lifts or scales a card and increases the clarity of the decorative background without causing layout shift.
- Make the rail touch-friendly: support horizontal swipe on mobile and ensure the next-card preview remains visible when appropriate.
- Ensure controls have visible hover, focus, and disabled states; provide accessible labels and keyboard operation for carousel navigation.

### Responsive behaviour
- At tablet widths, reduce the showcase card width so multiple cards remain visible while preserving the partial next-card cue.
- At mobile widths, stack the metrics or use a two-column arrangement, reduce the large whitespace modestly, and turn the card rail into a swipeable single-card carousel.
- Keep all important text and controls within the viewport; do not rely on horizontal scrolling for the metrics or header copy.

## Never
- Never copy logos, product names, customer names, statistics, button copy, or other wording from the reference.
- Never reproduce the reference brand identity, exact card artwork, exact gradients, or distinctive decorative patterns.
- Never use the reference site's illustrations or imagery; generate abstract visuals appropriate to the user's product instead.
- Never make the metrics or carousel decorative at the expense of semantic HTML, keyboard access, focus states, responsive behaviour, or reduced-motion preferences.
- Never treat this as a pixel-perfect clone; preserve the underlying hierarchy, spacing logic, proof-building purpose, and gallery interaction while making the result original to the user's brand.