## 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-1789060800-6.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-gallery

## 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 version for that product—not a copy of the reference.

## Build this section
Create a full-width marketing section that transitions from a customer-proof story rail into a high-intent signup or contact CTA. The section should feel polished, spacious, editorial, and conversion-focused.

### Layout and alignment
- Use two vertically stacked zones with distinct visual treatments.
- Top zone: a very pale blue-white background, approximately `#F1FBFD`, with a horizontally arranged row of story cards or links.
- Make the story rail intentionally wider than the viewport so the final item is visibly clipped at the right edge on desktop. This communicates that more stories are available and gives the section a carousel-like feel.
- Align the rail to a large desktop container, but allow the content to extend beyond the right boundary. Use a grid with 3–4 columns, generous horizontal gaps, and no enclosing card borders.
- Each story item should contain a short headline followed by a compact “read more” action with a circular arrow icon.
- Top padding should be approximately `24–32px`; reserve substantial vertical whitespace beneath the story links, around `280–360px` on desktop, so the zone feels airy rather than dense.
- Bottom zone: use a large, full-bleed abstract gradient field, approximately `520–700px` tall on desktop. Place content in a two-column layout: a bold statement on the left and a signup form card on the right.
- Position the form card so it overlaps or rises into the gradient area slightly. Keep it broad enough for a two-column field layout and anchor it to the same main content grid.
- On smaller screens, convert both zones to a vertical flow: allow the story rail to scroll horizontally or snap between items, reduce the empty top-zone height, and stack the CTA copy above the form.

### Typography hierarchy
- Use a modern humanist or geometric sans-serif with a calm, premium feel.
- Story headlines: approximately `28–32px`, weight `500–600`, line-height `1.08–1.15`, with a maximum width that encourages two or three lines.
- Story action: approximately `17–19px`, medium weight, with strong contrast against the pale background.
- CTA statement: oversized display text around `64–76px` on desktop, weight `500–600`, tight line-height around `0.95–1.02`; use a smaller responsive size on mobile.
- Form heading: approximately `28–32px`, medium or semibold, with a compact line-height.
- Keep letter spacing mostly neutral; prioritize large type, short line lengths, and clear hierarchy.

### Colour and gradient
- Use an almost-white cool background for the story rail, such as `#F2FBFD` or `#F5FCFD`.
- Use deep blue-black text, approximately `#062B42` or `#082B41`.
- Make the lower CTA background a layered, saturated gradient: deep navy/blue at the left (`#07528A`), electric cyan/blue through the middle (`#168ED0`), and vivid aqua or mint at the right (`#31E3C3`).
- Add a subtle magenta, violet, or cyan glow around the form card and along the transition edge. Keep it atmospheric rather than decorative.
- The CTA statement may use a bright lime or neon green accent, approximately `#76F05C`, but choose an equivalent high-contrast brand accent if the user's palette requires it.
- Ensure text and controls meet accessibility contrast requirements.

### Surface, borders, and radius
- Keep the top story links open and borderless.
- Use a white or near-white form surface, approximately `#FFFFFF` or `#FDFEFE`.
- Give the form card a large radius around `28–36px` and a soft, coloured outer glow or shadow rather than a conventional dark shadow.
- Use thin dark blue-gray field borders, approximately `#153D4D`, around `1px`; field radius around `8–10px`.
- Keep the form interior spacious, with roughly `40–56px` padding on desktop.

### Interaction and behaviour
- Make each story item a clear link. On hover, slightly shift or brighten the circular arrow and underline or subtly change the headline colour.
- The circular arrow control should be outlined, approximately `22–24px`, with a right-pointing arrow centered inside.
- If implementing a carousel, support drag/swipe, keyboard navigation, focus states, and optional previous/next controls; do not rely on clipping alone to communicate hidden content.
- Form fields should have visible hover, focus, error, and disabled states. Use a clear 2px focus ring in the brand accent or accessible blue.
- Preserve the generous whitespace and visual calm during transitions; use short, smooth motion around `180–260ms`.
- Respect reduced-motion preferences.

### Responsive details
- At tablet widths, reduce the story columns and CTA display size while maintaining the strong horizontal rhythm.
- At mobile widths, use 20–24px side padding, one story card per viewport, a shorter pale-blue zone, and a form card with 24–28px internal padding.
- Avoid making the form excessively tall or cramped; fields can stack when two columns no longer provide comfortable touch targets.

## Never
- Never reuse logos, product names, brand names, customer names, or exact copy from the reference.
- Never reproduce the reference's exact layout proportions, headlines, form content, or visual assets.
- Never use illustrations, photography, or imagery from the reference; create the effect with layout, typography, colour, gradients, and UI surfaces only.
- Never hide important story content behind clipping without providing an accessible scroll, carousel, or alternative navigation pattern.
- Never sacrifice readable contrast or keyboard accessibility for visual similarity.