## 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/frigade-assist-api/d96f9c4b-8236-4442-b795-92795f229d4a-1789106744-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/frigade-assist-api/d96f9c4b-8236-4442-b795-92795f229d4a-1789106649540-full.webp
- Component on Kage: https://kage.design/component/frigade-assist-api-feature-grid-4

## Before you start
Ask me what my product is, who it serves, 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 copy of the reference.

## Goal
Build a clean, editorial three-column feature grid that communicates three complementary product capabilities or outcomes. The section should feel like part of a premium B2B SaaS landing page: calm, precise, highly legible, and focused on practical value rather than decorative UI.

## Structure
- Place the component inside a centered page container, approximately 1120–1200px wide on desktop.
- Use three equal-width columns in a single row with subtle vertical dividers between them. Avoid individual card treatments; the grid should read as one continuous information band.
- Give the section generous horizontal and vertical padding, approximately 28–36px per column and 34–44px top and bottom.
- On screens below roughly 760px, collapse to one column. Keep horizontal separators between items instead of vertical dividers, and reduce padding modestly.
- Each column contains, in order:
  1. A small muted eyebrow row, optionally with a simple 14–16px line icon.
  2. A short benefit statement with the key phrase in semibold or bold, followed by lighter supporting text.
  3. A compact text link with a right arrow.
- Keep all three links aligned naturally beneath their respective copy where possible, but do not force awkward equal heights.

## Alignment and layout logic
- Align every column to the same left edge within its cell.
- Use consistent gaps: 14–18px from eyebrow to body copy, 12–16px between body copy and link.
- Keep the eyebrow on one line when possible and prevent icons from dominating the typography.
- Limit body copy to roughly 2–3 short lines on desktop. Make the bold opening phrase carry the main message, while the regular-weight continuation adds context.
- Use generous whitespace around the grid so it feels like a deliberate pause between larger page sections.

## Typography
- Use the product’s existing sans-serif or a neutral modern sans-serif.
- Eyebrow: 11–12px, medium weight, slightly increased letter spacing, muted gray.
- Body: 15–17px with approximately 1.55 line-height; use a dark neutral for the emphasized phrase and a softer gray for supporting text.
- Link: 13–14px, medium or semibold, using the brand accent; include a small right-pointing arrow with a little breathing room.
- Do not introduce a large heading inside this component. The grid is supporting content, not a hero.

## Colour and surface
- Default background: white or a very pale neutral such as #FFFFFF or #FCFCFB.
- Primary text: near-black navy/charcoal such as #202538.
- Supporting text: cool gray such as #6F737D.
- Eyebrow and icon: #8D9198.
- Dividers: extremely subtle #E9EBEE or rgba(32,37,56,0.10).
- Links and arrows: a confident blue adapted to the brand, approximately #1769AA or #1267A8.
- Keep contrast accessible; muted text should remain readable and links should be visibly distinct.

## Borders, radius, and visual treatment
- Use 1px hairline dividers only; no heavy outlines.
- Do not put each feature in a rounded card. If the surrounding product language needs a surface boundary, use one very subtle outer border with a radius of 0–4px.
- Avoid shadows, gradients, glass effects, badges, and ornamental backgrounds.
- Any icon should be monochrome, minimal, and visually subordinate to the copy.

## Interaction
- Make the entire link target easy to activate, not just the arrow.
- On hover, shift the link and arrow slightly toward a darker brand shade; an optional 2–3px arrow translation is enough.
- Preserve a clear keyboard focus ring around links.
- If columns are clickable beyond the explicit link, make that behavior consistent and communicate it with hover styling; otherwise keep only the text links interactive.
- Respect reduced-motion preferences.

## Responsive and accessibility requirements
- Use semantic section, list, and link elements where appropriate.
- Ensure the three benefits remain understandable when stacked on mobile.
- Keep dividers from creating confusing visual groupings at small widths.
- Support keyboard navigation, visible focus states, sufficient color contrast, and text zoom without clipping.

## Never
- Never copy the reference’s product names, logos, exact wording, customer names, or brand-specific claims.
- Never use illustrations, screenshots, avatars, decorative imagery, or visual assets from the reference.
- Never reproduce the reference layout pixel-for-pixel; reinterpret the grid for my product and brand.
- Never use placeholder copy that mentions the reference product. Generate fresh, product-relevant benefit statements after learning about my product.
- Never add unnecessary cards, gradients, shadows, oversized icons, or dense UI decoration that weakens the editorial clarity.