## 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/cal-com/cdeba7c5-dd46-4ce9-ba9c-2d344d57a58b-1789060423-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cal-com/cdeba7c5-dd46-4ce9-ba9c-2d344d57a58b-1789060392-full.webp
- Component on Kage: https://kage.design/component/cal-feature-grid-3

## Before you start
Ask me what my product does, who it is for, and what its 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 compact feature showcase that communicates breadth through a set of evenly weighted capability cards. The section should feel calm, premium, and highly scannable, with a strong heading above the grid and enough breathing room to transition into the next section.

## Design language

### Layout and alignment
- Place the section inside a very light neutral page background, approximately `#f7f7f7` or a brand-appropriate equivalent.
- Use a centered content container with a maximum width of roughly `960px–1120px` on desktop.
- Start with a large, left-aligned continuation heading such as a short phrase that suggests there is more to discover. Keep it on one line where possible; allow natural wrapping on smaller screens.
- Follow the heading with a four-column grid on desktop. Use eight cards total, arranged in two rows of four.
- Keep all cards equal in width and height. Use a gap of approximately `12px–16px` between cards and rows.
- On tablet, reduce to two columns. On mobile, use one column or two narrow columns only if the labels remain comfortably readable.
- Align the content inside every card consistently: icon tile near the top, feature label beneath it, with the label baseline and left edge matching across cards.
- Leave substantial vertical space below the grid before the next section. A thin horizontal divider or section boundary may be used if it suits the surrounding page.

### Typography hierarchy
- Use a bold, modern sans-serif with slightly compact proportions. Use the product's own typeface when available.
- The section heading should be large and assertive: approximately `40px–52px`, weight `650–750`, tight line-height around `0.95–1.05`, and subtle negative letter spacing.
- Card labels should be concise, sentence case, and medium-to-bold: approximately `14px–16px`, weight `600–700`, with a line-height around `1.2–1.35`.
- Allow labels to wrap to two lines without changing card height. Do not add descriptive paragraphs unless the product requires them.

### Cards and icon tiles
- Use white cards, approximately `#ffffff`, against the soft neutral page background.
- Give cards a subtle border around `#e3e3e3` and a soft shadow such as `0 3px 10px rgba(0,0,0,0.07)`; keep the effect restrained rather than glossy.
- Use a medium-large corner radius, approximately `16px–18px` for cards.
- Make each icon sit inside a smaller rounded square tile, roughly `64px–68px` square. Use an off-white or very pale neutral fill, a fine border around `#dedede`, and a radius around `12px–14px`.
- Icons should be simple, solid or duotone interface symbols with a dark neutral colour around `#292929`. Choose symbols that communicate each capability without relying on illustrations.
- Add tiny, understated corner details or micro-controls inside the icon tile only if they support the product's visual language; otherwise keep the tile clean.
- Use generous internal padding, around `26px–30px` on desktop. Keep the icon tile visually separated from the label by approximately `20px–24px`.

### Colour and visual tone
- Keep the palette monochrome and low-contrast: near-black text around `#202124`, white cards, pale grey surfaces, and grey borders.
- If the brand has an accent colour, use it sparingly for icon details or hover feedback rather than turning every card into an accent panel.
- Prioritize clarity, softness, and consistency over decorative variation.

### Interaction
- Cards may be static if they are informational. If they link to deeper feature pages, make the entire card clickable with a clear hover and keyboard-focus state.
- On hover, slightly raise the card (`translateY(-2px)`), strengthen the shadow, or darken the border. Keep the transition around `160ms–220ms` with an ease-out curve.
- On keyboard focus, show a visible focus ring with sufficient contrast.
- Do not make the icons spin, bounce, or animate continuously. Any motion should be subtle and functional.
- Ensure labels, icons, and any links have accessible names and meet contrast requirements.

### Responsive behavior
- Preserve the visual hierarchy on small screens: heading first, then a clean grid with consistent card heights and spacing.
- Reduce heading size to approximately `32px–38px` on mobile and card padding to roughly `20px–24px`.
- Avoid horizontal scrolling. Keep touch targets at least `44px` when cards are interactive.

## Content guidance
- Invent feature names that are specific to my product and no longer than a few words.
- Use one clear symbol per card and ensure the icon meaning matches the feature.
- Keep the grid focused on breadth: capabilities, integrations, trust, localization, customization, or workflow support are suitable categories depending on the product.

## Never
- Never reuse the reference product's logos, product name, feature names, or exact copy.
- Never copy the reference layout so literally that it becomes a branded replica; adapt the grid count, heading, icon treatment, and content to my product when appropriate.
- Never use the reference's illustrations, imagery, screenshots, or decorative assets.
- Never introduce unrelated brand marks or third-party logos unless my product specifically requires them and I provide permission.
- Never sacrifice responsive behavior, accessibility, or readable contrast for visual similarity.