## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/raycast-2-0/585c4674-841f-40bf-a211-e6fd2d8f71e9-1789192849096-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/raycast-2-0/585c4674-841f-40bf-a211-e6fd2d8f71e9-1789192844289.webp
- Design on Kage: https://kage.design/designs/raycast-2-0-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, logo, colours, typeface). Wait for the answers before writing any code. Everything below is applied to their product, not to the reference site.

## Page structure
- **Navigation bar**: full-width dark bar with a logo left, ~8 text links centre-right, a plain login link, and a single high-contrast white pill button on the far right.
- **Hero**: centred oversized two-line headline, one short dimmed subline, one white pill CTA, a small monospace system-requirement note underneath, and a dark 3D product render that fades into the black background at the bottom edge.
- **Expectations row**: three equal columns labelled 01 / 02 / 03 in dimmed monospace, each with a short bold heading, a two-line grey paragraph, and a small bordered pill link with an external-arrow icon — used to manage expectations about an upgrade.
- **Feature spotlight**: split section, text block left (heading + two-line grey paragraph), large tilted UI render right emerging from shadow.
- **Pivot heading**: centred two-line statement where the first line is dimmed grey and the second line is white.
- **Bento feature grid**: one wide card, two medium cards beside it, then one row of three compact cards. Every card embeds a dark UI screenshot with a title and one-line description pinned to the bottom-left corner.
- **Text link**: single centred underlined-style link with an arrow, closing the grid section.
- **Resource list**: two stacked horizontal rows, each with a small icon tile on the left, title + one-line description in the middle, and an external-arrow icon on the right, separated by thin borders.
- **FAQ**: centred heading, four accordion rows with chevron icons and hairline separators, generous vertical padding.
- **Closing CTA**: mirrors the hero exactly — dimmed-first-line headline, white pill button, monospace requirement note, dark render behind.
- **Footer**: six link columns (product, features, extensions, company, community, extras) on a slightly lighter surface, then a bottom bar with newsletter label, email input, subscribe button and legal microcopy.

## Design language
- Canvas is near-black (`#050505`–`#0a0a0a`); sections are separated by whitespace and soft glow rather than dividers, with one slightly lighter surface (`#111`) reserved for the footer and cards.
- Hierarchy is built from luminance, not colour: white headings, ~55% grey (`#8a8a8a`) body text, and dimmed first lines on two-line headings so the second line reads as the punchline.
- Monospace type is used only for technical metadata (system requirements, numeric indexes) — it signals engineering credibility without cluttering the sans-serif voice.
- One sans-serif family throughout: display sizes are very large with tight letter-spacing and medium weight; body copy is small and grey; captions are the smallest tier.
- Buttons: white fill, black text, pill radius (~10px), Apple/platform glyph optional. They are the only bright elements on the page, which makes the conversion path unmistakable.
- Cards: `#111`–`#161616` surfaces, 12–16px radius, 1px `#1f1f1f` borders, no drop shadows; captions live inside the card, bottom-left, white title + grey one-liner.
- Product imagery is rendered dark and tilted in 3D perspective, dissolving into the page with gradient masks — screenshots are never shown as bright boxed chrome.
- Grid rhythm: density peaks in the bento section mid-page, then relaxes into the FAQ and closing CTA so the page breathes again before the footer.
- Affordances are quiet: chevrons for accordions, diagonal arrows for external links, hairlines between rows; hover states lighten borders, nothing bounces.
- Small pill/chip links with 1px borders replace full buttons for secondary actions.

## Never
Do not reuse the Raycast logo, wordmark, product names, marketing copy, UI screenshots, illustrations or icon sets from the reference. Do not present the result as Raycast or its launcher; apply this visual language to the user's own product and content.