Design for AISuccess toast
Success toast: a CSS card. Copy the rules, or the prompt that rebuilds it.
Changes savedYour draft was synced 2 seconds ago.
CSS
.card-044 {
display: flex;
align-items: flex-start;
gap: 12px;
width: 340px;
padding: 14px 12px 14px 16px;
background: #fff;
border: 1px solid #e5e7eb;
border-left: 4px solid #16a34a;
border-radius: 12px;
box-shadow: 0 10px 30px -10px rgba(0,0,0,.2);
font-family: system-ui,sans-serif;
color: #111827
}
.card-044__icon {
flex: none;
width: 24px;
height: 24px;
display: grid;
place-items: center;
border-radius: 50%;
background: #dcfce7;
color: #16a34a
}
.card-044__text {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1
}
.card-044 b {
font-size: 14px
}
.card-044__text span {
font-size: 13px;
color: #6b7280
}
.card-044 button {
border: 0;
background: none;
font-size: 20px;
line-height: 1;
color: #9ca3af;
cursor: pointer;
padding: 0 4px
}
.card-044 button:hover {
color: #111827
}
.card-044 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<div class="card-044" role="status">
<span class="card-044__icon"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 13l4 4L19 7"/></svg></span>
<div class="card-044__text"><b>Changes saved</b><span>Your draft was synced 2 seconds ago.</span></div>
<button aria-label="Close">×</button>
</div>Prompt
Build a 340px success toast: white, 1px #e5e7eb border with a 4px green #16a34a left border, 12px radius, shadow 0 10px 30px -10px rgba(0,0,0,.2). Flex row: a 24px circle in #dcfce7 holding a green checkmark SVG, then a 14px bold title "Changes saved" over a 13px #6b7280 message, then a "×" close button in #9ca3af that darkens on hover.