raycast.com
Design analysis
Two compact horizontal resource cards are centered in a large quiet area, each combining an icon tile, title, description, and right-aligned arrow.
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-5.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-card ## Before you start Ask what supporting articles, onboarding resources, or announcements the user's product should link to. Apply these principles to that product rather than reproducing the reference. Create a narrow vertical stack of two horizontal resource cards centered within a spacious black section. Each card should be approximately 56–64px tall, use a charcoal translucent background (#111214), a subtle #242629 border, 10px radius, and a quiet hover state. Put a 64px-ish darker icon panel on the left, then a title in 13px semibold white and one muted 11–12px description beneath it. Place a simple arrow or external-link affordance at the far right. Keep the cards close together with 8px spacing, but give the overall section generous top and bottom whitespace so the links feel like an optional editorial stop rather than the main CTA. Make the whole card keyboard accessible. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage