Empty States and Error Pages

You are a product designer focused on delightful micro-experiences. Design a complete set of 8 empty states and error screens for a [PRODUCT TYPE — e.g. project management SaaS].

FIRST — DEFINE THE SHARED ILLUSTRATION STYLE SYSTEM:
(All 8 illustrations must feel like they belong to the same family)
• Style direction: character-based / object-based / abstract geometric / line illustration — choose one
• Stroke weight (if line-based): thin (1px), medium (2px), or bold (3px)
• Colour palette: list 3–4 illustration colours + the neutral they sit on
• Whether characters have faces and what expression range to use
• Size of illustration relative to the screen (what % of vertical space)
• Do they use animation? If yes — describe the type (loop, one-shot, idle)

NOW DESIGN ALL 8 SCREENS:

SCREEN 1 — NO PROJECTS YET (New User)
• Emotional tone: welcoming and motivating — never make users feel like they've done something wrong
• Illustration concept: describe the scene or object
• Headline: write the actual copy (friendly, specific — not "Nothing here yet")
• Subtext: write it (1–2 sentences — what they gain by taking action)
• CTA label and button style

SCREEN 2 — NO SEARCH RESULTS
• Emotional tone: helpful, not apologetic
• Illustration: describe (magnifying glass variant is clichéd — suggest something more interesting)
• Headline: write it
• Subtext: 2 helpful suggestions (check spelling, try a broader term)
• Optional: show recent searches below

SCREEN 3 — EMPTY INBOX / NOTIFICATIONS
• Emotional tone: calm and reassuring
• Illustration: describe a peaceful or minimal concept
• Headline: write it (e.g. "All clear — no new messages")
• Subtext: write it

SCREEN 4 — TASK LIST COMPLETE (Celebratory)
• Emotional tone: genuinely celebratory — this is a win moment
• Illustration: describe the celebration visual without being over the top
• Headline: write it (acknowledge the achievement specifically)
• Animation: describe the micro-celebration (confetti burst, checkmark morph, etc.)
• Subtext and optional next action

SCREEN 5 — NO TEAM MEMBERS ADDED
• Emotional tone: encouraging and social
• Illustration: describe (empty seats, solo character, etc.)
• Headline: write it
• CTA: "Invite your team" — describe button placement and style

SCREEN 6 — 404 PAGE
• Emotional tone: playful but not annoying — acknowledge the error lightly
• Illustration: a visual pun or creative interpretation of "lost / not found"
• Headline: write the actual copy (avoid "Oops! Page not found")
• Subtext: write 1 helpful sentence
• CTAs: Home button + Search bar
• Brand consistency: how this page stays on-brand despite being an error

SCREEN 7 — 500 SERVER ERROR
• Emotional tone: honest and apologetic — take responsibility
• Illustration: describe something that communicates "our end, not yours"
• Headline: write it (direct, not cute — people are frustrated)
• Subtext: estimated time or action they can take
• CTA: Retry button + Status page link

SCREEN 8 — OFFLINE / NO CONNECTION
• Emotional tone: practical and calm
• Illustration: describe (broken cable, cloud with X, signal bars — avoid clichés)
• Headline: write it
• Subtext: what they can still do offline (if anything) or when to retry
• Auto-retry behaviour: describe the UX (banner reappears when connection restores)