## 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/loom-com/c384a931-6938-4c5e-b36b-e07415522afb-1789060438-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/loom-com/c384a931-6938-4c5e-b36b-e07415522afb-1789060413-full.webp
- Component on Kage: https://kage.design/component/loom-cta-3

## Before you start
Ask the user what their product does, who it is for, and what visual brand system it uses. Then apply the principles below to create an original version for that product—not a replica of the reference.

## Build a use-case CTA card grid
Create a spacious, editorial CTA section that helps visitors choose a relevant product use case. The section should feel playful, polished, and easy to scan, with a strong centered heading followed by a horizontal set of visually distinct cards.

### Layout and alignment
- Place the section on a clean white or near-white canvas, with generous vertical breathing room above and below.
- Use a centered max-width container of approximately `1180–1240px` with consistent horizontal padding of `32–40px` on desktop and `20–24px` on mobile.
- Center-align the main heading and keep it to one or two lines with a readable maximum width.
- Below the heading, use a four-column grid on wide screens with equal-width cards and a gap of approximately `56–68px`.
- On medium screens, reduce to two columns; on small screens, stack cards vertically or use a deliberate horizontally scrollable row with visible partial-card affordance.
- Keep all cards aligned to the same top edge and use a consistent internal rhythm so labels and descriptions feel like a system.
- Each card should include: a large visual placeholder or product-context panel, a bold title, and a short description. Make the entire card clickable if the product experience supports destination pages.

### Typography
- Use a modern, friendly sans-serif with high legibility and slightly bold display weight.
- Make the section heading prominent: approximately `48–56px`, `1.05–1.1` line-height, weight `700–800`, with responsive reduction to `36–42px` on mobile.
- Card titles should be approximately `22–24px`, weight `700`, with a compact line-height around `1.15–1.25`.
- Supporting text should be approximately `15–17px`, regular weight, with a relaxed `1.5–1.65` line-height.
- Keep the heading near-black and body copy a softer charcoal for clear hierarchy.

### Colour and visual treatment
- Use a white background around the section, with near-black text around `#111214`.
- Give each card its own very light pastel surface, such as mint `#E9F9C9`, lavender `#F1E8FA`, pale blue `#E3F1FC`, or warm yellow `#FFF0B8`; adapt these hues to the user’s brand palette.
- Use a richer accent colour inside the visual placeholder to suggest the product context, but keep it subordinate to the card’s pastel surface.
- The visual area should feel like a miniature interface preview using abstract blocks, controls, or neutral placeholders—not a literal screenshot copied from another product.

### Borders, radius, and spacing
- Use large, soft card corners around `28–32px`; avoid sharp rectangular panels.
- Avoid heavy borders. If separation is needed, use a subtle `1px` border such as `rgba(17,18,20,0.06)`.
- Give each card generous outer padding, approximately `32px` on desktop and `24px` on mobile.
- Make the visual panel tall enough to establish a strong image-to-text relationship, around `150–190px`, with its own radius of `14–20px`.
- Use approximately `28–36px` between the section heading and card grid, `28–32px` between visual and title, and `8–12px` between title and description.

### Interaction and responsive behaviour
- On hover, slightly lift the card with a restrained `translateY(-4px)` and a soft shadow; animate over `180–240ms` with an ease-out curve.
- If cards are links, provide a clear keyboard focus ring using the brand accent colour and preserve visible focus on dark and pastel surfaces.
- Keep hover effects subtle and avoid scaling the entire card so text and layout remain stable.
- On touch devices, preserve comfortable tap targets and do not rely on hover to communicate meaning.
- Ensure descriptions remain readable and cards maintain equal or intentionally balanced heights across a row.

### Content principles
- Use audience or workflow labels that are specific to the user’s product.
- Keep each description to roughly one or two short lines on desktop, explaining the practical benefit rather than repeating the title.
- Prefer a clear, direct section heading that communicates breadth of use cases.

## Never
- Never use the reference product’s logo, product name, brand name, or exact copy.
- Never reproduce the reference card artwork, interface screenshots, people, icons, illustrations, or imagery.
- Never copy the exact colour combination, card content, spacing measurements, or visual composition if they do not fit the user’s brand.
- Never make the section depend on inaccessible colour differences alone.
- Never use generic placeholder copy that hides the user’s actual product value proposition.