What Does a First-Time User See Before Any Data Exists?

Create a first-run empty state for a projects list. Vertically center in the content region a 160px line-art illustration slot, an 18px semibold heading "No projects yet", a supporting sentence in zinc-500 explaining that projects hold your tasks and reports, a primary indigo button "Create your first project", and a secondary "Import from CSV" text link. Cap the text block at 360px wide, give the container role="status", and render it only when the list request succeeds with zero items — a failed request must render the error variant instead. Keep the page header and navigation fully interactive so the user can orient while deciding. On click, the create button opens the same new-project modal used elsewhere in the app, not a one-off form.

Create a no-results state for a searchable, filterable table. Show a small magnifier glyph, the heading "No results for “{query}”" with the user's actual query interpolated, and a count of how many records were searched so it is clear the system worked. The primary action is a "Clear all filters" button that resets filter state and reruns the search; below it, list up to three suggested broader terms derived from the query. Include a muted line noting active filter chips with individual remove controls, so users can see exactly which constraint excluded everything. Do not include any create-style action. Give the container role="status" with aria-live="polite" so each new search result is announced, and preserve the filter state in the URL so the cleared view is shareable.

Create an error variant for list and dashboard views, rendered only when the data request fails — never on a successful zero-item response. Show a refresh-cycle icon, the heading "We could not load your projects", one sentence distinguishing a temporary network issue from data loss, and a primary Retry button that re-runs the request with exponential backoff up to three times, showing attempt count on the button. If cached data from a previous successful load exists, render it dimmed at 50% opacity with a "Showing saved data from 4 minutes ago" banner above, rather than hiding it. Style the container with an amber-50 background and amber-600 left border so the state reads as caution, not catastrophe. Give it role="alert" so screen readers announce the failure immediately.

Create a "caught up" empty state for an inbox or approvals queue that is empty because work is done, not because none exists. Show a calm check-circle illustration, the heading "You are all caught up", and a line stating when new items typically arrive based on historical cadence — "New approvals usually land by 9am" — or, if the queue is watched, a subtle live indicator. The single secondary action is "View completed items" so the emptiness is verifiable, not asserted; do not use a primary-colored button, since urgency is wrong here. Give the container role="status". Keep the treatment visibly lighter than error and first-run variants so users learn the three states apart at a glance.