## 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/astro-build/2448cc02-1e48-497c-9333-8941f9d81557-1789073818-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/astro-build/2448cc02-1e48-497c-9333-8941f9d81557-1789073664165.webp
- Design on Kage: https://kage.design/designs/astro-build-landing-page

## Before you start
Ask the user what they are building, who it is for, and which brand assets they already have (product name, colours, typefaces, logos, imagery, and content). Wait for their answers before designing. Apply everything below to that product, not to the reference site.

## Page structure
1. **Global header** — Use a slim, transparent dark navigation bar over the hero, with a left-aligned brand mark, centered or evenly distributed links, dropdown indicators where needed, and a single utility icon on the right.
2. **Hero announcement** — Add a small pill announcing a release or timely update above the main headline; keep it centered and compact.
3. **Hero message and actions** — Place a large two-line, bold headline in the center, followed by a short muted explanation, a bright pill-shaped primary button, and a dark monospace command field with a copy affordance.
4. **Customer logo wall** — Immediately below the hero, show a centered caption and several rows of monochrome customer or ecosystem logos, allowing the final row to sit alone for a visually balanced arrangement.
5. **Product definition section** — Transition to a spacious dark section with a small accent-colour eyebrow, a large statement explaining the product, and three evenly spaced columns covering its core principles with circular outlined icons.
6. **Performance proof section** — Introduce a labelled performance claim and short explanatory copy, then show a large bordered comparison panel with horizontal bars, one vivid gradient-highlighted winner, muted competitors, percentages, and a small data-source note.
7. **Flexibility section** — Present another eyebrow, heading, paragraph, and subdued pill action, followed by a row of circular framework selectors and labels; below, place a wide split preview with a dark code editor on the left and a product/browser mockup on the right.
8. **Feature overview** — Use a section label and heading followed by a dense, multi-column bento grid of bordered feature cards. Mix card sizes and visual treatments: document illustrations, oversized numerals, blurred image blocks, framework marks, routing trees, deployment marks, grid diagrams, and plain text cards.
9. **Theme gallery** — Add an ecosystem eyebrow, heading, and description, then a horizontal category tab row with one white active pill and dark inactive pills. Display a gallery of rounded website thumbnail cards in a multi-column grid with a dark browse-more overlay/card at the edge.
10. **Partner agency section** — Use a compact text block with eyebrow, heading, description, and subdued CTA, followed by a horizontal row of four colourful partner/logo cards.
11. **Large final CTA** — Place a wide rounded rectangle with a soft teal-to-blue atmospheric gradient and subtle texture; center a short two-line heading, primary button, and command field inside it.
12. **Sponsor acknowledgement** — Add a centered statement above a large bordered sponsor matrix. Use a few large spanning cells followed by smaller tiled cells, with restrained dividers and varied sponsor marks.
13. **Footer navigation and newsletter** — Finish with a separated footer containing a newsletter heading, description, email field, and subscribe button on the left, and multiple link columns for resources, company/about, community, and legal.
14. **Footer utility row** — Add a thin top border, license/copyright text on the left, and a horizontal group of monochrome social icons on the right.

## Design language
- Build hierarchy with a very large, heavy sans-serif hero and section headings, medium-weight card headings, and small muted body copy. Use approximate sizing of 64–80px for the desktop hero, 34–48px for major section headings, 16–18px for card headings, and 13–15px for supporting text.
- Use a nearly black navy background around `#050712` to `#080b18`, with slightly lighter card surfaces around `#0c101f`. Keep the overall page dark and let content sections breathe with generous vertical spacing.
- Treat colour as an accent system rather than a full palette: use deep indigo and purple gradients around `#21136f`, `#5b16b8`, and `#351c8d`; use cyan/teal highlights around `#39d9df`; reserve magenta/pink around `#e34b9d` for eyebrows and selected accents; use white text near `#f5f5f7` and muted lavender-gray around `#a7a9bf`.
- Concentrate gradients behind the hero, performance panel, and final CTA rather than applying them to every component. Keep most cards monochrome so the few colourful charts, icons, and previews carry emphasis.
- Pair a clean geometric sans-serif with a monospace face for terminal commands and code. Use tight line-height and controlled letter spacing on headlines, while keeping body copy relaxed and readable.
- Use 1px low-contrast borders around cards and panels, approximately `rgba(180,190,220,0.14)`. Prefer 10–16px corner radii for large panels and cards, with pill radii only for buttons, tags, tabs, and command controls.
- Avoid heavy shadows. Create depth with surface contrast, thin borders, ambient radial gradients, and occasional blurred colour behind a panel.
- Let rhythm change down the page: make the hero sparse and centered, use spacious editorial sections for the product story, become denser in the comparison and feature-grid areas, then return to image-led ecosystem galleries and a structured footer.
- For charts and diagrams, use crisp horizontal bars, restrained labels, and one clear highlighted result. For bento cards, vary dimensions while preserving a coherent grid and consistent internal padding.
- Keep controls understated: bright white primary actions, dark translucent secondary pills, compact copy buttons, and a single clearly active white tab. Add short hover transitions for buttons, tabs, cards, and logo tiles—slight colour lift or translation only, without distracting animation.
- Make the layout responsive by collapsing multi-column cards and sponsor cells into fewer columns, preserving the order of the narrative and keeping the hero command control usable on narrow screens.

## Never
- Do not use the reference product’s Astro logo, wordmark, product name, exact copy, customer logos, sponsor logos, framework marks, screenshots, illustrations, or icon set.
- Do not reproduce Astro’s branding, release text, command, feature names, or exact claims.
- Replace every brand-specific asset with the user’s own assets or neutral placeholders, and never present the result as Astro or as an imitation of its website.