Act as a product designer working in this codebase. Find every list, table, inbox and view in {{business_name}}'s app that can be empty, covering {{features}}, and replace the blank or "No data" screens with empty states written in our voice: {{brand_voice}}. Inspect first and give me the inventory before changing anything. Classify each case, because each needs a different answer: 1. First use (nothing created yet): what will live here, why it helps, one primary action, and a secondary like "Import" or "Use a sample"; show a small, real preview of the filled view 2. No results (search or filters): echo the query, list the active filters with Clear filters, suggest a close match 3. Cleared (all done, inbox zero): one calm line, no button 4. No access: who can grant it, with a Request access action 5. Error or offline: what happened, Retry, and what still works Build one EmptyState component with these variants, using existing tokens. Inside its container (not centered on the page): optional visual at most 120px tall, title 18px weight 600, body 15 to 16px at max 48ch, actions below. Keep the container about the height of the populated view so the layout doesn't jump when data arrives. At 360, left-align and stack; at 768 and 1280, center within the container. Accessibility: when an empty state appears after a search or filter, announce it with role="status"; buttons are real buttons; illustrations have empty alt. States: the primary button has hover, focus-visible, active and loading; in no-access, show the action disabled with the reason if the user can't request. Motion: a 150ms fade when swapping from loading to empty; none under prefers-reduced-motion. Never flash the empty state before data loads. Avoid: the same sad-face illustration everywhere, giant art that pushes the action below the fold, "Oops!" copy, blaming the user.