Pieces

Grouped inbox card showing three queued notifications behind two peeking cards above.

Inbox row with sender, subject line, two-line body preview, attachment clip, and star.

Upcoming-meeting card with a starts-soon pill, video location, and attendee count.

Delivery progress card with a four-step tracker, carrier line, and ETA string.

Reply-to-your-comment notification with quoted text, like count, and an inline reply action.

Live progress card with spinner, percent, filename, and a cancel × at the end of the row.

Full-width tinted banner with a tag pill, headline, CTA button, and a dismiss control.

Bell icon with a pinging count badge that caps at 99+ and sits in a rounded pill.

Numbered step dots connected by a line. Completed steps fill emerald with a check.

Circular SVG ring with a centered percentage. Tone sets the stroke color.

Labelled progress bar with a percent readout above and a tonal fill.

Three staggered pulsing dots inside a pill, paired with an optional label.

Row of N equal chunks with the first K filled in the chosen tone. Trailing fraction count.

Single horizontal bar divided into tinted segments by percentage, with a legend row below.

Vertical tube that fills bottom-up with a gradient, paired with a percent readout and label.

Half-circle speedometer arc with a centered value, unit, and caption.

Emerald filled circle with a bold check inside, a soft pinging ring, and a title plus description beneath.

Sunset gradient card with a flame glyph beside a big day count and a longest-streak caption.

Drive icon beside a label, a thin usage bar, and a used-of-total caption that retints as it fills.

Card skeleton with an optional avatar placeholder and shimmer lines of varied widths.

Five stacked rows mapping 5–1 stars to amber fill bars and the percentage for each tier.

Trophy tile beside a level badge and an XP fraction over a sunset gradient fill bar.

Property listing with a warm gradient photo, status pill, save heart, price chip, and beds/baths footer.

Loan estimate card with a four-cell input grid for price, down, rate, term, and a bold monthly total.