heroBeginner
Pastel Wellness Hero
Sage and peach pastel palette with rounded type and a cream backdrop.
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 calm wellness/lifestyle hero with Tailwind: warm cream background (#f5efe1), two large blurred sage and peach blobs in opposing corners. Centered Fraunces serif content using the variable font's optical-sizing and SOFT axis: a small Fraunces chip, a large headline with one italicized emphasis word in sage green, supporting copy in Fraunces (28pt opsz). A pair of CTAs — solid dark walnut primary, transparent border secondary, both rounded-full. In the bottom-right corner, a slowly rotating concentric-circle SVG glyph in sage/terracotta. Generous whitespace, slow palette — meant for skincare, retreats, indie SaaS that wants to feel adult.
Code
html
<!--
Source: Vibedex
https://vibedex.io
License: MIT
Surfaced via https://vibedex.io/components/vbx-pastel-hero
-->
<section class="hero"><div class="blob b1"></div><div class="blob b2"></div><div class="copy"><span class="chip">◌ A new season</span><h1>Slow down.<br>Build with <em>care</em>.</h1><p>Components made the way they should be — considered, generous, and easy on the eyes.</p><div class="row"><a class="primary" href="#">Start your trial</a><a class="ghost" href="#">Read the docs</a></div></div><div class="glyph"><svg viewBox="0 0 200 200" fill="none"><circle cx="100" cy="100" r="80" stroke="#7c8b6a" stroke-width="1.5"/><circle cx="100" cy="100" r="50" stroke="#c9866b" stroke-width="1.5"/><circle cx="100" cy="100" r="20" fill="#e3d3b0"/></svg></div></section>