## 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/railway-com/2043945d-689d-427f-b51d-92aa383b8c92-1789060662-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/railway-com/2043945d-689d-427f-b51d-92aa383b8c92-1789060635-full.webp
- Component on Kage: https://kage.design/component/railway-hero

## Before you start
Ask the user what their product is, who it is for, and what their brand identity should feel like. Then apply the principles below to create an original hero section tailored to that product and brand—not a replica of the reference.

## Build this component
Create a full-width SaaS/product landing-page hero with a dark, cinematic mood. The section should communicate a clear promise above the fold and make the product interface preview feel like the central proof of that promise.

### Layout and alignment
- Use a deep, full-bleed hero background with a centered content column.
- Add a compact top navigation inside the hero: brand area on the left, a small set of navigation links in the middle or right, and one or two account/action links at the far right. On smaller screens, collapse this into a simple menu control.
- Keep the main hero copy centered horizontally and vertically in the upper portion of the section.
- Use a short, high-confidence headline on one or two lines, followed by a concise supporting sentence.
- Place two adjacent CTAs beneath the supporting text: one filled primary action and one dark/outlined secondary action.
- Anchor a large product UI mockup beneath the CTAs. Let it extend beyond the normal content width, with generous side margins on desktop and a contained, scrollable or cropped presentation on mobile.
- Give the preview a slight floating, layered quality using a subtle shadow and a clearly defined top bar. It should feel like a real product surface, not a flat screenshot.
- The hero can be tall, approximately 780–1000px on desktop, with the preview occupying the lower half. Preserve the visual hierarchy: headline first, interface second.

### Typography
- Use a refined sans-serif or editorial serif for the main headline, depending on the user’s brand. The headline should be bold, high contrast, and approximately 52–72px on desktop with tight line height around 0.95–1.05.
- Use a neutral sans-serif for navigation, supporting copy, labels, and interface chrome.
- Supporting text should be 18–21px on desktop, with a relaxed line height and a muted cool-gray colour.
- Navigation and UI labels should be compact, approximately 13–15px, with medium weight.
- On mobile, reduce the headline to roughly 38–48px and keep the copy readable without forcing overly long lines.

### Colour and atmosphere
- Use a near-black/navy base, approximately `#0D0D15` or `#10131D`.
- Use a slightly lighter blue-black for the atmospheric background, approximately `#172331`.
- Render primary text in warm white, approximately `#F4F1EC`; secondary text in cool gray, approximately `#B7BAC5`.
- Use a saturated violet or indigo accent for the primary CTA and small product highlights, approximately `#7544C6`, `#8B4DDF`, or an appropriate brand equivalent.
- Add depth through a very subtle star field, grain, gradient haze, abstract topographic forms, or another brand-appropriate texture. Keep it low contrast so it never competes with the content.
- If using a background illustration, treat it as atmospheric framing around the preview rather than a focal image.

### Borders, surfaces, and radius
- Use thin, low-contrast borders in approximately `rgba(255,255,255,0.14)` around the preview, nav, and outlined CTA.
- Give the large product preview a 7–12px radius, with a darker surface around `#090A10` and a slightly lighter header bar around `#111118`.
- Use 6–10px radius for buttons and small controls; avoid overly rounded pill styling unless it fits the user’s brand.
- Add a restrained shadow beneath the preview, such as `0 24px 80px rgba(0,0,0,0.42)`, plus a faint coloured glow if appropriate.

### Product preview details
- Build a believable, simplified product interface with a narrow top bar, a spacious central workspace, and a compact bottom or floating toolbar.
- Include only abstract or user-specific placeholder content: generic navigation labels, neutral cards, charts, nodes, panels, or controls that communicate the product category.
- Use subtle grid, dot, or texture details in the workspace at very low opacity.
- Make one small accent element—such as an active tab, status dot, selected tool, or primary control—use the hero accent colour.
- Keep the preview legible at a glance, but do not overcrowd it with detailed data.

### Interaction and responsive behaviour
- Primary and secondary buttons should have clear hover, focus, and pressed states. Brighten or deepen the accent on hover and add a visible focus ring for keyboard users.
- Navigation links may reveal a small chevron or dropdown indicator and should have a subtle colour transition on hover.
- If the product preview is interactive, allow lightweight hover states on its toolbar or panels; otherwise use a gentle entrance animation.
- Animate the hero conservatively: fade and translate the copy upward, then reveal the preview with a short ease-out motion. Respect `prefers-reduced-motion`.
- On mobile, stack the CTAs if necessary, reduce navigation density, keep the preview at a readable minimum width, and crop or horizontally scroll it without causing the whole page to overflow.
- Ensure sufficient contrast and provide semantic headings, labelled controls, and a logical keyboard order.

## Never
- Never use the reference’s logo, product name, navigation labels, headline, CTA copy, or interface text.
- Never copy the reference’s exact background artwork, cloudscape, star field, layout proportions, or product mockup.
- Never include recognizable illustrations, screenshots, icons, or imagery from the reference.
- Never reproduce the reference brand’s exact typography, colour values, spacing, or visual treatment; adapt the principles to the user’s product and brand.
- Never let decorative atmosphere overpower the headline, actions, or product preview.