Kage Design logo kage
raycast.com
Raycast 2.0 feature grid component

Design analysis

A sparse, cinematic feature band combines a left-aligned title and description with a large dark interface image extending across the right and background.

Prompt preview
## 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-2-0/585c4674-841f-40bf-a211-e6fd2d8f71e9-1789192911-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/raycast-2-0/585c4674-841f-40bf-a211-e6fd2d8f71e9-1789192849096-full.webp
- Component on Kage: https://kage.design/component/raycast-2-0-feature-grid-2

## Before you start
Ask what product capability or redesign should be highlighted and what visual asset best demonstrates it. Apply these principles to that product rather than reproducing the reference.

Create a wide feature showcase on a black page with a cinematic, low-density composition. Use a two-column content layer inside a max-width container: a narrow text block toward the left/lower-middle and a much larger product screenshot or abstract UI visual occupying the right side and bleeding toward the edges. Align the text vertically around the visual's center. Use a 21–24px off-white heading, a 13px muted supporting paragraph, and roughly 18px spacing between them. Keep the image dark, softly blurred or vignetted at its edges, and blend it into #000000 with radial/linear gradients. Do not add a visible card frame unless the product requires one. On mobile, place text above the visual and crop the visual safely.

Never: use logos, product names, copy, illustrations, or imagery from the reference.

More components