## 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/warp-dev/0d3838c7-307f-484a-8c23-3188eaa6f6f5-1789060312-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/warp-dev/0d3838c7-307f-484a-8c23-3188eaa6f6f5-1789059994711.webp
- Design on Kage: https://kage.design/designs/warp-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have, including product name, colours, typography, logo, imagery, and UI screenshots. Wait for their answers before designing. Apply the system below to their product, not to the reference product.

## Page structure
1. **Utility navigation** — A slim white header spans the page, with a compact brand mark at left, small lowercase/monospace navigation links through the center-left, and lightweight utility links plus a dark primary button at right.
2. **Hero** — Place a large left-aligned headline over a faint full-width vertical-column grid. Add a short technical subheading, two contrasting CTAs, and a small incentive/supporting line; leave the right side airy rather than filling it with artwork.
3. **Hero terminal panel** — Directly below the hero copy, show a wide pale-lavender terminal/workspace frame with a thin browser-like chrome bar, tiny status labels, and restrained activity metrics. Keep it more like a product instrument than a decorative illustration.
4. **Trusted-by strip** — Add a shallow ruled band containing a small trust label and a single horizontal row of monochrome customer logos.
5. **SDLC feature overview** — Introduce the next product section with a small purple section marker, a large technical heading, and a one-line explanation. Below, use a two-column layout: numbered feature rows on the left and a large pale terminal/product walkthrough panel on the right.
6. **Measurement and self-improvement** — Repeat the section marker and heading pattern, then show one wide framed analytics panel divided into three equal columns. Each column contains a compact title, badge/value, thin purple line chart, axes, and small tabular results.
7. **Case-study band** — Break the white rhythm with a full-width electric blue-violet section using a subtle dotted texture. Put the case-study label, large white result headline, explanatory copy, and white CTA on the left; place a large light media/result card on the right.
8. **Enterprise-ready section** — Return to the white grid background. Add a heading and purple supporting copy, then present two equal case-study cards with large photographic/video thumbnails, overlaid customer marks, short descriptions, and text links.
9. **Open-at-every-layer diagram** — Use a section label and heading followed by a wide pale terminal frame. Inside it, stack four horizontal layers with progressively stronger lavender-to-blue fills, each pairing a layer number, bold statement, small pills, and a concise explanation.
10. **Governance/control section** — Add another heading and subtitle, then a large pale framed control-plane composition. Use a split upper area with a cost-over-time chart on the left and a dense agent/task list on the right; use the lower area for explanatory text and a bordered browser/contact-demo inset.
11. **Use-everywhere product grid** — Introduce a heading and purple description, then show three equal product cards in a ruled grid. Each has a pale media area with a product screenshot, a title, short description, and dark full-width action/control treatment; vary the third card with a terminal command field.
12. **FAQ** — Add a simple heading above a full-width accordion table. Each question occupies a shallow ruled row with a leading prompt marker and a right-aligned plus indicator; preserve the dense, text-first treatment.
13. **Footer** — Finish with a ruled footer grid: brand mark and short descriptor in the first column, then several narrow link columns grouped by product, resources, company, legal, and connect. Add a small copyright line along the bottom.

## Design language
- Build hierarchy through scale and spacing rather than decoration: use a large typewriter-like display heading for section intros, compact monospace body copy, small numbered/labelled eyebrows, and short line lengths.
- Treat the page as a technical poster on a persistent grid: use a white base with very faint vertical and horizontal rules around `#e8e8ec`, a centered content width, and aligned section edges.
- Keep the rhythm deliberate: spacious hero and section headers alternate with dense framed dashboards, lists, tables, and diagrams; reserve full-bleed colour for one major case-study interruption.
- Use colour sparingly. Default to near-black `#17151d`, white `#ffffff`, cool pale lavender panels around `#f6f5ff`, muted gray `#777681`, and electric blue-violet accents around `#3425ff` to `#4b2cff`. Use purple for labels, chart strokes, selected rows, and key links rather than broad gradients.
- Pair a geometric/typewriter-flavoured monospace display face with a highly legible compact monospace or neutral sans for supporting text. Use tight tracking, modest line height, sentence-case headings, and noticeably smaller utility labels.
- Frame product demonstrations as instrument panels: thin gray borders, one-pixel dividers, browser/terminal chrome, tiny status badges, charts, tables, and pills. Prefer square or minimally rounded corners; avoid soft cards, heavy shadows, and excessive elevation.
- Use dark filled rectangular buttons for primary actions and white bordered buttons for secondary actions. Keep controls compact, with small bold labels and clear contrast.
- Make charts and diagrams precise and quiet: thin strokes, small axis labels, restrained fills, and structured columns. Let content density communicate capability.
- Where motion is added, use subtle terminal cursor/status changes, chart-line drawing, or accordion expansion; avoid bouncy transitions. Keep hover states limited to border/colour changes and preserve the grid.
- Make the responsive version collapse multi-column panels into a readable vertical sequence while retaining section labels, framed technical modules, and the strong white-to-blue-purple rhythm.

## Never
- Do not copy Warp's logo, wordmark, product name, tagline, customer logos, case-study names, exact copy, screenshots, illustrations, photography, or icon set.
- Do not present the result as Warp or imply affiliation with it.
- Do not reproduce the reference content verbatim; create new product-specific language, data, imagery, and interface examples for the user's product.