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

## Before you start
Ask what the user's product does, who it is for, and what its brand personality and visual system are. Then apply the principles below to create an original feature-grid section for that product—not a reproduction of this reference.

## Build this section
Create a prominent editorial feature grid that introduces a small set of related resources, articles, case studies, or product features. The section should feel like a confident, energetic destination within the page, with one clear theme and two equally important content cards.

### Layout and alignment
- Place the component inside a wide, centered page container with generous horizontal margins.
- Use a large, saturated colour panel with strongly rounded outer corners, approximately 56–64px on desktop and 28–36px on mobile.
- Add a small eyebrow label near the top of the panel, centered above a large headline.
- Keep the headline centered and constrain its maximum width so it forms a compact, intentional block of roughly two lines on desktop.
- Below the heading, create a two-column grid of equal-width cards with a substantial gap between them. Align both cards to the same top edge and let their heights match.
- Keep the card content left-aligned with generous internal padding. Use a consistent vertical sequence: title, description, then a text link.
- Place a simple underlined text link such as “See all” above the panel, centered and visually separated from it. Make this link part of the section’s navigation, not a competing primary CTA.
- At widths below approximately 760px, collapse the cards into one column, reduce the panel padding, and preserve comfortable text measure. Ensure no horizontal overflow.

### Typography hierarchy
- Use a clean, modern sans-serif or the product’s existing brand typeface.
- Make the eyebrow uppercase or use small-label styling: approximately 11–13px, bold, with slightly increased tracking.
- Set the main heading in a heavy weight, approximately 48–58px on desktop with tight line-height around 0.98–1.05. Scale it to approximately 32–40px on mobile.
- Use card titles at approximately 21–25px, bold, with a compact line-height around 1.25. Allow titles to wrap naturally rather than truncating them.
- Use body copy at approximately 15–17px with a line-height around 1.65–1.8 for relaxed reading.
- Make the article/action link bold enough to read as interactive, around 14–16px, and pair it with a small right arrow or equivalent directional icon.

### Colour and contrast
- Use a vivid brand-led panel colour, approximately `#2167D5` or another saturated primary adapted to the user’s brand.
- Use a deeper related tone for the cards, approximately `#1D5BB9`, so the cards are distinct without feeling disconnected.
- Use near-white text, approximately `#F8FAFF`, for the eyebrow, heading, card titles, and links.
- Use a slightly muted cool white, approximately `#D7E5FF`, for card descriptions.
- Keep the surrounding page background quiet—white or a very pale neutral such as `#F7F8FA`—so the colour panel is the visual anchor.
- Verify accessible contrast for all text and interactive states.

### Borders, radius, and depth
- Prefer a flat, graphic treatment with no heavy shadows.
- Use the large radius on the outer panel and a moderately large radius, approximately 28–36px, on each card.
- Cards may use a subtle tonal border or a low-contrast inset highlight, but avoid visible outlines that compete with the colour blocks.
- Maintain consistent card padding, approximately 52–58px on desktop and 28–32px on mobile.

### Interaction and responsive behaviour
- Make the entire article card clickable if that suits the product’s interaction model, while preserving a clear visible text link.
- On hover, gently brighten or lift the card with a small colour shift or 2–4px translation; keep the motion fast and restrained.
- Animate the arrow a few pixels to the right on hover and provide an obvious keyboard focus ring.
- Use semantic markup: a section, heading hierarchy, list or grid for the cards, and real links.
- Ensure the layout works with longer translated titles and descriptions, reduced motion preferences, keyboard navigation, and touch input.

## Never
- Never copy the reference’s logos, product names, article titles, descriptions, or calls to action.
- Never reuse its exact copy, illustrations, imagery, icons, or brand assets.
- Never assume the user’s brand uses blue; adapt the palette while preserving the contrast between the main panel and its cards.
- Never make the cards visually identical to unrelated sections if the user’s existing design system has established spacing, typography, or radii.
- Never sacrifice accessibility, responsive behaviour, or readable text measure to match the reference composition exactly.