Kage Design logo kage
m3.sineframe.com
SineFrame M3 call to action component

Design analysis

A bordered CTA panel closes the content with a strong documentation invitation, one action, and the recurring layered monochrome visual along its bottom edge.

Prompt preview
## 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/sineframe-m3/9bef993c-d1bd-4942-a7c3-753981df67d7-1791525889-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/sineframe-m3/9bef993c-d1bd-4942-a7c3-753981df67d7-1791525776498-full.webp
- Component on Kage: https://kage.design/component/sineframe-m3-cta

## Before you start
Ask what the user's product and brand are, then apply the following principles to that product rather than reproducing this reference.

Build a closing call-to-action inside a large bordered panel. Use a bold 42–48px headline, a short supporting sentence, and one dark primary button aligned to the left. Reserve the lower portion of the panel for an abstract, low-contrast layered monochrome wave or stripe treatment that visually connects to the rest of the page without using a literal illustration.

Use warm white #f7f6f3, a near-black 1px border #1b1b1b, black text #171717, gray supporting copy #6c6a64, and a black button with white text. Use 6px radius, 36–40px internal padding, and enough bottom space for the visual treatment. Make the CTA responsive, keep the action prominent, and add hover/focus states. The decorative visual must be aria-hidden and never obscure content.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference

More components