Empty states

The canonical "nothing here yet" surface. Use whenever a list or detail page has no data to render — first-time user, filtered-empty, no resumes, no applications. Lora title, DM Sans body, optional DSIcon at the top, optional actions row. Centered prose; cream-on-ink palette only.

Variants

Three configurations covering the common combinations — title-only, with an icon, and with a primary action.

Title + description only

The minimum viable empty state — a Lora title and one or two sentences of DM Sans body. Use when the surface above already provides enough scaffolding (a section heading, a tabbed nav) that a CTA would be redundant.

No applications yet

Tracked applications will show up here. Add one when you start a new conversation, and we'll keep the timeline organized.

With icon

Add a DSIcon name to render an icon at the top in the muted DSIconBox treatment. Use when the empty state has no parent header to anchor it visually — a freshly-routed page or a panel without its own chrome.

Your career library is empty

Add your work, education, skills, and projects once and reuse them across every resume you build.

With action

Pair a primary DSBtn in the actions slot when there's a single obvious next step. Keep it to one button — empty states earn one CTA, not three.

No resumes yet

Build your first resume from your career data — pick the items you want to include, and we'll wire up the layout.

With rich slot content

The default slot replaces the description prop when you need richer content — multiple paragraphs, a link, an inline tip. The actions row still belongs to the named slot.

Nothing matches that filter

We searched everything in your library and didn't find a match for the current filter set.

Try widening the date range, or clear filters to see everything again.