## 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/mistral-ai/b4bd1aa3-e31c-42a6-8066-6d42fc3e7f45-1789073964-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mistral-ai/b4bd1aa3-e31c-42a6-8066-6d42fc3e7f45-1789073922-full.webp
- Component on Kage: https://kage.design/component/mistral-cta

## Before you start
Ask the user what their product is, who it serves, and what their brand personality and visual system are. Then apply the principles below to create a version for that product—do not reproduce the reference literally.

## Build a high-contrast split CTA section
Create a full-width CTA band that sits immediately before the site footer. It should feel like a confident final conversion moment: a short eyebrow and large statement on the left, with two clear actions grouped on the right.

### Layout and alignment
- Use a full-bleed rectangular section with a strong accent background.
- Constrain the contents to the same max-width as the rest of the site, approximately 1200–1400px, with consistent horizontal gutters of 40–64px on desktop.
- Use a two-column layout: the message occupies roughly 60–65% of the width and the actions occupy the remaining 35–40%.
- Vertically center both columns within a generous section height of approximately 340–420px.
- Align the eyebrow and headline to the same left edge.
- Keep the CTA group horizontally aligned and allow buttons to sit side by side on wide screens.
- On smaller screens, stack the message and buttons vertically, preserving a clear reading order and comfortable gaps.

### Typography hierarchy
- Use a small uppercase eyebrow with modest letter spacing, around 12–14px, and a restrained line height.
- Set the main statement in a large, clean sans-serif at approximately 42–56px desktop, with tight line height around 0.95–1.05 and medium-to-bold weight.
- Keep the headline width controlled so it wraps into a few purposeful lines rather than spanning the entire viewport.
- Buttons should use clear 15–16px text with medium weight and compact line height.

### Colour
- Choose one vivid brand accent for the band, such as a warm vermilion or electric coral near `#F04424`; adapt this hue to the user's brand.
- Use near-white text such as `#F8F7F2` for the eyebrow and headline.
- Use a light neutral button background near `#F4F3EF` with dark text near `#151515` for the primary action.
- Use a near-black secondary button near `#101014` with light text for the alternative action.
- Ensure both buttons have strong WCAG-compliant contrast against their labels and the accent background.

### Borders, shape, and spacing
- Keep the band visually flat and editorial: no gradients, shadows, decorative illustrations, or cards.
- Use small button radii around 6–8px, or the user's established control radius; avoid pill-shaped buttons unless the brand system requires them.
- Give buttons approximately 16–20px horizontal padding and 12–14px vertical padding.
- Leave generous internal whitespace: approximately 72–96px vertical padding on desktop and 40–56px on mobile.
- Separate the eyebrow from the headline by 28–36px, and the headline from the action group by at least 32px where the responsive layout stacks.

### Interaction
- Make the entire button surface clickable, with a small directional arrow or equivalent affordance at the trailing edge.
- On hover, slightly increase the button’s background contrast or translate the arrow by 2–4px; use a quick 150–200ms ease transition.
- Preserve visible keyboard focus rings with sufficient contrast.
- Do not make the accent band itself clickable unless the product's interaction model specifically calls for it.

### Responsive behaviour
- At tablet widths, reduce the headline size and gutters while keeping the two-column structure if space permits.
- At mobile widths, switch to one column, left-align everything, and stack the actions with full-width or content-width buttons according to the product's conventions.
- Ensure the headline never collides with or crowds the buttons, and maintain at least 24px between stacked controls.

## Never
- Never copy the reference's logos, product names, or brand-specific wording.
- Never reuse the reference's exact CTA copy; write messaging appropriate to the user's product.
- Never include illustrations, photography, textures, or imagery from the reference.
- Never reproduce the reference's exact dimensions, typeface, colour values, or layout proportions without adapting them to the user's brand.
- Never sacrifice accessibility for visual similarity: maintain semantic headings, keyboard access, focus states, responsive behaviour, and adequate colour contrast.