## 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/notion-com/9e072824-4b09-4216-9cff-06c643793f91-1789060360-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/notion-com/9e072824-4b09-4216-9cff-06c643793f91-1789060339-full.webp
- Component on Kage: https://kage.design/component/notion-cta

## Before you start
Ask the user what their product is, who it serves, and what brand personality, colours, typography, and conversion goal they want. Apply the principles below to their product rather than reproducing the reference literally.

## Build a minimal centered CTA section
Create a standalone, full-width call-to-action band for a modern software marketing website. The section should feel calm, spacious, and highly scannable, with a single conversion message and two side-by-side actions.

### Layout and alignment
- Use a wide horizontal section with a very light warm-neutral background, approximately `#F7F7F5` or a brand-appropriate equivalent.
- Center the content horizontally and vertically within the section.
- Use a constrained content column around `560–720px` wide, although the heading itself may remain much narrower through natural text wrapping.
- Place one prominent heading above a compact action row.
- On desktop, keep the buttons in one horizontal row with a small gap of roughly `10–14px`.
- On small screens, allow the buttons to stack or become full-width while preserving equal visual importance and comfortable touch targets.
- Give the section generous vertical padding, approximately `72–120px` on desktop and `56–80px` on mobile.
- Keep the bottom edge visually clean so the following footer or page section can begin without a divider unless the product’s brand system requires one.

### Typography hierarchy
- Use one short, confident headline, such as an invitation to begin, with no supporting paragraph unless the user’s product needs additional context.
- Set the heading in a bold or semibold sans-serif, approximately `36–44px` on desktop, `30–36px` on mobile, with tight line-height around `1.05–1.15` and slight negative letter spacing.
- Use button labels in a clear medium-weight sans-serif around `15–16px` with a line-height near `1.2`.
- Make the hierarchy depend on size, weight, and whitespace rather than decorative elements.

### Colour and visual treatment
- Use near-black text such as `#111111` or the user’s darkest brand colour.
- Make the primary action a saturated brand colour; a bright blue around `#0B84E5` is a useful starting point. Use white text with sufficient contrast.
- Make the secondary action white or a very light neutral such as `#FFFFFF`, with muted blue or brand-colour text around `#2779A8`.
- Avoid gradients, shadows, icons, illustrations, and unnecessary decoration.

### Buttons, borders, and radius
- Give both actions a compact but generous height of approximately `40–48px` and horizontal padding around `16–20px`.
- Use a moderate corner radius around `8–10px`, or match the user’s existing button language.
- The primary button may use a subtle border or no visible border; the secondary button should have a faint border around `#E7E7E5` or a barely perceptible elevation if needed for separation from the background.
- Keep button widths based on their labels rather than forcing oversized controls.
- Add clear hover, focus-visible, pressed, and disabled states. Hover should slightly darken or lift contrast; focus should use an accessible outline; pressed should reduce elevation or darken briefly.

### Interaction and accessibility
- Make the primary action visually dominant without making the secondary action look disabled.
- Ensure both buttons are keyboard accessible and have visible focus states.
- Use semantic heading and button/link elements, descriptive labels, and sufficient colour contrast.
- Preserve the centered composition when text wraps or when labels are translated.

## Never
- Never copy logos, product names, branded copy, or exact button labels from the reference.
- Never reuse the reference’s illustrations, imagery, icons, or distinctive brand assets.
- Never reproduce the exact typography, dimensions, spacing values, or colour palette if they conflict with the user’s brand.
- Never add extra navigation, testimonials, feature lists, or decorative content that weakens the single CTA focus.