## 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-1789106591-2.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

## Before you start
Ask me what my product does, who it is for, and what visual brand language it already uses. Then apply the principles below to create an original feature-grid section for my product—not a copy of the reference.

## Goal
Build a calm, editorial “how it works” feature section that explains three core product capabilities in a clear sequence. The component should feel focused and premium, with generous breathing room and strong typographic hierarchy rather than decorative UI.

## Design language

### Layout and alignment
- Use a full-width section with a very pale, cool blue background, approximately `#EEF7FD` or `#EDF6FC`.
- Add a restrained top or bottom boundary line in a slightly darker blue-gray, approximately `#D2E1EB`.
- Constrain the content to a wide centered container, around `1120–1160px`, with responsive horizontal padding of `32px` on desktop and `24px` on mobile.
- Begin with a small section eyebrow aligned to the same left edge as the heading. Pair a short horizontal rule with a compact uppercase label.
- Place the main heading above the grid, with a generous gap between the heading block and the feature columns.
- Use exactly three feature columns on larger screens. Separate columns with thin vertical rules rather than cards or shadows.
- Keep each column top-aligned. On mobile, stack the columns vertically and replace vertical dividers with horizontal rules or subtle spacing boundaries.
- Let the third column accommodate slightly longer body copy without making the grid feel visually unbalanced.

### Typography hierarchy
- Use a high-contrast editorial serif for the main heading and feature titles. If the product has a brand typeface, use its serif display face; otherwise choose a refined transitional or old-style serif.
- Use a clean sans-serif for eyebrow labels, step numbers, category labels, and supporting metadata.
- The heading should be large and compact: approximately `48–56px` desktop, `38–44px` mobile, with a line height around `0.98–1.05`.
- Create contrast inside the heading with an optional italic or lighter-weight second line, but only if it fits the product’s brand.
- Use large blue step numbers, approximately `38–42px`, followed by a small uppercase category label with letter spacing around `0.12em`.
- Feature titles should be prominent serif text around `24–27px`, with a tight line height around `1.08–1.2`.
- Body copy should be a readable muted serif or humanist text style around `17–19px`, with a line height around `1.45–1.6` and a comfortable maximum width.

### Colour
- Primary ink/navy: approximately `#173557` or `#18385B`.
- Accent blue for step numbers and rules: approximately `#2D76B9`.
- Secondary text: approximately `#5D6B78`.
- Eyebrow and metadata: use the accent blue, slightly darkened if needed for accessibility.
- Keep contrast soft but readable; do not introduce gradients, bright saturated panels, or multiple accent colours.

### Borders, radius, and surfaces
- Use `1px` solid dividers in approximately `#C9DCE8` with low visual weight.
- Prefer an open editorial layout over individual cards.
- If cards are required by the implementation system, keep them borderless with the same background as the section and no shadows.
- Use no or very small corner radii—approximately `0–4px`. The visual language should feel typographic and architectural, not bubbly.

### Spacing
- Give the section generous vertical padding: approximately `112–140px` desktop and `72–96px` mobile.
- Keep the eyebrow close to the heading, around `24–30px` below it depending on the heading size.
- Leave roughly `64–88px` between the heading block and the feature grid.
- Within each feature, use about `24–28px` between the step marker and title, and `14–20px` between title and body copy.
- Maintain consistent column gutters of approximately `36–48px`, while keeping divider lines visually centered in the gutter.

### Interaction and responsive behaviour
- The section may remain static; its clarity should not depend on animation.
- If adding motion, use a subtle upward fade or opacity transition when the grid enters the viewport. Keep it brief and staggered by column, with no bouncing or dramatic movement.
- If feature columns are clickable, make the whole column keyboard accessible and provide a restrained hover state: slightly darken the title or accent colour, without changing layout.
- Ensure the reading order is eyebrow, heading, then steps one through three.
- On narrow screens, preserve the large type hierarchy but reduce it carefully so headings do not wrap awkwardly. Keep all text left-aligned.
- Meet WCAG contrast requirements for body text and focus states; provide a visible keyboard focus treatment if the columns are interactive.

## Content guidance
- Write a short, specific eyebrow that frames the section.
- Use a concise headline that communicates the product’s focused promise. A two-line heading with contrasting emphasis is welcome but not required.
- Give each feature a sequential number, a one- or two-word label, a clear benefit-led title, and a short paragraph.
- Keep the three features parallel in structure and progressively explain the product flow when appropriate.
- Use the user’s product terminology and brand voice rather than generic SaaS language.

## Never
- Never reuse the reference’s logo, product name, feature names, headlines, body copy, or exact wording.
- Never copy the reference layout pixel-for-pixel; adapt the structure to the user’s product and content.
- Never use the reference’s illustrations, imagery, decorative assets, or branded graphics.
- Never add unrelated logos, testimonials, badges, partner marks, or stock imagery to this component.
- Never turn the section into glossy cards with heavy shadows, excessive rounded corners, gradients, or dense controls.
- Never sacrifice readability for the editorial aesthetic.