## 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/ramp-com/ad2900d9-6fba-4f32-a572-3ba7a6ce9831-1789060915-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ramp-com/ad2900d9-6fba-4f32-a572-3ba7a6ce9831-1789060875-full.webp
- Component on Kage: https://kage.design/component/ramp-hero-2

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

## Build a split editorial product hero
Create a spacious hero section for a modern software or technology website. The composition should feel premium, calm, and confident, with the message on the left and a large visual feature panel on the right.

### Layout and alignment
- Use a centered content container with a generous maximum width, approximately 1160–1280px, and responsive horizontal padding of 24–64px.
- On desktop, use a two-column grid: a narrower text column around 42% wide and a visual column around 58% wide. Align the top of the text block with the upper portion of the visual panel rather than vertically centering it exactly.
- Leave substantial whitespace above the hero content, as if it follows a preceding announcement or navigation region. The hero itself should feel deliberately uncrowded.
- Place the main heading and supporting link flush left. Keep the visual panel large enough to dominate the right half of the section.
- Collapse to one column below roughly 760px: place the text first, then the visual panel, with reduced but still generous spacing.

### Content structure
- Use a short, direct product introduction consisting of one emphasized opening phrase followed by a softer explanatory sentence or clause.
- Add one quiet secondary text link below the heading, optionally with a small right arrow. It should read as an invitation to learn more, not as a competing primary CTA.
- If the broader page needs a primary action, place it separately above or below this component rather than adding multiple buttons inside the text column.
- Generate copy relevant to the user’s product; do not reuse the reference wording.

### Typography hierarchy
- Use a clean grotesk or modern sans-serif with a slightly editorial feel.
- Set the hero heading at approximately 28–32px on desktop, with a line height around 1.08–1.18 and moderate negative tracking. On smaller screens use 25–29px.
- Give the opening phrase a near-black weight of 600–700, and use a medium gray for the explanatory continuation at 400–500 weight.
- Set the secondary link around 15–16px with a 1.4 line height and medium weight. Keep the arrow visually light and separated by 8–10px.
- Avoid all-caps labels, excessive bolding, and overly dramatic display type.

### Colour
- Use a warm, nearly white page background such as `#FCFCFA` or `#FFFFFF`.
- Use near-black text such as `#11110F` for the emphasized phrase.
- Use a muted graphite gray such as `#686866` for supporting copy and secondary link text.
- If an accent action exists elsewhere in the surrounding page, use a vivid chartreuse/lime near `#E8FF00` with black text, but keep it visually separate from this editorial block.
- Make the visual panel’s background product-specific; a warm neutral such as `#EAE4DA` works as a starting point, but adapt it to the user’s brand.

### Visual panel
- Build an original visual treatment that communicates the product’s value: for example, a branded abstract composition, a cropped product surface, a typographic mark, or a simplified conceptual diagram.
- Give the panel a large radius around 14–18px and hide overflow. It should be substantially taller than a typical card, approximately 450–560px on desktop, while remaining responsive.
- Keep the visual simple and spacious rather than filling it with a full dashboard. Use subtle tonal layering, soft gradients, or restrained shadows only when they support the product story.
- Ensure the visual has sufficient contrast and remains legible without depending on decorative imagery.

### Borders, radius, and spacing
- Prefer no visible border around the overall hero or text area.
- Use a very subtle border such as `1px solid rgba(17,17,15,0.06)` on the visual panel only if needed for separation.
- Use consistent spacing based on an 8px rhythm: approximately 24–32px between heading and secondary link, 48–80px between major hero elements, and 32–48px between grid columns depending on viewport.
- Keep the hero’s vertical padding generous, approximately 72–120px on desktop and 56–80px on mobile.

### Interaction and accessibility
- Make the secondary link fully clickable with a comfortable target area and a clear hover state: darken the text and shift the arrow slightly right by 2–4px.
- If the visual panel is interactive, provide a subtle scale or tonal transition only; avoid distracting motion.
- Respect `prefers-reduced-motion`.
- Use semantic heading and link elements, visible keyboard focus styles, meaningful alternative text for informative visuals, and an empty alt attribute for purely decorative visuals.

## Never
- Never use the reference company’s logo, product name, brand name, or exact copy.
- Never reproduce the reference artwork, wordmark, abstract graphic, or imagery.
- Never copy the exact layout proportions so literally that the result feels like a clone; adapt the composition to the user’s product and content.
- Never add unrelated illustrations, stock photography, or decorative imagery that does not explain the user’s product.
- Never create dense dashboard UI, excessive badges, multiple competing CTAs, or cramped spacing in this hero.