## 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/plaid-com/7f22fbce-e808-4b19-99a1-7dcb31fbfb56-1789060798-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/plaid-com/7f22fbce-e808-4b19-99a1-7dcb31fbfb56-1789060772-full.webp
- Component on Kage: https://kage.design/component/plaid-hero

## Before you start

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

## Build an expressive product hero

Create a full-width, above-the-fold hero for a modern technology or financial product. The composition should feel confident, editorial, energetic, and trustworthy, with a strong message on the left and an abstract, product-relevant visual treatment on the right.

### Layout and alignment

- Use a tall hero section, approximately `min-height: 760px` on desktop, with content aligned to a centered max-width container of roughly `1180–1240px`.
- On desktop, reserve approximately 52–58% of the width for the text column and let the visual treatment occupy the remaining space, extending toward or beyond the right edge.
- Align the text column to the left with a consistent outer gutter of approximately `7vw`, capped by the container width.
- Vertically position the main content around the middle-to-lower half of the hero, leaving generous breathing room above the headline.
- Place a small proof or customer-trust row below the CTAs. It should be visually subordinate and may use neutral wordmark-like text placeholders or abstract marks generated for the user's product.
- Optionally add a compact floating announcement or content card near the lower edge of the hero. It should feel attached to the section, not like a separate modal.
- On tablet and mobile, stack the layout: keep the headline and CTAs first, then move the visual treatment below or behind the content. Maintain readable contrast and avoid letting decorative elements obscure the message.

### Typography hierarchy

- Use a contemporary sans-serif with a distinctive but highly legible character. Prefer a broad, clean display face for the headline and a neutral sans-serif for supporting text if the brand system permits.
- Make the headline very large and compact: approximately `clamp(3.5rem, 6vw, 6.5rem)` with a line-height around `0.95–1.05` and slightly tight tracking.
- Break the headline into intentional lines rather than relying on arbitrary wrapping. Emphasize one or two phrases with a brand accent colour, gradient, or alternate weight.
- Keep supporting copy to roughly 1–2 short lines at desktop width, using `18–21px` text with a line-height around `1.35–1.5`.
- Use clear button labels and a minimum text size of `16px`; avoid overly small uppercase labels in the primary conversion area.

### Colour and visual atmosphere

- Build a saturated blue-to-cyan background gradient, approximately transitioning from deep navy blue `#07558B` or `#075C91` through vivid cyan `#12BDE0` toward `#1CB9D7`.
- Use near-white `#F4FAF8` for high-contrast copy and a fresh green accent around `#54E889` for selected headline words or highlights.
- Introduce a secondary electric purple or magenta accent around `#D96BEE` sparingly in the visual field or decorative elements.
- Add subtle tonal overlays, grain, halftone dots, contour lines, or fine wavy linework to make the background feel tactile. These textures should remain low contrast behind the text.
- The hero visual should be abstract or generated from the user's own domain: for example, a large line-art form, oversized object, data pattern, or editorial symbol. It should have strong scale and partial cropping, but must not overpower the headline.

### Buttons and interaction

- Use two adjacent CTAs on desktop with approximately `16–20px` gap. Stack them on mobile if necessary.
- Make the primary CTA a pale mint or off-white pill with dark text, such as background `#D7F8E7` and text `#063B47`.
- Make the secondary CTA a dark translucent or near-black pill, such as `#111B22`, with a thin bright accent border or subtle gradient edge.
- Use generous horizontal padding around `22–28px`, vertical padding around `13–16px`, fully rounded corners, and a clear hover state.
- On hover, slightly lift or brighten buttons and transition the border, shadow, or background over `180–240ms`. Preserve visible keyboard focus rings.
- If the floating card includes a link, use a simple arrow or chevron and make the entire card or its link target clearly interactive.

### Borders, radius, and spacing

- Use pill-shaped controls with a radius of `999px`.
- Give any floating announcement card a medium-large radius of approximately `22–28px`, a subtle border such as `rgba(255,255,255,.28)`, and a soft shadow.
- Keep the main content rhythm generous: approximately `28–40px` between headline and supporting copy, `32–44px` between copy and CTAs, and `38–56px` before the trust row.
- Avoid heavy panel borders in the main hero; let the gradient, texture, and typography define the visual structure.

### Responsive and accessibility requirements

- Ensure the headline remains readable over the background at every breakpoint using overlays or controlled placement of decorative visuals.
- Respect reduced-motion preferences. Any animated texture, floating object, or gradient movement should be subtle and optional.
- Provide semantic heading structure, descriptive labels, strong colour contrast, visible focus states, and touch targets of at least `44px`.
- Keep decorative visuals aria-hidden and ensure the hero remains fully understandable without them.

## Never

- Never copy the reference's logos, customer names, product names, exact headline, supporting copy, announcement copy, or button labels.
- Never reuse the reference's portrait, currency figure, phone, illustrations, imagery, or distinctive decorative artwork.
- Never reproduce the exact composition or visual asset; create a new domain-specific visual treatment for the user's product.
- Never use placeholder logos or trademarked marks from the reference.
- Never sacrifice readability, accessibility, or responsive behaviour to imitate the reference.