## 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-1789060914-3.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-3

# Build a bento-style feature grid for a modern product website

## Before you start
Ask me what my product does, who it is for, and what its brand personality, colours, typography, and preferred visual style are. Apply the principles below to my product and brand; do not reproduce the reference literally.

## Goal
Create a responsive feature-grid section that communicates several major product capabilities at a glance. It should feel editorial, premium, calm, and highly scannable, with a clear hierarchy between primary and secondary features.

## Structure
- Use a centered, wide content container with generous whitespace above and below.
- Begin with a left-aligned headline block above the grid. Use a concise first line in near-black and a supporting second line in a softer gray so the message has a visual two-part rhythm.
- Place two CTAs beneath the heading: one high-emphasis filled button and one quiet secondary button.
- Below the intro, create a bento layout:
  - Row one: two equal-width, large feature cards.
  - Row two: three smaller feature cards, with the middle card allowed to be slightly wider if that better suits the product.
- Each card should include a short feature title in the upper-left, a compact arrow/action control in the upper-right, and a visual area beneath the text.
- On mobile, stack cards in a single column while preserving the order and hierarchy. Keep the large cards visually dominant through height, not by making the layout awkwardly wide.

## Layout and alignment rules
- Use a max-width of approximately 1150–1250px and consistent outer gutters of 24–64px depending on viewport width.
- Use a 24px gap between large cards and a 20–24px gap between rows; reduce to 14–16px on small screens.
- Large cards should be approximately 480–560px tall on desktop; smaller cards approximately 430–480px, depending on the visual preview.
- Align all card headings to the same top inset, around 28–32px. Keep the action button aligned with the first text line.
- Give visual previews a strong lower-card presence, with generous cropping or fade at the bottom rather than dense detail everywhere.
- Let one card use a subtle abstract pattern or curve, while other cards use quiet product-interface mockups, diagrams, or icon arrangements relevant to the user's product.

## Typography
- Use a clean contemporary sans-serif, or the user's brand typeface.
- Main heading: approximately 38–48px desktop, 30–36px mobile, medium weight, tight line-height around 1.05–1.12.
- Supporting heading line: the same size with a lighter gray colour and regular weight.
- Card titles: approximately 24–27px on large cards and 22–25px on smaller cards, with a 1.05–1.15 line-height.
- Use selective emphasis within titles: bold or near-black for the key capability, softer gray for the explanatory phrase.
- Buttons should be 14–16px, medium weight, with comfortable horizontal padding.

## Colour and surfaces
- Keep the page background warm white, approximately #FFFFFF or #FCFCFA.
- Use near-black text around #111111 and muted supporting text around #707070–#858585.
- Give cards a warm off-white surface around #F3F3F1 or #F5F5F3.
- Use a subtle 1px border around #DCDCD8; avoid strong shadows. If needed, use only a very soft shadow such as rgba(0,0,0,0.04).
- Use one bright, brand-appropriate accent for the primary CTA; a vivid yellow-green around #DFFF00 may be used only if it suits the user's brand.
- Keep mockups low-contrast and lightly faded so they support, rather than compete with, the card title.

## Borders, radius, and controls
- Use approximately 12–14px radius on cards and 8–10px radius on buttons.
- Action controls are compact square buttons, around 36–38px, with a white or near-white fill, subtle border, and a simple diagonal arrow or equivalent directional icon.
- Maintain visible keyboard focus states and meet accessible colour contrast for all interactive elements.

## Visual treatment and interaction
- Build original preview content that represents the user's product: dashboards, documents, timelines, data tables, workflow diagrams, avatars, or abstract system patterns as appropriate.
- Avoid overly literal screenshots. Prefer simplified, blurred, cropped, or stylized interface fragments with a clear focal point.
- On hover, cards may lift by 2–4px, deepen their border contrast, or reveal a slight change in the preview. Keep the transition restrained, around 180–240ms.
- The arrow control can translate diagonally by a few pixels on hover. Ensure the whole card is either a link or has a clearly defined interactive target.
- Respect reduced-motion preferences.
- Make the grid fully responsive and ensure previews do not overflow or become unreadable at narrow widths.

## Content guidance
- Write short, benefit-led feature titles. Use two-line titles where helpful, but do not force awkward line breaks.
- Keep the section focused on a coherent family of capabilities rather than unrelated feature claims.
- Use realistic placeholder content only until the product-specific copy is provided.

## Never
- Never use the reference company's logos, product names, feature names, or exact marketing copy.
- Never copy the reference grid's artwork, screenshots, icons, illustrations, integration logos, or imagery.
- Never reproduce the exact card proportions, text arrangement, decorative patterns, or visual assets; reinterpret the underlying hierarchy for my product.
- Never add decorative imagery that has no relationship to the user's product.
- Never sacrifice accessibility, responsive behaviour, or readable contrast for visual similarity.