ctasBeginner

Zen CTA

Quiet near-monochrome CTA with a single circular accent and lots of breath.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a 'zen' minimalist CTA section with Tailwind: nearly white off-cream background (#fafaf5), centered content with massive vertical breathing room. A 64px sage-green circular dot at the top with a soft radial-gradient highlight, gently breathing via a 4s scale animation. Below: a Fraunces serif headline (using the SOFT variable axis), a Fraunces serif paragraph, and a thin underlined inline link with an arrow that slides on hover. The whole thing communicates 'we considered every pixel, including the ones we left empty'.

Code

html

<!--
  Source: Vibedex
  https://vibedex.io
  License: MIT
  Surfaced via https://vibedex.io/components/vbx-zen-cta
-->
<section class="section"><div class="copy"><div class="dot"></div><h2>Quiet on purpose.</h2><p>The fewest moving parts you can ship without giving up control. Read the principles, or just start.</p><a class="link" href="#">Begin <span class="arrow">→</span></a></div></section>