## 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-1789060437-4.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

# Build a split feature showcase section

## Before you start
Ask me what my product is, who it is for, and what its brand personality, colours, and typography are. Then apply the principles below to my product rather than reproducing the reference. If I do not provide a brand system, propose a simple one that fits the product.

## Goal
Create a polished feature-grid section for a modern software landing page. The section should communicate one highly specific product benefit, support it with a short explanation and a clear CTA, and pair the copy with a friendly product visual or UI illustration. It should feel simple, confident, lightweight, and easy to scan.

## Structure and layout
- Place the section on a clean white or near-white background.
- Begin with a centered section heading and one-line supporting statement, with generous space above and below. The heading should be a concise, outcome-oriented claim; the supporting line should explain the broader value.
- Below the introduction, use a two-column feature row inside a centered max-width container of approximately 960–1120px.
- Align the text column vertically around the middle of the visual rather than at its top edge.
- Use an approximate 40/60 split: copy on the left, visual on the right. Keep the text column narrow enough for comfortable reading, around 330–400px.
- Leave generous horizontal and vertical whitespace. The section should feel deliberately sparse rather than dense.
- On smaller screens, stack the copy above the visual, preserve a clear gap between them, and keep the heading readable without excessive line length.

## Typography
- Use a friendly modern sans-serif, with a slightly rounded or humanist feel if it suits the brand.
- Make the main heading bold and compact, approximately 48–56px on desktop with tight line-height around 0.98–1.08. Reduce to roughly 34–40px on mobile.
- Use a supporting statement around 22–26px with relaxed line-height and medium weight.
- Use a feature title around 27–32px, bold, and allow it to wrap naturally over one or two lines.
- Use body copy around 17–19px with 1.5–1.65 line-height. Emphasize important inline links with a darker colour and a visible underline.
- Keep text colour near-black, approximately #111111 or #171717, with muted explanatory text around #303030.

## Spacing and alignment
- Use a substantial top offset before the section heading, approximately 80–120px on desktop.
- Keep 18–28px between the heading and supporting statement.
- Leave roughly 150–210px between the introductory copy and the feature row when the layout allows it; reduce this on smaller screens.
- Within the feature copy, use 22–30px between the icon and title, 18–24px between title and body, and 28–36px before the CTA.
- Align the icon, title, body, and CTA to the same left edge.
- Use a consistent max-width so the section remains visually centred at large viewport sizes.

## Colour, borders, and shape
- Use a mostly neutral canvas: white or approximately #FFFFFF / #FCFCFA.
- Select one saturated brand accent for CTAs and small decorative elements; a vivid blue around #1769D5–#2878D9 works as a fallback, but defer to my brand.
- Use a soft warm tint for the product visual, such as pale yellow #FFF3C9, peach #FFE6CF, lavender #EEE9FF, or another brand-appropriate pastel.
- Add a small circular feature marker beside the feature title: a solid accent dot inside a larger, very pale tinted halo. Keep it decorative and unobtrusive.
- The visual should use a large rounded corner radius, approximately 28–36px, with no heavy border. If a border is needed, use a very subtle warm grey such as #E9E5DC.
- CTA buttons should be pill-shaped or strongly rounded, approximately 999px radius, with a solid accent fill, white label, and comfortable horizontal padding.

## Product visual
- Build an abstract UI scene that demonstrates the benefit rather than using a generic stock image. For example, use a simplified schedule, dashboard, editor, message thread, or workflow surface with one clear focal interaction.
- Keep the visual contained in a soft pastel rounded rectangle around 430–500px square or slightly taller.
- Use restrained internal detail: a few horizontal rows, labels, cards, or controls are enough. Maintain a clear hierarchy so the visual reads at a glance.
- Include one human or content focal point only if it is appropriate for my product; represent it with original placeholders, abstract shapes, or generated UI content.
- The visual should feel integrated with the copy, not like a separate promotional banner.

## Interaction
- Make the CTA a real, accessible button or link with a clear hover and focus state.
- Add a subtle hover lift or scale effect to the visual only if it supports the product story; keep motion restrained.
- Use a visible keyboard focus ring with sufficient contrast.
- Respect reduced-motion preferences.
- Ensure links in the body copy are distinguishable without relying on colour alone.

## Responsive and accessibility requirements
- Use semantic heading levels and a logical reading order: section heading, supporting statement, feature title, description, CTA, then visual if appropriate.
- Provide meaningful alt text for the product visual, or mark it decorative if all information is already conveyed in surrounding text.
- Maintain colour contrast for text and controls.
- Avoid fixed heights that crop content. Let the illustration and text resize naturally.
- At narrow widths, use full-width controls where useful and prevent the illustration from overflowing the viewport.

## Never
- Never copy the reference’s logos, product names, brand identity, or exact marketing copy.
- Never reuse the reference’s illustrations, screenshots, people, imagery, or internal UI details.
- Never recreate the exact layout proportions or decorative artwork as a pixel-for-pixel clone; use the structural principles for my product instead.
- Never use placeholder copy that mentions the reference product.
- Never sacrifice readability, accessibility, or responsive behaviour to match the reference visually.