## 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-1789060439-7.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-feature-grid-3

## Before you start
Ask what the user's product does, who it is for, and what its brand personality, colours, typography, and voice are. Then apply the principles below to create an original version for that product rather than reproducing the reference literally.

## Build this section
Create a spacious, editorial SaaS feature section that combines an upper use-case card rail with a lower feature checklist.

### Layout and alignment
- Use a white or near-white page background, with a centered content container approximately 1120–1200px wide.
- At the top, place four equal-width use-case cards in a single horizontal row on large screens. Keep small, even gaps between cards and align their text centrally.
- Let the cards feel like a continuation of content above: they may sit partially near the top edge of the section or have generous whitespace beneath them, depending on the surrounding page structure.
- Use a large vertical gap after the cards, followed by a small centered secondary link or pill-style action.
- Place the main feature heading below that action. Center it, keep it on one or two lines, and give it enough breathing room to act as the visual anchor.
- Below the heading, create a two-column checklist with equal column widths. Keep the checklist narrower than the overall container so the text remains easy to scan.
- Finish with a centered text link beneath the checklist.
- On smaller screens, stack the cards into one or two columns, reduce the heading size, and collapse the checklist to one column while preserving generous vertical rhythm.

### Typography hierarchy
- Use a modern sans-serif with a friendly, slightly rounded feel. Use the user's brand font when available; otherwise use a clean system sans-serif.
- Use bold, high-contrast card titles around 22–26px on desktop.
- Use card descriptions around 15–17px with comfortable line-height, typically 1.55–1.7, and constrain each description to a readable measure.
- Set the main feature heading in a heavy weight around 48–56px on desktop, with tight line-height around 1.05–1.12 and slight negative letter spacing. Scale to roughly 34–42px on mobile.
- Use checklist labels around 17–19px with medium or regular weight and line-height around 1.4–1.5.
- Make links visually distinct through weight, colour, underline, or a subtle pill background, but do not let them compete with the main heading.

### Spacing and rhythm
- Use approximately 24–32px internal padding in each card, with 40–56px of bottom padding so the cards feel soft and substantial.
- Give each card a minimum height so titles and descriptions align across the row.
- Use roughly 56–80px between the card rail and the small action, 96–128px between the action and the main heading, and 64–88px between the heading and the checklist.
- Space checklist rows by approximately 24–30px vertically and use 40–72px between columns, depending on viewport width.
- Keep the final link 56–80px below the last checklist row.

### Colour
- Keep the page background near white, such as #FFFFFF or #FCFCFB.
- Use one distinct but soft pastel background per card. Suitable starting values are pale lime #E9FFD0, pale lavender #F1E5FF, pale blue #E2F0FF, and pale yellow #FFF1C9. Adapt these hues to the user's brand palette.
- Use near-black text such as #111111 or #171717 for headings and body copy.
- Use a calm blue accent for check icons and supporting actions, such as #2878B8 or #2D75B6, with a very pale blue icon background around #EEF7FF.
- Ensure all text meets accessible contrast requirements, especially on pastel surfaces.

### Borders, shape, and surface treatment
- Avoid heavy borders and drop shadows. The design should feel clean and flat.
- Give the use-case cards a large rounded radius, approximately 28–36px, with subtly softened lower corners if that suits the brand.
- Use pill geometry for the small supporting action when it is presented as a button: approximately 999px radius, light pastel-blue fill, and compact horizontal padding.
- Checklist icons should be small circular badges, roughly 34–38px, with a pale accent fill and a simple check mark.
- Keep the checklist itself borderless so the whitespace does the organizational work.

### Interaction and responsive behaviour
- Make the use-case cards optionally interactive if they map to navigable use cases. On hover, use a restrained lift of 2–4px, a very subtle shadow or colour shift, and a fast 150–220ms transition.
- Make links show a clear hover and keyboard-focus state. Preserve an obvious focus ring that meets accessibility requirements.
- Ensure the cards do not become cramped on mobile: stack them, allow natural text wrapping, and keep equal internal padding.
- Use semantic headings, lists for checklist items, real links or buttons for actions, and sufficient touch targets.

## Never
- Never use the reference site's logo, product name, branded copy, exact feature labels, or any other proprietary wording.
- Never copy the reference's exact card text, heading, link labels, spacing measurements, or visual assets.
- Never add illustrations, screenshots, decorative imagery, or icons borrowed from the reference.
- Never assume the user's product is a video-recording tool; write content that reflects the user's actual product and brand.
- Never sacrifice responsive behaviour, readability, accessibility, or keyboard navigation to match the reference appearance.