## 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/ramp-com/ad2900d9-6fba-4f32-a572-3ba7a6ce9831-1789060916-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ramp-com/ad2900d9-6fba-4f32-a572-3ba7a6ce9831-1789060875-full.webp
- Component on Kage: https://kage.design/component/ramp-feature-grid-2

# Build an editorial feature-grid section for the user's product

## Before you start
Ask me what my product does, who it is for, and what its brand personality, colours, type preferences, and primary conversion goal are. Then apply the principles below to my product rather than reproducing the reference literally.

## Goal
Create a polished feature-grid section that explains how the product helps a team scale or work more efficiently. The section should feel like a calm, premium editorial interlude: first establish the promise with a concise centered headline, then support it with a small set of large visual feature cards.

## Structure
- Use a wide page container, approximately 1120–1200px at desktop widths, centered on the page.
- Begin with a centered statement block separated from the content above by generous whitespace.
- Use a two-line headline: the first line is the primary promise in near-black; the second line reframes the outcome in a softer gray. Keep the line lengths short and visually balanced.
- Add one understated supporting sentence below the headline in medium gray.
- Follow with a two-column feature grid. Each card should be large enough to showcase a meaningful product interaction or system visual, not merely an icon and paragraph.
- Keep equal column widths and a consistent gap of roughly 24px. On narrow screens, stack cards vertically.
- Let the visual area carry most of each card. If descriptive text is needed, place it with clear hierarchy and enough padding rather than crowding the artwork.

## Layout and alignment rules
- Align the headline and supporting copy to the page's central axis.
- Align card edges precisely to the same container as the section heading.
- Use generous outer spacing: roughly 96–140px above the headline, 48–64px between the supporting copy and cards, and 24px between cards.
- Give cards a generous internal frame, around 32–48px desktop padding, while allowing product visualisations to extend optically toward the edges.
- Preserve an airy composition with large areas of quiet space around each focal interaction.
- On mobile, use one column, reduce card padding to around 20–24px, and keep the heading comfortably readable without forced awkward line breaks.

## Typography
- Use a modern grotesk or neutral sans-serif with excellent clarity.
- Main headline: approximately 44–52px desktop, 1.02–1.08 line-height, medium or regular weight, with a deliberate two-line colour contrast.
- Supporting text: approximately 16px, 1.45 line-height, medium gray.
- Any card labels or interface text should be smaller and functional, around 12–16px, with restrained weight and high legibility.
- Avoid excessive bolding; use size, colour, and whitespace to create hierarchy.

## Colour and surfaces
- Page background: warm white, approximately #FFFFFF or #FCFCFB.
- Primary text: near-black, approximately #111111 or #151515.
- Secondary headline and supporting text: neutral gray, approximately #777777 or #858585.
- Feature cards: very light warm gray, approximately #F4F4F1 or #F5F5F3.
- Product UI surfaces: white or off-white, with occasional muted blue, sage, lavender, or sand accents used only to distinguish states and categories.
- If a callout or transition band is needed elsewhere in the section, use a very subtle warm gradient rather than a saturated colour block.

## Borders, radius, and depth
- Use large, soft corner radii on cards, approximately 14–18px.
- Prefer no visible border, or use a hairline border around #EBEBE7 when separation is necessary.
- Avoid heavy shadows. If elevation is needed, use a very soft shadow such as 0 8px 30px rgba(20,20,20,0.05).
- Product mock UI should use small 6–10px radii, thin dividers, compact chips, and restrained shadows to feel like a credible working interface.

## Feature visual direction
- Build original, abstract product visuals that communicate capability through structure: workflow nodes, approval paths, dashboards, maps, timelines, tables, or automation rules.
- Keep visuals mostly monochrome and geometric, with one or two low-saturation accent colours for emphasis.
- Use subtle dotted grids, fine connector lines, soft radial fades, or carefully spaced data marks to add depth without becoming decorative noise.
- Ensure each card has one obvious focal point and that the visual remains understandable at a glance.
- Do not rely on screenshots; construct the visual with HTML/CSS/SVG or the user's own product UI primitives so it is responsive and accessible.

## Interaction
- If cards are clickable, make the entire card an obvious interactive target with a clear hover state: a slight lift, border tint, or subtle visual accent—not a dramatic animation.
- Respect reduced-motion preferences.
- Keep interaction secondary to comprehension; do not turn the grid into an auto-rotating carousel.
- Make any links or buttons keyboard accessible with visible focus states.

## Responsive behaviour
- Desktop: two equal cards in one row with generous height and balanced visual density.
- Tablet: retain two columns if there is sufficient width; otherwise switch to one column before the content becomes cramped.
- Mobile: stack cards, reduce headline size to approximately 34–40px, preserve the two-tone headline treatment, and prevent horizontal overflow.

## Never
- Never copy the reference site's logos, product names, brand identifiers, or exact wording.
- Never use the reference's actual feature labels, testimonials, interface copy, locations, data, or button text.
- Never reproduce the reference illustrations, map, workflow artwork, screenshots, or imagery; create original visuals suited to the user's product.
- Never make the section dependent on a specific brand, font, asset, or proprietary design system.
- Never sacrifice readability or responsive behaviour to imitate the exact composition.