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

Design analysis

Three equal columns quickly explain the release promise, each with a small numeric eyebrow, concise heading, short paragraph, and understated text link.

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-1789192910-2.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

## Before you start
Ask what the user's product update or launch promises are and how many key points need to be explained. Apply these principles to that product rather than reproducing the reference.

Build a three-column overview section on a black background. Use a centered max-width layout with 32–36px gaps and equal-width columns. Each item begins with a tiny numbered eyebrow in muted gray (#77777b), followed by a 16px semibold heading in #eeeeef, a compact 13px paragraph in #98989c, and a small low-contrast pill or text link beneath. Keep the columns aligned at the top and use ample horizontal breathing room. Avoid cards or strong borders; the section should feel like editorial release notes. On smaller screens stack the columns with 32px vertical spacing. Links should brighten on hover without introducing loud color.

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

More components