## 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/viso-now/0aea1f2c-e643-44c4-ac70-db26df0b3931-1789106575-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/viso-now/0aea1f2c-e643-44c4-ac70-db26df0b3931-1789106536289-full.webp
- Component on Kage: https://kage.design/component/viso-now-feature-grid

## Before you start
Ask the user what their product is, who it is for, and what brand personality, colours, typography, and content they want to use. Then apply the principles below to create an original feature-grid section for that product—not a visual copy of the reference.

## Design the section
Create a light, spacious feature section that introduces a platform’s breadth through three horizontally aligned feature cards. The section should feel polished, calm, and software-oriented, with the visual emphasis on the cards rather than on decorative marketing graphics.

### Layout and alignment
- Use a full-width section with a near-white background, approximately `#FAFAFA` or `#FBFBFB`.
- Constrain the content to a centered max-width of roughly 1160–1200px.
- Add generous top and bottom padding, around 110–140px on desktop.
- Align the heading, supporting paragraph, and card grid to the same left and right content edges.
- Place a large section heading above the grid, followed by a short muted description with a comfortable maximum width of about 620px.
- Use a three-column grid on desktop with equal-width cards and a gap of about 28–32px.
- Stack cards vertically on smaller screens, preserving consistent gaps and making each card full width.
- Keep all three cards equal in overall height where practical, even if their copy lengths differ.

### Typography hierarchy
- Use a contemporary sans-serif with a clean, geometric or humanist feel.
- Make the section heading bold and prominent, approximately 48–54px on desktop with tight line-height around 1.05–1.12. Scale it down to roughly 34–40px on mobile.
- Use a supporting paragraph around 16–18px, line-height 1.45–1.6, in a medium gray.
- Card titles should be semibold or bold, around 17–19px, with a compact line-height and enough width to wrap naturally.
- Card descriptions should be 15–16px with line-height around 1.45–1.6 and a softer gray than the title.
- Establish clear contrast between the section heading, card titles, and supporting copy without relying on all caps.

### Card structure and visual language
- Give every card a white surface, approximately `#FFFFFF`, with a thin neutral border around `#E5E5E5` and a radius of 14–16px.
- Use a subtle, diffuse shadow such as `0 8px 24px rgba(20, 20, 20, 0.06)`; keep it understated.
- Divide each card into two zones: a tall visual preview at the top and a text area at the bottom.
- Make the preview zone approximately 245–270px tall on desktop, with a very soft tinted background or radial wash. Use distinct but restrained tints per card, such as blush `#FFF1F4`, lavender `#FAF0FF`, and pale blue `#EEF7FF`.
- Fade or soften the lower edge of the preview into white so the interface mockup feels integrated rather than like a separate image.
- Build each preview from simple UI primitives—panels, rows, labels, controls, icons, or a dashboard fragment—instead of using external imagery. Keep these elements low-contrast and slightly blurred/faded if the preview is illustrative.
- Reserve roughly 26–28px of internal horizontal padding for the card text area and 28–32px of bottom padding.
- Keep the title and paragraph left-aligned. Use a consistent vertical rhythm between title and body copy.

### Content pattern
- Make the three cards tell a progression, for example: turn an idea into a result, refine and activate it, then operate it on dependable infrastructure.
- Give each card a concise, benefit-led title and a short explanatory paragraph.
- Use original product-specific wording supplied by the user; do not hard-code the reference’s messaging.
- Ensure the first card feels exploratory, the second iterative, and the third operational or trustworthy, while adapting those stages to the user’s product.

### Interaction and responsiveness
- If cards are clickable, make the entire card an accessible link or button with a clear hover state: slightly stronger shadow, a 1–2px upward translate, or a subtle border-colour shift.
- Preserve text readability and avoid hover effects that move surrounding cards.
- Add visible keyboard focus styles using a high-contrast outline or ring.
- On tablet, switch to two columns if the content remains comfortable; on mobile, use one column.
- Ensure previews remain decorative and do not interfere with screen readers; provide meaningful accessible labels only when a preview conveys essential information.

## Never
- Never use logos, product names, or brand assets from the reference.
- Never reuse the reference’s exact copy, headings, card text, or interface labels.
- Never copy the reference’s illustrations, screenshots, icons, or imagery; construct new abstract UI previews from the user’s product domain.
- Never make the cards visually noisy, overly colourful, or dependent on imagery to communicate their value.
- Never sacrifice responsive behaviour, semantic structure, contrast, or keyboard accessibility for visual similarity.