## 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/upstash-com/210669b2-56ab-47a0-9be6-e94255ecbd31-1789073748-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/upstash-com/210669b2-56ab-47a0-9be6-e94255ecbd31-1789073722-full.webp
- Component on Kage: https://kage.design/component/upstash-feature-grid-4

## Before you start
Ask the user what their product is, who it serves, and what visual brand language it already uses. Then apply the principles below to create an original resource or community feature grid for that product—do not reproduce the reference literally.

## Goal
Build a secondary feature-grid section that helps visitors discover a product’s educational content, community spaces, social channels, documentation, or other useful destinations. It should feel like a polished closing section near the bottom of a marketing page: informative, friendly, and visually quiet enough not to compete with primary conversion sections.

## Structure and layout
- Use a responsive grid of four equal-width cards on large screens, three or two columns at intermediate widths, and one column on small screens.
- Keep all cards the same height and align their contents consistently: optional line icon at the top, title, short description, then a compact action button.
- Center-align the content inside each card. Use a shared maximum width for descriptions so line lengths remain short and the grid feels orderly.
- Give the grid generous outer whitespace, especially above and below, so it reads as a distinct discovery section rather than a dense navigation block.
- Maintain consistent gutters of approximately 10–16px between cards and a page-side margin of 24px on mobile, 48px or more on desktop.
- Use a subtle section background, approximately #f7f8f7 or #f5f6f5, with cards that are slightly lighter, approximately #ffffff.

## Card styling
- Use large, soft corner rounding around 20–28px. The cards should feel welcoming rather than like rigid dashboard panels.
- Avoid heavy shadows. Prefer a very subtle border such as 1px solid #eef1ef, with only a barely visible shadow if needed for separation.
- Give each card generous internal padding, approximately 28–36px horizontally and vertically.
- Keep the visual hierarchy stable even when descriptions have different lengths. Clamp or constrain descriptions where necessary, and pin the action row toward the bottom.

## Typography
- Use a clean modern sans-serif already available in the product; do not introduce a decorative display face.
- Card titles should be semibold, approximately 22–26px on desktop and 20–22px on mobile, with a tight line height around 1.15.
- Descriptions should be regular weight, approximately 16–18px, with a 1.4–1.55 line height and a muted gray such as #737875.
- Keep titles in a dark green-black or near-black, approximately #073b32 or #102d28.
- Use concise descriptions of roughly two to three lines. Avoid overly promotional language.

## Icons and actions
- If cards need icons, use simple monochrome or outline icons with a restrained dark-green tone. Place them above the title with enough breathing room; never let the icon dominate the card.
- Use small pill-like or softly rounded rectangular buttons, approximately 96–112px wide and 40–44px tall.
- Button background: pale mint, approximately #e5f4ef or #e8f5f1. Button text: medium/semibold green, approximately #137b62.
- Include a compact arrow or directional glyph at the end of the label to clarify that the action leads elsewhere. Keep the icon optically aligned with the text and avoid oversized arrows.
- On hover, slightly deepen the mint background, shift the text toward #0d6b57, and translate the arrow a few pixels in the direction of travel. Keep transitions subtle, around 150–200ms.
- Make the entire card optionally clickable if that improves usability, but preserve a clear focus ring and ensure the button remains understandable as the primary action.

## Responsive and accessibility rules
- On mobile, stack cards with 16px gaps and retain generous padding; do not shrink text below comfortable reading sizes.
- Ensure keyboard focus is clearly visible using a 2px green outline with a 2px offset.
- Provide accessible labels for icon-only elements and meaningful link text for each destination.
- Check that cards with longer translated text still align cleanly and remain usable.

## Never
- Never copy logos, product names, brand marks, or proprietary icon artwork from the reference.
- Never reuse the reference’s exact card copy, labels, descriptions, or destination names.
- Never copy illustrations, imagery, decorative graphics, or distinctive branded motifs from the reference.
- Never make the grid feel like a pixel-for-pixel recreation; adapt the number of cards, content, colors, and type scale to the user’s product and brand.
- Never sacrifice contrast, responsive behavior, keyboard access, or semantic links for visual similarity.