## 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-1789067515-2.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-2

## Before you start
Ask the user what their product is, who it is for, and what their brand personality and visual system are. Then apply the principles below to create an original feature showcase for that product rather than reproducing this reference.

## Build this section
Create a cinematic, dark-mode feature showcase that introduces one product capability through a large interface preview. The composition should feel like a focused moment inside a broader feature grid: a short headline and supporting sentence sit above a dominant product mockup, with a concise benefit statement below.

### Layout and alignment
- Use a full-width section with a near-black background and generous vertical padding, approximately 96–160px on desktop and 64–96px on mobile.
- Center all content on a single vertical axis with a readable max-width around 1180–1240px.
- Place a compact two-line heading above the visual: a bold primary statement followed by a quieter explanatory line.
- Make the product preview the visual anchor, spanning roughly 92–96% of the content width on desktop. On small screens, allow it to remain wide and scale proportionally without causing horizontal overflow.
- Add a short benefit statement below the preview, using one emphasized phrase followed by a lower-contrast supporting phrase.
- Keep the section visually self-contained, but allow the lower edge to fade subtly into the following feature-grid content.

### Typography hierarchy
- Use a clean modern sans-serif, or the product’s existing brand typeface.
- Eyebrow/secondary line: 18–22px desktop, medium weight, muted gray.
- Main statement: 20–24px desktop, semibold or bold, tight line-height around 1.1.
- Supporting benefit copy: 16–18px, with the first phrase in near-white and the remainder in muted gray.
- Keep text centered, concise, and limited to a maximum of two lines above and two lines below the preview.

### Product preview treatment
- Represent the product with a believable, simplified interface tailored to the user’s product. Show one clear workflow or state rather than a collage of unrelated screens.
- Frame it as a dark application window with a thin outer shell, subtle inset border, and a slightly rounded radius of 14–18px.
- Use a layered depth treatment: outer frame, inner viewport, interface panel, then a restrained ambient glow behind the key interaction.
- If the reference product benefits from desktop framing, include a minimal top bar or window chrome; omit decorative controls that do not support the story.
- Keep the UI legible at a glance, but do not make the mockup denser than the surrounding page.

### Colour and atmosphere
- Page background: approximately #08090B or another brand-appropriate near-black.
- Primary text: #F4F4F5; secondary text: #85868C.
- Preview frame: #15171B with borders around #303238 at low opacity.
- Interface surfaces: #090A0C, #111318, and #181A20.
- Use one product-specific accent colour for the focal interaction. A warm red-orange such as #FF5F62 can work, but derive the hue from the user’s brand instead.
- Add a very soft, heavily blurred radial glow behind or within the preview at roughly 10–20% opacity. The glow should create depth, never compete with the interface.
- Avoid gradients in text and avoid multiple bright accent colours unless the product itself requires them.

### Borders, radius, and spacing
- Use 1px borders with low-opacity cool gray or white.
- Outer preview radius: 14–18px; inner panels: 8–12px; controls: 5–8px.
- Maintain 16–24px internal spacing in interface panels and 32–56px between the heading, preview, and benefit copy.
- Use a subtle shadow such as 0 24px 80px rgba(0,0,0,0.45), supplemented by a faint coloured glow only when it reinforces the focal feature.

### Interaction and responsive behaviour
- If the product preview is interactive, support a small set of purposeful states such as hover, selection, filtering, or keyboard navigation. Keep motion quick and understated: 150–250ms ease-out.
- Add a gentle hover lift or brightness change to interactive preview controls, but do not animate the entire section continuously.
- Preserve the reading order on mobile: heading, preview, benefit statement.
- Scale the preview fluidly, reduce internal UI density on narrow screens, and ensure all text remains readable without requiring horizontal scrolling.
- Respect reduced-motion preferences and provide accessible contrast, labels, and keyboard focus states.

### Content guidance
- Write original product-specific copy that explains the practical outcome of the showcased capability.
- Prefer a direct, memorable headline and a supporting line that clarifies the interface’s role.
- Make the lower statement outcome-oriented: emphasize what becomes easier, faster, or more reliable, then add a short qualification.

## Never
- Never use the reference product’s logo, product name, brand marks, or proprietary iconography.
- Never reuse the reference’s exact headline, supporting copy, labels, interface text, or feature names.
- Never copy the reference screenshot, layout details, window chrome, or product UI one-to-one.
- Never include illustrations, imagery, or decorative assets from the reference.
- Never invent a visually unrelated brand system; adapt the component to the user’s product and brand.
- Never let atmospheric effects reduce readability, interaction clarity, or accessibility.