## 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/raycast-com/85f2a082-cb21-4e6a-8485-365ffb9d735a-1789067516-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/raycast-com/85f2a082-cb21-4e6a-8485-365ffb9d735a-1789067491-full.webp
- Component on Kage: https://kage.design/component/raycast-feature-grid-4

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

## Goal
Build a premium feature showcase section for a modern software product. The section should introduce a major capability, show it in a believable product interface, and continue into a responsive grid of supporting capabilities. The design should feel calm, cinematic, and product-led rather than like a marketing banner full of decoration.

## Structure and layout
- Use a near-black page background, with the feature section centered inside a wide max-width container of approximately 1100–1240px.
- Begin with generous vertical whitespace after the preceding content. Place a compact uppercase eyebrow above the heading, followed by a centered headline and a short supporting paragraph.
- Keep the introduction narrow: roughly 520–680px wide, centered, with the heading on one or two lines and the paragraph on one or two lines.
- Place the largest feature card directly below the introduction. Make it wider than the supporting cards and use it as the visual anchor.
- Use a large rounded rectangular card with a dark translucent surface, a fine border, and a product UI mockup occupying most of the upper area. Put a concise feature title and description in the lower-left portion of the card.
- Continue with smaller cards in a two-column grid beneath the primary card. Let each supporting card contain a compact interface preview above its title and description.
- Maintain a strong left and right alignment axis across the card grid. The card edges should line up cleanly, while the centered section heading can remain independent above it.
- On mobile, stack cards vertically, reduce the mockup height, preserve the primary card’s prominence, and keep horizontal padding around 20–24px.

## Typography
- Use a clean contemporary sans-serif with a neutral, highly legible appearance.
- Section heading: approximately 32–42px, medium or semibold weight, tight line-height around 1.08–1.15, off-white rather than pure white.
- Eyebrow: approximately 10–12px, uppercase, letter-spaced around 0.18em, in a muted warm accent colour.
- Supporting paragraph: approximately 16–18px with 1.45–1.6 line-height and a subdued grey colour.
- Card titles: approximately 15–17px, medium weight, bright enough to establish hierarchy.
- Card descriptions: approximately 13–15px, 1.35–1.5 line-height, muted grey, and limited to a few lines.
- Use restrained text contrast: the interface preview should carry more visual detail than the marketing copy.

## Colour and atmosphere
- Page background: near-black, approximately #08090B or #090A0C.
- Card surfaces: subtly lighter black, approximately #101115 to #15161A, with occasional translucent gradients.
- Primary text: approximately #F3F4F6.
- Secondary text: approximately #8C8F98.
- Borders: low-contrast cool grey, approximately rgba(255,255,255,0.14), becoming slightly brighter on hover.
- Use one small warm accent for the eyebrow, such as muted coral #D97778, and allow each product preview to have its own restrained accent colour.
- Add very subtle blurred glows behind selected mockups—blue, violet, green, or amber—but keep them low-opacity and clipped within the card. Avoid turning the whole section into a neon composition.

## Cards, borders, and spacing
- Use approximately 24–32px card radii for the larger cards and 18–24px for smaller cards.
- Give the primary card around 24–32px of internal padding; use 20–24px for supporting cards.
- Use 24–32px vertical space between the heading block and the primary card, and 24–28px between grid cards.
- Use 1px borders with subtle transparency, plus a faint inset highlight or shadow to separate cards from the black background.
- Keep card content comfortably inset and avoid dense edge-to-edge UI.
- Clip all mockup content to the card radius so previews feel like polished product surfaces.

## Product preview direction
- Create believable, simplified interface mockups that communicate the feature without relying on external images.
- For the primary preview, show a dark assistant or workflow interface: a narrow navigation rail or sidebar, a main conversation/work area, compact status rows, and a visible user request with a resulting action or response.
- Use low-contrast panels, small rounded controls, muted dividers, and a few tiny semantic icons or status indicators.
- The preview should look like a screenshot embedded in the card, not like a generic illustration. Use CSS/HTML mock UI or the user’s own product assets where available.
- Keep mockup text short and generic to the user’s product; do not fill the interface with decorative lorem ipsum.
- Supporting previews may show a command field, task automation, search results, media controls, analytics, or another workflow relevant to the user’s product.
- If the section is interactive, make cards or carousel controls keyboard accessible. Use visible hover/focus states: slightly brighter border, a small surface lift, and no aggressive animation.
- If there are more cards than fit in the initial viewport, support a restrained carousel or horizontal overflow pattern with clear previous/next controls; otherwise use a simple responsive grid.
- Respect reduced-motion preferences. Any glow, hover lift, or carousel transition should be subtle and short.

## Responsive behaviour
- Desktop: use a wide primary card and a two-column supporting grid.
- Tablet: reduce the container width and card padding while preserving the hierarchy.
- Mobile: center the introduction, stack the cards, allow mockups to crop gracefully, and avoid making text or controls too small to read.
- Ensure the section has sufficient contrast and never depends on colour alone to communicate status.

## Never
- Never copy the reference’s logos, product names, brand marks, interface labels, or marketing copy.
- Never reuse the exact card artwork, screenshots, icons, illustrations, imagery, or decorative assets from the reference.
- Never assume the user’s product is the same type of product; adapt the workflow previews and content to the user’s own offering.
- Never make the section a pixel-for-pixel recreation or use proprietary visual details from the reference.
- Never use an oversized heading, bright gradients, or glowing effects that overpower the product UI.
- Never sacrifice accessibility, responsive behaviour, keyboard focus states, or readable contrast for visual similarity.