## 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/deno-com/32c2f827-c733-4746-82ec-fc83a363518f-1789073825-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/deno-com/32c2f827-c733-4746-82ec-fc83a363518f-1789073665790.webp
- Design on Kage: https://kage.design/designs/deno-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have, including the product name, colours, typography, logos, and any imagery. Wait for their answers before designing. Apply the reference's layout principles to their product rather than reproducing Deno or its content.

## Page structure
1. **Announcement bar** — Place a thin mint-green strip above the site chrome with a short announcement, a compact action button, and a subtle dismiss control.
2. **Global navigation** — Use a white, shallow header with a monochrome brand mark area, horizontally spaced product/documentation/community links, and a right-aligned search field with a keyboard shortcut hint.
3. **Dark hero** — Open with a near-black, softly textured or blurred technical background. Use a two-column layout: left for a small version/status badge, oversized two-line headline, supporting copy, and two pill actions; right for a dim stack of technical terms with one or two mint-highlighted active items.
4. **Installation block** — Transition to white and center a large installation heading with a mint version chip, a small note link, a terminal command card, and a second “agent” command card. Add a small line-art decorative character or product-neutral flourish near the edge.
5. **Core promise section** — Introduce the main capabilities with a centered heading and concise explanation, then use alternating two-column feature rows. Pair floating white code/file panels with bold text, short descriptions, and mint pill links.
6. **Compatibility feature** — Include a row explaining migration or compatibility with an adjacent compact checklist/card showing supported files, modules, or conventions.
7. **Built-in tools section** — Use a very pale blue/gray band with a centered heading and intro. Follow with a wide dark terminal panel, then alternating feature rows for package management and the standard library, mixing code windows, comparison cards, and mint CTAs.
8. **Modern-platform feature** — Return to white with a left text column about advanced platform capabilities and a right code or API visualization card with selected tokens highlighted in multiple bright colours.
9. **Security section** — Switch decisively to a near-black band. Center the heading and explanation, place a large permission-denial terminal example, then show three equal dark cards for the security layers. Finish with small state chips and a centered mint documentation button.
10. **Performance introduction** — Move to a pale blue/gray background with a large centered heading and short explanatory paragraph, leaving generous vertical breathing room.
11. **Benchmark grid** — Add a centered subheading followed by a 3×3 grid of white comparison cards. Each card has a small benchmark title, metric labels, and horizontal bars using mint, charcoal, and gray to compare alternatives; add a tiny methods note below.
12. **Observability statement** — Use a spacious white section with a large centered statement and a short line about inspection, telemetry, profiling, or debugging. Keep the visual treatment intentionally sparse.
13. **Deployment section** — Center a headline and supporting copy, show a horizontal row of cloud/platform marks or neutral integration tokens, and add a short supporting line below.
14. **Hosting product panel** — Place a large pale gray bordered promotional panel with a centered heading, a media/video preview and descriptive copy in two columns, a broad row of ecosystem marks, and stacked primary/secondary actions near the bottom.
15. **Desktop feature** — Return to white and create an asymmetrical two-column row: left has a small mint “preview” label, large headline, paragraph, and CTA; right has a dark terminal window connected to a subtle mint line diagram.
16. **Developer proof** — Center a “loved by users” style heading with two compact statistic cards and a small trust caption. Keep this section light and sparse, with a decorative line-art element near the outer margin.
17. **Final conversion block** — Use a two-column closing CTA with a bold two-line headline and installation-oriented copy on the left, and a rounded illustrated or product-relevant media panel on the right. Add a mint action button.
18. **Footer** — End with a dense near-black footer containing the brand area, several compact link columns, social icons, copyright/legal text, and a small operational-status pill.

## Design language
- Build hierarchy with oversized bold sans-serif section headings, short paragraphs, small uppercase or monospace technical labels, and strong whitespace around major statements.
- Change rhythm deliberately: dense navigation and technical cards near the top, alternating proof-heavy feature rows in the middle, an especially dense security/benchmark treatment, then spacious deployment, social-proof, and conversion sections.
- Use a mostly monochrome base: white `#ffffff`, near-black `#0d0f12`, charcoal panels around `#181b20`, cool pale blue section fills around `#eef7ff`, and mint accents around `#5cffb0` or `#63f5b2`.
- Reserve mint for actions, status badges, selected code tokens, active bars, and small highlights rather than large decorative surfaces. Use occasional cyan, yellow, pink, or purple token highlights only inside technical visualizations.
- Pair a geometric, highly legible sans-serif for headlines and UI with a compact monospace face for terminals, code, benchmark labels, and technical metadata. Scale hero and major section headings aggressively, while keeping body copy narrow and restrained.
- Treat code windows, comparison cards, and integration panels as visual evidence: use thin light borders, subtle shadows on white cards, dark inset surfaces for terminals, and compact browser/terminal chrome.
- Keep most cards lightly rounded, approximately `8–12px`; use pill radii for buttons and badges. Avoid heavy gradients, but allow very subtle blurred green/blue technical texture in the dark hero.
- Keep shadows soft and low contrast, especially under floating code panels and benchmark cards. Use borders more prominently in dark sections and large promotional panels.
- Make buttons compact pill-shaped controls with a mint fill, dark text, and a small directional glyph; use dark translucent pills for secondary hero actions.
- Use alternating image/text alignment to prevent long page monotony. Let technical artifacts overlap or float slightly above their section grid, while headings and prose remain aligned to a consistent content width.
- Where interaction is visible, make search, navigation menus, tabs, copy-to-clipboard controls, and documentation links feel immediate and understated. Use subtle hover brightening and short transitions rather than decorative motion.

## Never
- Do not use Deno's logo, wordmark, product name, exact copy, mascot, screenshots, ecosystem marks, illustrations, icon set, or distinctive terminal content.
- Do not present the result as Deno or imply affiliation with it.
- Replace all reference-specific technology, benchmarks, brands, and imagery with the user's own product, audience, content, and brand assets.