Design for AISparkline stat
Sparkline stat: a CSS card. Copy the rules, or the prompt that rebuilds it.
CSS
.card-061 {
display: flex;
flex-direction: column;
width: 230px;
padding: 18px 20px 0;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
overflow: hidden;
font-family: system-ui,sans-serif;
color: #111827
}
.card-061 span {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .06em;
color: #6b7280
}
.card-061 strong {
margin: 6px 0 10px;
font-size: 30px;
font-weight: 700;
letter-spacing: -.02em
}
.card-061 svg {
width: calc(100% + 40px);
height: 44px;
margin: 0 -20px;
display: block
}
.card-061:hover svg path:first-child {
stroke: #1d4ed8;
stroke-width: 2.5
}
HTML
<article class="card-061">
<span>Weekly signups</span>
<strong>1,204</strong>
<svg viewBox="0 0 120 36" preserveAspectRatio="none"><path d="M0 28L15 22 30 25 45 14 60 18 75 9 90 12 105 4 120 8" fill="none" stroke="#2563eb" stroke-width="2" stroke-linejoin="round"/><path d="M0 28L15 22 30 25 45 14 60 18 75 9 90 12 105 4 120 8V36H0z" fill="url(#card-061-g)"/><defs><linearGradient id="card-061-g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#2563eb" stop-opacity=".25"/><stop offset="1" stop-color="#2563eb" stop-opacity="0"/></linearGradient></defs></svg>
</article>Prompt
Create a 230px KPI card with a sparkline: white, 1px #e5e7eb border, 14px radius, overflow hidden, padding 18px 20px and no bottom padding. Uppercase 12px #6b7280 label, 30px bold number "1,204", then an inline SVG (viewBox 0 0 120 36, preserveAspectRatio none) that bleeds edge to edge at the card bottom: a 2px blue #2563eb polyline over a vertical gradient fill fading from 25% blue to transparent. On hover the line gets thicker (2.5) and darker (#1d4ed8).