A considered modal

<section><span class="eyebrow">GIVE IMPORTANT MOMENTS SOME SPACE</span><h1>One small decision.</h1><button id="open">Open a thoughtful dialog ↗</button></section><dialog><div class="symbol">↗</div><h2>Ready for what’s next?</h2><p>Great ideas begin with a small step.<br>You can always find your way back.</p><form method="dialog"><button value="cancel">A little later</button><button value="confirm" class="primary">Let’s go →</button></form></dialog>

*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;font-family:system-ui,sans-serif;background:#0b1020;color:#eaf0ff;padding:35px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #63dbea;outline-offset:4px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body{background:radial-gradient(ellipse,#252443,#0b1020 70%)}section{text-align:center}.eyebrow{font-size:7px;letter-spacing:2px;color:#8b93b7}h1{font-size:29px;font-weight:500;letter-spacing:-1px}button{padding:12px 18px;border:1px solid #3c4264;border-radius:8px;background:#222b45;color:#ccd8f1;font-size:10px}dialog{background:#141b2e;color:#e7ebff;border:1px solid #3b4260;border-radius:18px;width:350px;max-width:90vw;padding:30px;box-shadow:0 20px 70px #0007}dialog::backdrop{background:#070b18bb;backdrop-filter:blur(5px)}.symbol{width:43px;height:43px;border:1px solid #8688d65c;background:#8a82c718;display:grid;place-items:center;border-radius:11px;font-size:21px;color:#b5a9e9}h2{font-size:23px;font-weight:500;letter-spacing:-.7px}dialog p{font-size:11px;line-height:1.8;color:#8f9cb9}form{display:flex;gap:10px;margin-top:25px}.primary{background:#817ce0;color:#fff;border-color:#817ce0}

document.getElementById("open").addEventListener("click",()=>document.querySelector("dialog").showModal());