## 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-1789060799-3.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-cta

## Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, typography, and call to action they want. Then apply the principles below to create an original CTA banner for that product—not a copy of the reference.

## Component goal
Build a prominent promotional CTA section for a modern technology or financial product. It should feel confident, intelligent, and editorial: one concise value proposition, one clear action, and a rich visual field that suggests sophisticated infrastructure without competing with the message.

## Design language

### Layout and alignment
- Use a wide, self-contained banner inside the page content rather than a full-bleed viewport hero.
- Set the section width to roughly 86–92% of the available desktop container, with a maximum width around 1100–1200px. Center it horizontally.
- Use a fixed-feeling aspect ratio near 1.65:1 on desktop, with generous internal padding of about 72px on the left and 64–80px vertically.
- Align all copy to the left and vertically center the content block. Keep the text column around 52–60% of the banner width so the visual area can occupy the right side.
- Let the visual treatment extend to the right and bottom edges, while preserving a clear text-safe region on the left.
- On smaller screens, stack the composition naturally: retain the visual as a background layer, reduce its opacity or crop it to protect legibility, and keep the copy aligned left. Use approximately 32px horizontal padding and a minimum height around 480px.

### Typography hierarchy
- Use a clean contemporary sans-serif with an editorial feel; use the product’s own font if available, otherwise choose a modern grotesk.
- The headline should be the dominant element: approximately 58–68px on desktop, 1.02–1.08 line-height, medium-to-semibold weight, and slightly tight tracking around -0.03em.
- Limit the headline to three or four short lines and a readable measure of roughly 12–16 words per line. Adapt the wording to the user’s product rather than reproducing reference copy.
- Use a compact, high-contrast pill button beneath the headline with 16–18px text and medium weight.
- Do not add unnecessary eyebrow text, body copy, or secondary links unless the user’s product requires them.

### Colour and visual atmosphere
- Start with a deep ink/navy background close to #063252 or #062F4F.
- Add a subtle cool-blue glow or gradient toward the lower-right corner, using saturated cyan values near #00C8F5 and electric blue near #0878D1. Keep the transition atmospheric rather than obvious.
- Use warm white typography near #F7F8F4.
- The surrounding page background should be a very pale cool grey-blue, approximately #F3F8FA, so the dark banner feels inset and intentional.
- For technical linework, use low-opacity cyan and blue strokes, generally between 15% and 45% opacity. Maintain enough contrast to imply depth without making the artwork look like UI data.

### Artwork and composition
- Create an original, abstract technical visual on the right: for example, a contour-based portrait-like form, a faceted object, a network sphere, flowing circuit lines, or another product-relevant motif.
- Treat the artwork as a secondary layer behind the copy. It may overlap the right half and fade into the bottom edge, but it must never reduce headline contrast.
- Prefer CSS gradients, SVG linework, generated shapes, or user-supplied brand assets. Avoid generic stock photography.
- Add one or two low-contrast network, contour, or scan-line textures to give the background a crafted, technical quality.

### Borders, radius, and depth
- Use a large rounded corner radius around 22–26px on desktop and 18–22px on mobile.
- Avoid a visible border; if needed, use a nearly transparent cool-white outline around 1px.
- Use restrained shadowing outside the card, such as 0 16px 40px rgba(4, 35, 58, 0.08). The banner should feel polished, not like a floating dashboard panel.

### CTA interaction
- Make the pill CTA visually distinct with a near-white base around #F8F8F2 and dark text around #111827.
- Give it a thin luminous or multicolour edge only if it fits the user’s brand; otherwise use a simple subtle border.
- Use approximately 14px vertical and 24px horizontal padding, with a fully rounded radius of 999px.
- On hover, slightly raise the button, brighten its surface, and shift its arrow or icon if present. Use a 160–220ms ease-out transition.
- Keep keyboard focus clearly visible with a 2px accessible outline and sufficient contrast.
- The entire banner may be clickable only if that matches the product’s interaction model; otherwise make the button the sole primary target.

### Responsive and accessibility rules
- Maintain a minimum 4.5:1 contrast ratio for normal text and a minimum 3:1 ratio for large text and UI controls.
- Respect reduced-motion preferences by disabling artwork animation and hover movement when requested.
- Ensure the headline wraps intentionally at common breakpoints and never collides with the artwork.
- Provide meaningful alternative text for any informative artwork; mark purely decorative textures as hidden from assistive technology.

## Never
- Never use logos, product names, slogans, button copy, or distinctive wording from the reference.
- Never reproduce the reference’s portrait, specific currency figure, exact line-art composition, or other recognisable imagery.
- Never copy the reference layout pixel-for-pixel; use these principles to create a new composition for the user’s product and brand.
- Never rely on imagery to communicate the CTA’s meaning.
- Never use low-contrast text, inaccessible focus states, excessive decoration, or animation that distracts from the action.