## 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/typewise-nova/b4948f23-79f3-4392-9236-ca27a7b6b602-1789106476-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/typewise-nova/b4948f23-79f3-4392-9236-ca27a7b6b602-1789106444891-full.webp
- Component on Kage: https://kage.design/component/typewise-nova-cta

## Before you start
Ask what the user's product is, who it is for, and what brand personality, colours, typography, and conversion goal the section should support. Then apply the principles below to create an original CTA for that product rather than reproducing the reference.

## Build this section
Create a self-contained promotional CTA banner that can sit between major sections of a modern dark-themed marketing page. The component should feel like a confident, time-bound offer or launch announcement, with a short eyebrow, a prominent headline, and one primary action.

### Layout and alignment
- Use a wide horizontal container with a generous maximum width, approximately 1200px, and fluid side margins.
- Give the banner a substantial but compact height: around 260px on desktop, reducing naturally to approximately 300–360px on mobile as content wraps.
- Center-align every element vertically and horizontally.
- Stack the content in this order: small uppercase eyebrow, headline, then CTA button.
- Keep the text column narrow enough to create a strong focal point; target roughly 560–700px for the headline.
- Use responsive padding of about 32px on desktop and 24px on mobile.
- Ensure the headline wraps gracefully without awkward single-word lines. On small screens, allow a two- or three-line layout.

### Typography hierarchy
- Use the product's brand typeface if available; otherwise use a clean contemporary sans-serif with slightly rounded forms.
- Eyebrow: uppercase, semibold, approximately 11–13px, with 0.08–0.12em letter spacing and moderate contrast against the background.
- Headline: bold or semibold, approximately 32–38px on desktop and 27–32px on mobile; use tight line-height around 1.05–1.15.
- Keep the headline concise and benefit-led. It should carry the main emotional and informational weight.
- Button label: semibold, approximately 14–16px, with clear action wording.

### Colour and surface
- Place the component on a very dark page background, approximately #08080C or adapt to the user's brand surface colour.
- Use a saturated left-to-right gradient inside the banner, for example from deep cobalt #2146B8 through bright blue #3262E8 to periwinkle #536CF0. Adjust the hue to the user's brand while preserving strong energy and contrast.
- Use near-white text such as #F8FAFF. The eyebrow can use a slightly muted white such as #D5DDF8.
- The CTA should use a high-contrast light fill, approximately #F7F8FC, with dark text around #151820.
- Avoid adding decorative artwork; let the gradient provide the visual interest.

### Borders, radius, and spacing
- Use a large rounded rectangle with approximately 18–22px corner radius on desktop and 16px on mobile.
- Add a subtle translucent border, such as 1px solid rgba(255,255,255,0.18), to separate the banner from the dark page.
- Use approximately 20–26px between the eyebrow and headline, 22–28px between the headline and button, and 28–36px of bottom breathing room.
- The button should be a pill with approximately 999px radius, 14–18px vertical padding, and 24–30px horizontal padding.
- Keep shadows restrained: use none or a soft, low-opacity shadow that supports separation without making the banner feel elevated.

### Interaction and accessibility
- Make the entire CTA action an obvious keyboard-focusable button or link.
- On hover, slightly brighten or lift the button with a subtle colour or transform change; keep the transition around 150–200ms.
- Provide a clearly visible focus ring that meets WCAG contrast requirements.
- Ensure the text remains readable against every part of the gradient and maintain a minimum comfortable touch target of 44px.
- Respect reduced-motion preferences by disabling hover transforms and animated transitions where requested.

### Responsive behaviour
- Preserve the centered composition at all breakpoints.
- On narrow screens, reduce the headline size and horizontal padding rather than allowing the banner to overflow.
- Let the banner height be content-driven on mobile, with consistent vertical rhythm.
- Keep the button large enough for touch and prevent its label from wrapping.

## Never
- Never copy the reference's logos, product names, launch wording, promotional claims, or button copy.
- Never reuse the reference's exact text, typography, gradient stops, dimensions, or spacing as a pixel-for-pixel reproduction.
- Never include illustrations, photographs, icons, or imagery from the reference.
- Never assume the user's product is a launch, subscription, or promotional offer; adapt the message and CTA to their actual goal.
- Never sacrifice contrast, keyboard accessibility, responsiveness, or semantic HTML for visual similarity.