## 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/stripe-com/f883ce83-9776-477f-9170-0bb4400c0ec7-1789067512-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/stripe-com/f883ce83-9776-477f-9170-0bb4400c0ec7-1789060217-full.webp
- Component on Kage: https://kage.design/component/stripe-banner

## Before you start
Ask what the user's product is, who it serves, and what its brand guidelines are. Then apply the principles below to create an original version for that product—not a copy of the reference.

## Build a cinematic editorial banner
Create a wide promotional banner for a major announcement, event, case study, or featured story. The component should feel premium and immersive, using a strong visual moment as the background while keeping the message and action immediately readable.

### Layout and alignment
- Use a wide landscape aspect ratio, approximately 3:1 on desktop, with a minimum height of 360px and a responsive aspect ratio on smaller screens.
- Place the banner inside a centered page container with generous outer whitespace. Use a subtle 1px neutral border around the section if it fits the product's system.
- Apply a medium corner radius, approximately 6–10px, and clip all background media to the same radius.
- Use a full-bleed background image or video frame with a clear focal subject positioned toward the right or center-right.
- Add a layered dark gradient from the left edge toward the middle: near-black with roughly 75–90% opacity on the left, fading to transparent or lightly tinted colour by the center. Keep the visual subject visible rather than covering the entire image.
- Align the content to the left with an inset of roughly 24px on mobile and 48–56px on desktop. Vertically center the content, or place it slightly above center when the lower edge contains a footer label.
- Keep the text block constrained to roughly 420–520px so the headline does not compete with the image.
- If the story needs attribution or a section label, place it as a small high-contrast mark in the lower-right or lower-left corner, separate from the primary content.

### Typography hierarchy
- Use a contemporary sans-serif with clean, geometric forms and strong rendering at large sizes.
- Set the headline in a large, regular or medium weight, approximately 42–56px on desktop with a line-height around 0.98–1.08. Use 30–38px on mobile.
- Break the headline into two or three intentional lines based on the available text width; do not force awkward single-word lines.
- Use white or near-white text, approximately `#FFFFFF` or `#F7F7F8`.
- Keep supporting copy optional and short. If present, use 16–18px with a line-height around 1.4 and slightly reduced opacity.
- Make the CTA label concise, action-oriented, and visually stronger than supporting copy.

### CTA and interaction
- Use one primary CTA, such as a filled light button against the dark image. Use an off-white background around `#F7F7F5` and dark purple, navy, or charcoal text around `#3A2A87` or `#171321`.
- Size the button for comfortable tapping: approximately 44–50px tall with 20–26px horizontal padding. Use a 4–6px radius unless the product uses pill controls.
- Include a small directional arrow or equivalent affordance only if it matches the user's product language.
- On hover, slightly brighten or lift the button and transition over 150–200ms. Do not introduce distracting motion.
- If the background is a video, support play/pause controls, reduced-motion preferences, and a poster-image fallback. Ensure text remains readable on every frame.
- On mobile, stack content naturally, reduce the headline size, and preserve the focal subject by using `background-position` or an equivalent responsive art direction strategy.

### Colour, borders, and depth
- Treat the image as the primary colour source, but choose an image with a dark region behind the copy.
- Support saturated accent colours—violet, electric blue, magenta, or warm orange—while keeping the text area calm and dark.
- Use a restrained border such as `#E6E6E6` on a light page background around `#FFFFFF`.
- Avoid extra cards, shadows, or decorative surfaces; the image, gradient, and typography should provide the hierarchy.

### Content behavior and accessibility
- Use semantic heading and link/button elements.
- Add a meaningful alternative description for non-decorative imagery, or mark purely decorative media appropriately.
- Maintain WCAG-compliant contrast between foreground content and the gradient-backed image.
- Make the entire interactive affordance obvious without requiring the user to discover a hover state.

## Never
- Never reuse logos, product names, brand marks, or branded labels from the reference.
- Never reuse the reference's headline, CTA copy, event name, or other wording.
- Never copy the reference image, stage scene, presenter, audience, video frame, or any other imagery.
- Never reproduce the exact composition, artwork, colour treatment, or pixel dimensions; use the rules to create a distinct banner for the user's product.
- Never add decorative illustrations or stock imagery unless they serve the user's product and brand.