## 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/plaid-com/7f22fbce-e808-4b19-99a1-7dcb31fbfb56-1789060799-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/plaid-com/7f22fbce-e808-4b19-99a1-7dcb31fbfb56-1789060772-full.webp
- Component on Kage: https://kage.design/component/plaid-feature-grid

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

## Goal
Build a polished feature-grid section that introduces several product capabilities or use cases. It should feel like a premium, editorial product overview: a strong headline and CTA establish the story, then a varied grid of clickable feature cards gives each capability a clear entry point.

## Design language

### Layout and alignment
- Use a very pale cool background, approximately `#F7F9FC`, with a centered max-width container of roughly 1080–1200px.
- Begin with a generous vertical offset above the section content. Align the headline, CTA, and grid to the same left edge.
- Use a large editorial headline, ideally two lines on desktop, with a maximum width around 900px. Place one primary CTA beneath it with comfortable separation.
- Follow with a bento grid: two wide feature cards across the first row, then three narrower cards across the second row. The wide cards should be approximately twice the visual area of the smaller cards, while preserving consistent gutters.
- Keep grid gaps around 20–28px. On tablet, use two columns; on mobile, collapse to one column while preserving the intentional order and clear spacing.
- Give the grid enough bottom margin to feel like a complete section rather than a dense list.

### Typography hierarchy
- Use a modern sans-serif with a slightly humanist or geometric feel.
- Make the section heading large and confident: approximately 48–58px desktop, 1.02–1.12 line-height, medium-to-semibold weight, and tight letter spacing around `-0.04em`.
- Card titles should be around 24–28px on wide cards and 22–25px on smaller cards, with a strong weight and tight line-height.
- Use a contrasting secondary phrase within each card in a softer, muted tone. Keep card copy short enough to scan in one or two lines on wide cards and up to three lines on small cards.
- Keep CTA text around 16px with a medium weight. Avoid excessive all-caps labels.

### Colour and surfaces
- Use a near-black navy for primary text, approximately `#061C2C` or `#071D2B`.
- Use a muted blue-gray for secondary card copy, approximately `#60748A`.
- Give cards a very subtle cool gradient, for example from `#E6F1FF` at the upper-left toward `#C8F2F1` or `#D8E9FF` at the lower-right. Vary the gradient direction or intensity slightly between cards so the grid feels organic but coherent.
- Keep contrast strong for headings and restrained for supporting copy.
- The primary CTA can use a near-black/navy fill such as `#07151F`, white text, and a thin luminous edge or focus ring using a restrained blend of cyan, violet, and pink. The effect should feel atmospheric, not neon-heavy.

### Borders, radius, and depth
- Use large rounded corners on cards, approximately 20–26px. Use a smaller but still generous radius, around 20px, for the CTA.
- Cards should have a faint light border, such as `rgba(255,255,255,0.55)`, plus a very soft shadow or inner highlight. Avoid heavy drop shadows.
- Keep card interiors calm and spacious. The visual weight should come from gradients, composition, and embedded interface previews rather than borders.
- Place a small circular arrow control near the top-right of every card. It should be outlined with a thin translucent blue-gray border, approximately 38–44px in diameter, and contain a simple right arrow.

### Card composition
- Put the title and supporting phrase near the top-left with around 24px of internal padding on desktop and 20px on mobile.
- Reserve the lower portion of each card for an abstract, low-contrast product visualization: a dashboard fragment, score indicator, flow, profile tiles, transaction list, or other UI abstraction relevant to the capability.
- Treat these visualizations as supporting evidence. Fade them gently into the card background, use soft blur or low opacity where appropriate, and avoid making them look like unrelated screenshots.
- For wide cards, let the UI preview occupy the lower half or extend slightly beyond the bottom edge. For smaller cards, use one focused object or compact interface fragment centered toward the lower area.
- If the product has no suitable UI, use simple abstract data forms, translucent panels, charts, pills, or geometric patterns. Do not rely on decorative imagery alone.

### Interaction and responsiveness
- Make each card a clear link or button with a generous clickable area, not only the arrow.
- On hover, slightly lift the card by 2–4px, increase the border brightness, and subtly shift or scale the underlying UI preview. Keep transitions around 180–260ms with an ease-out curve.
- Animate the arrow with a small rightward movement on hover. Preserve visible keyboard focus using a high-contrast outline or glow.
- Ensure the card content remains readable if motion is reduced; support `prefers-reduced-motion`.
- Keep the grid stable and avoid dramatic layout shifts. On mobile, cards should have a comfortable minimum height and the arrow must remain easy to tap.
- Use semantic heading structure, descriptive link labels, sufficient colour contrast, and accessible names for any abstract visualizations.

## Content guidance
- Write one concise, outcome-focused capability per card. Use a bold lead phrase followed by a softer explanatory phrase.
- Make the headline describe the breadth or value of the product ecosystem without using generic filler.
- Use a single clear CTA that leads to the broader product or capability directory.
- Generate new copy based on my product; do not reuse wording from the reference.

## Never
- Never use logos, product names, brand marks, or proprietary UI labels from the reference.
- Never copy the reference headline, card copy, CTA wording, or exact content structure verbatim.
- Never use the reference site's illustrations, screenshots, imagery, recognizable financial graphics, or branded interface elements.
- Never reproduce the exact visual assets or distinctive decorative patterns from the reference; create abstract, product-appropriate previews instead.
- Never make every card identical in size if the content benefits from a bento hierarchy.
- Never use dense paragraphs, harsh shadows, excessive gradients, low-contrast text, or decorative visuals that overpower the feature messages.