Kage Design logo kage
diagramly.xyz
Diagramly call to action component

Design analysis

A very simple closing invitation resets the visual rhythm after the dense card grid. One large statement, a short reassurance, and a single high-contrast action make the next step obvious.

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/diagramly/9b8d5fcc-855c-4b01-a046-ef496ed19a9b-1792044172-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/diagramly/9b8d5fcc-855c-4b01-a046-ef496ed19a9b-1792044070781-full.webp
- Component on Kage: https://kage.design/component/diagramly-cta

## Before you start
Ask the user what the most important conversion action is and what reassurance would remove hesitation. Apply the principles below using their product and brand.

Build a centered closing call-to-action on a calm paper-textured background. Include one short, memorable display headline, a warm one-sentence reassurance, and one prominent dark button. Keep the section intentionally sparse so it feels like a confident conclusion rather than another feature block.

### Design language
- Use a warm off-white background `#fcfbf7` with a very subtle dotted pattern around `#e9e5dc`.
- Use a large expressive display typeface in near-black `#22221f`, approximately 52–72px on desktop, with a coral hand-drawn underline or rule around `#df5b3e`.
- Constrain content to roughly 620px and center-align it. Use ample vertical padding, around 72–110px, and 18–24px spacing between elements.
- Keep reassurance copy in a neutral sans-serif, 14–16px, muted gray `#77756f`.
- Use a dark pill or softly rounded button with white text, 8–12px radius, and a clear directional cue. Add only a subtle hover lift.
- Scale the headline down responsively and preserve generous whitespace on mobile.

### Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never copy the exact closing headline, button label, underline shape, or texture treatment.

More components