Empty state

Provide a headline that says what is empty, one sentence on why or what to do, and one action. For loading, put cv-skeleton bars where the text will land.

• Empty states teach: "No products yet", then the next step. Never "No data" or an apology.
• The mark is an outlined 28px icon from the line set on accent-soft; do not use illustrations with gradients or emoji.
• Use a skeleton for lists, tables and cards that load in under a few seconds; use the spinner only inside a button or for a full-screen wait.
• Skeletons pulse; with reduced motion they stay still.
• Three variants to write copy for: first use (invite the action), no results (offer to clear filters), error (say what failed and offer retry).