## 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/together-ai/60591018-8706-471e-a3f2-ad3109f52987-1789073940-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/together-ai/60591018-8706-471e-a3f2-ad3109f52987-1789073908-full.webp
- Component on Kage: https://kage.design/component/together-cta

## Before you start
Ask me what my product does, who it is for, and what its brand personality, colours, typography, and primary conversion goal are. Then apply the principles below to create an original CTA section for my product rather than reproducing a reference.

## Build this section
Create a standalone, responsive call-to-action section for a modern software or technology website. It should feel confident, minimal, and premium, with the conversion action clearly separated from a decorative visual atmosphere.

### Layout and alignment
- Use a full-width section with a centered content column and a generous vertical footprint, approximately 500–700px tall on desktop.
- Place the headline near the upper-middle of the section, followed by a short supporting sentence and one primary CTA button.
- Center-align the content on desktop and mobile; keep the content width narrow enough for a crisp reading measure, around 650–800px.
- Put the decorative visual layer behind the content and let it extend beyond the section edges. It may be partially cropped by the viewport to create scale and depth.
- Ensure the foreground copy remains readable above the decorative layer using contrast, positioning, or a subtle atmospheric overlay.
- On smaller screens, reduce the section height, preserve generous side padding of roughly 24px, and prevent the decorative shapes from pushing or overlapping the text and button.

### Typography hierarchy
- Use a short, action-oriented headline in a bold, modern sans-serif, around 32–40px on desktop and 28–34px on mobile, with tight line-height around 1.05–1.15.
- Use a single supporting line beneath it in a softer medium-grey, around 16px with 1.4–1.5 line-height.
- Make the CTA label compact, direct, and slightly emphatic. An uppercase or sentence-case label is acceptable depending on the brand, but maintain strong legibility.
- Keep the hierarchy to headline, supporting copy, and one primary action; do not add competing links or secondary buttons unless the product goal requires them.

### Spacing
- Give the headline-to-description gap approximately 16–20px.
- Give the description-to-button gap approximately 26–32px.
- Use at least 80–120px of breathing room above the content and 100–160px below it on desktop, adapting fluidly with `clamp()` where appropriate.
- Keep the section visually open even when the background artwork is large.

### Colour and atmosphere
- Start from the product’s brand palette, but use a very light, airy base such as warm white `#FCFCFB` or cool white `#F7FAFC`.
- Use near-black `#090A0B` for the headline and button, and a neutral grey such as `#92979D` for supporting text.
- Add a soft atmospheric wash behind the content, for example a pale blue gradient ranging from `#F8FCFF` to `#DCEEFF`, or adapt it to the brand’s accent colour at low saturation.
- The decorative background should use large, blurred or softly rendered abstract forms in two or three complementary accent colours. Keep opacity moderate so the copy remains dominant.
- The visual mood should suggest scale, optimism, and technical sophistication without relying on literal product imagery.

### Decorative visual treatment
- Build the backdrop with CSS gradients, oversized rounded geometric forms, blurred blobs, or abstract 3D-inspired shapes generated with CSS/SVG if needed.
- Use asymmetry: allow one or two forms to enter from the lower corners or side edges while keeping the center relatively calm behind the copy.
- Avoid detailed illustrations, busy patterns, or visual elements that look like content cards.
- If using motion, apply only slow, subtle ambient movement and respect `prefers-reduced-motion`.

### Button and interaction
- Use one prominent button with a near-black fill, white text, a compact height around 36–44px, and horizontal padding around 16–22px.
- Use a small radius, approximately 3–6px, unless the product’s brand calls for a more rounded treatment.
- Add a restrained hover state such as a slight lift, subtle brightness change, or brand-colour transition; include a visible keyboard focus ring.
- Make the entire CTA accessible with a clear label, sufficient colour contrast, a real link or button target, and touch-friendly dimensions on mobile.

### Borders and radius
- The CTA section itself should not need a visible border; separate it from surrounding content with whitespace or a very subtle top/bottom rule such as `#E9EEF2`.
- Keep corners mostly square or gently rounded. If the section sits inside a larger card, use a restrained radius around 12–20px and clip the decorative artwork to that shape.

### Responsive behaviour
- At tablet and mobile widths, scale the type and artwork independently so the headline remains the visual anchor.
- Allow the supporting text to wrap naturally to two or three lines without becoming too wide.
- Keep the CTA button easy to tap and centered; do not let decorative shapes reduce contrast or obscure the action.

## Never
- Never use the reference company’s logo, product name, brand name, or exact copy.
- Never copy the reference layout pixel-for-pixel or reproduce its decorative artwork.
- Never import or recreate the reference page’s imagery, illustrations, 3D objects, or branded visual assets.
- Never make the background more visually prominent than the CTA message.
- Never use inaccessible contrast, tiny tap targets, or motion that cannot be reduced.