## 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/warp-dev/0d3838c7-307f-484a-8c23-3188eaa6f6f5-1789060388-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/warp-dev/0d3838c7-307f-484a-8c23-3188eaa6f6f5-1789060312-full.webp
- Component on Kage: https://kage.design/component/warp-hero

## Before you start
Ask me what my product is, who it is for, and what its brand personality and visual identity are. Then apply the principles below to create an original hero section for that product—not a copy of the reference.

## Build this section
Create a desktop-first SaaS product hero with a minimal, technical, infrastructure-inspired character. The section should feel precise, open, and engineered, while remaining readable and conversion-focused.

### Layout and alignment
- Use a full-width page with a slim top navigation bar and a hero content container aligned to the same left and right edges as the navigation.
- Keep the main hero copy in the left half of the viewport, with generous empty space around it. Use a max-width of roughly 1180–1200px and horizontal padding around 72–80px on desktop.
- Place a large headline near the upper third of the hero. Set it across three or four short lines, with deliberate line breaks rather than letting the browser wrap unpredictably.
- Visually contrast selected words or lines by using a monospace face against a clean sans-serif face. The contrast should communicate technical credibility, not appear decorative.
- Put a concise supporting paragraph below the headline, followed by two adjacent CTAs: one visually solid primary action and one quiet outlined or text-based secondary action.
- Add a small supporting incentive or proof line beneath the CTAs, with one highlighted value such as a price, percentage, or offer.
- Anchor a wide, framed product preview below the copy. It can be a terminal, dashboard, editor, workflow canvas, or other product-relevant surface. Let it extend close to the container edges so the hero transitions naturally into the product experience.
- On mobile, collapse the navigation, stack the CTAs, reduce headline size, preserve intentional line breaks where useful, and make the preview horizontally contained rather than forcing an overly wide crop.

### Typography
- Use a modern grotesk or neutral sans-serif for navigation, body copy, and the primary headline style.
- Use a crisp monospace font for technical words, labels, metadata, code-like content, and any contrasting headline segments.
- Headline: approximately 54–64px on desktop, 0.95–1.02 line-height, medium to semibold weight, with tight tracking around -0.04em. Keep the text block compact and dominant.
- Body copy: approximately 14–16px, line-height 1.5–1.65, in a muted dark gray.
- Navigation and small labels: approximately 11–13px, often monospace with modest letter spacing and lowercase styling if it fits the brand.
- Button labels should be concise, around 12–13px, medium weight, with enough horizontal padding to feel deliberate.

### Visual language
- Use a near-white background around #fcfcfd or #ffffff.
- Use near-black text around #15141c, with secondary text around #575661.
- Add a very pale lavender-gray surface to the product preview, around #f5f4fb or #f7f6fc.
- Use one restrained accent color for links, offer highlights, status indicators, or interactive states; a cool electric blue around #3f34a8 or a brand-appropriate equivalent works well.
- Keep the visual system mostly monochrome so the typography and product preview carry the focus.

### Grid and texture
- Add a subtle technical background made from large, low-contrast vertical and horizontal grid lines, approximately #e9e9ee at 1px with low visual intensity.
- Layer in a very faint regular dot pattern between grid intersections, approximately #e1e1e7, using small dots and generous spacing. The pattern should be barely visible behind the content.
- Ensure the texture is implemented as CSS gradients or another lightweight, responsive technique rather than a bitmap image.
- Keep the grid aligned consistently with the page container where possible, but do not let it reduce text contrast.

### Navigation
- Use a compact white header with a thin bottom divider and enough height for a calm, premium feel.
- Place a small abstract brand mark or neutral placeholder at the far left, followed by evenly spaced navigation links.
- Place utility links and a dark primary action on the right. The primary action can include a subtle chevron or directional cue.
- On smaller screens, replace the full navigation with a menu control while retaining the main conversion action if space allows.

### Product preview frame
- Frame the preview with a thin border around #d8d7df and a modest radius of 2–6px.
- Give it a narrow top chrome bar containing a small control or prompt area on the left, a centered monospace caption, and a compact status/control element on the right.
- Use small dividers and labels to make the preview feel like a real product surface, but keep its content generic and relevant to the user’s product.
- Add a small pill status indicator with a white or pale background, thin border, and a green dot around #4f8b65 when a live/active state is appropriate.
- Avoid making the preview a static illustration; it should suggest an actual interface with structure, controls, and state.

### Spacing and interaction
- Use a spacing rhythm based on 8px increments, with approximately 24–32px between headline, paragraph, and CTA group, and 40–56px before the preview.
- Buttons should have clear hover and focus states: slightly brighten or darken the fill, shift the border color, and show a visible focus ring.
- Links may underline or change accent color on hover, but avoid dramatic animation.
- Use restrained transitions around 150–220ms. Keep the background texture static or extremely subtle; do not animate it in a distracting way.
- Make all interactive elements keyboard accessible and ensure focus indicators meet contrast requirements.

### Content guidance
- Write a concise, high-level value proposition specific to the user’s product.
- Use a supporting sentence that explains the benefit or mechanism in plain language.
- Make the primary CTA action-oriented and the secondary CTA exploratory or product-oriented.
- Keep the headline structure and visual contrast, but create original wording, terminology, and line breaks for the product.

## Never
- Never reuse logos, brand marks, product names, taglines, or exact copy from the reference.
- Never copy the reference’s illustration, terminal mockup, interface content, labels, or imagery.
- Never use the reference product’s navigation wording, offer language, or CTA text.
- Never treat the grid, monospace typography, or framed preview as a reason to sacrifice accessibility or responsive behavior.
- Never add decorative imagery when a lightweight, product-relevant interface preview can communicate the product more clearly.