## 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/speechmark/77b904ee-7a59-4d24-b7d4-3e274188b21e-1789106592-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/speechmark/77b904ee-7a59-4d24-b7d4-3e274188b21e-1789106544280-full.webp
- Component on Kage: https://kage.design/component/speechmark-feature-grid-2

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

## Build this section
Create a spacious, editorial feature showcase for a software product. Use a two-column composition: a text-led column on the left and a compact, abstract product interface preview on the right. The section should communicate one core capability, then support it with three concise, numbered benefits.

### Layout and alignment
- Use a wide centered container, approximately 1100–1180px on desktop, with generous horizontal margins.
- Place the content in a two-column grid, roughly 46% text and 54% visual, with a 64–96px gap.
- Vertically center the product preview against the main heading and body copy rather than aligning it to the top edge.
- Keep the left column narrow enough for comfortable reading: approximately 500–560px.
- Start the section with a small eyebrow row containing a tiny brand-neutral symbol or abstract mark, a short horizontal rule, and uppercase supporting text.
- On smaller screens, stack the columns with the text first and the preview below; preserve generous vertical spacing but reduce it proportionally.
- Use a full-width section background with a subtle horizontal divider at the top and/or bottom.

### Typography hierarchy
- Use a refined serif or display face for the main heading, paired with a highly legible sans-serif or humanist text face for supporting content. Adapt these choices to the user's brand.
- Make the heading large and expressive, around 48–58px on desktop with tight line height around 0.98–1.05. Break it across two lines intentionally, with an optional italic or lighter treatment for the second line.
- Set the paragraph around 18–20px with 1.45–1.6 line height and a muted dark tone.
- Style the eyebrow in small uppercase lettering, approximately 11–12px, with increased tracking and medium weight.
- Use three benefit rows with small, low-contrast numeric labels and readable copy around 16–17px. Bold only the opening benefit phrase to make scanning easy.

### Spacing and rhythm
- Give the section approximately 120–150px of top and bottom padding on desktop.
- Separate the eyebrow from the heading by 24–30px, and the heading from the paragraph by 24–28px.
- Place the numbered list 34–44px below the paragraph.
- Space benefit rows by 20–26px, allowing each item to wrap naturally without creating a rigid card grid.
- Align the benefit text to a consistent vertical start while keeping the numeric labels in their own narrow column.

### Colour and surfaces
- Use a very pale cool background, approximately #F4F9FC or a brand-adjusted equivalent.
- Use a deep navy or ink tone such as #142B52 for the headline and primary emphasis.
- Use a softened slate tone such as #53606B for paragraph and supporting text.
- Add a restrained blue accent around #2F79C9 for rules, links, or the most important interface element.
- Use warm off-white surfaces such as #FCFDFB inside the preview, with a faint blue cast where helpful.
- Keep contrast accessible; muted text should still meet readable contrast standards.

### Borders, radius, and visual weight
- Keep borders thin and quiet: approximately 1px solid rgba(40, 75, 105, 0.18).
- Give the product preview a medium rounded radius around 16–18px and a very soft shadow or no shadow.
- Build the preview as a simplified conversation, dashboard, document, or result surface relevant to the user's product. Use abstract placeholder content rather than copying the reference.
- Inside the preview, use one stronger accent surface for a primary user input or action and a lighter bordered surface for the resulting answer or output.
- Keep the preview deliberately less visually dominant than the heading: it should demonstrate the capability without becoming a full interactive mockup.

### Interaction and responsiveness
- If the benefit rows are interactive, provide subtle hover or focus feedback such as a slight accent shift, underline, or background tint; do not make the section feel like a dense accordion unless the product requires it.
- Make all interactive elements keyboard accessible with visible focus states.
- On mobile, reduce the heading to approximately 38–44px, let the preview fill the available width, and avoid horizontal overflow.
- Respect reduced-motion preferences; any hover transitions should be short and subtle, around 150–200ms.

## Never
- Never reuse the reference's logos, product names, brand marks, or proprietary interface copy.
- Never copy the reference's exact headline, benefit wording, numbers, conversation text, or visual content.
- Never include illustrations or imagery from the reference.
- Never make the preview dependent on a specific third-party integration shown in the reference.
- Never turn the layout into a generic equal-card feature grid; preserve the editorial split between narrative and product proof.
- Never sacrifice legibility, responsive behavior, or accessible focus states for visual similarity.