## 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/obsidian-md/18ba00bf-73a3-4c61-9eb0-f66f69cff1b6-1789060834-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/obsidian-md/18ba00bf-73a3-4c61-9eb0-f66f69cff1b6-1789060782-full.webp
- Component on Kage: https://kage.design/component/obsidian-md-cta

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and visual system are. Then apply the principles below to create a version for that product rather than reproducing the reference.

## Design this section
Build a full-width closing CTA section for a modern software website. It should feel like a confident final statement after the main page content, with an intentionally sparse composition and a strong visual pause.

### Layout and alignment
- Use a near-black full-bleed background, approximately `#101010` or a brand-appropriate equivalent.
- Create a generous vertical section, with the main content centered horizontally and the headline positioned in the lower half or around the final third of the section.
- Keep the content within a centered max-width of roughly `720–900px`.
- Place one short headline on a single line at desktop widths where possible; allow it to wrap naturally on smaller screens without awkward forced breaks.
- Add a primary CTA directly below the headline, with enough top spacing that it feels like a deliberate follow-up rather than part of the heading. On a viewport crop, the button may sit close to or partially below the fold.
- Maintain substantial negative space above the content. The section should feel calm and cinematic, not packed with supporting copy.

### Typography
- Use a bold contemporary sans-serif with a clean, slightly compact shape.
- Make the headline large and assertive: approximately `56–72px` on desktop, `40–52px` on mobile, with a weight around `700–800`.
- Use tight but readable line-height around `0.98–1.08` and subtle negative letter spacing around `-0.03em`.
- Keep the CTA label concise and action-oriented. Avoid adding eyebrow text, descriptive paragraphs, or secondary links unless the user's product genuinely needs them.

### Colour
- Use an almost-black background such as `#101010`.
- Use warm off-white headline text such as `#F2F2F2`, rather than pure white.
- Give the primary CTA a vivid brand accent, such as violet `#8B3DFF` or an equivalent colour from the user's brand palette.
- Ensure text and controls meet accessible contrast requirements.

### Borders, radius, and controls
- Keep the section background borderless.
- Use a medium rounded radius on the CTA, approximately `8–10px`, unless the user's design system calls for a different shape.
- Make the button comfortably sized, around `44–52px` tall with generous horizontal padding.
- Use a subtle hover treatment: slightly brighten the accent, raise the button by 1–2px, or add a restrained glow. Include a visible keyboard focus ring.

### Responsive behaviour
- Reduce the section's vertical padding on small screens while preserving the feeling of negative space.
- Let the headline scale fluidly with `clamp()` and wrap to two or three balanced lines on narrow screens.
- Keep the CTA centered and full-width only if that matches the product's mobile interaction patterns; otherwise retain a compact button.

## Never
- Never copy the reference site's logos, product names, slogans, or exact CTA copy.
- Never reuse the reference's illustrations, imagery, icons, or decorative artwork.
- Never reproduce the exact typography, spacing measurements, or brand colour if they conflict with the user's product.
- Never add dense supporting content that removes the intentional negative space.
- Never make the result look like a branded clone; preserve the compositional idea while adapting the execution to the user's product.