Skip to main content

Empty States

Empty states should feel friendly and helpful, guiding users toward their next action without feeling harsh or overwhelming.

Layout​

Empty states appear when a list, feed, or section has no content yet.

Structure​

  1. Illustration or Icon (optional)

    • Browser the cat illustration (when appropriate)
    • Simple icon (when Browser doesn't fit the context)
    • Size: 120–160 pt

  2. Heading

    • Typography: AppTypography.heading (20pt, w600, sans-serif)
    • Color: Ink Blue (#233548)
    • Example: "No clubs yet"

  3. Body Text

    • Typography: AppTypography.body (16pt, w400, sans-serif)
    • Color: Ink Blue at reduced opacity (70%)
    • 1–2 sentences explaining the state
    • Example: "Join a book club to read with others."

  4. Action Button (optional)

    • Primary or secondary button
    • Clear next step
    • Example: "Browse Clubs" or "Create Club"

Spacing​

  • Center all content vertically and horizontally in the available space
  • Illustration to heading: 24 pt
  • Heading to body: 12 pt
  • Body to button: 24 pt

Typography​

Empty states use sans-serif typography because they are container/UI chrome, not content:

  • Heading: AppTypography.heading
  • Body: AppTypography.body
  • Button: AppTypography.label

Examples​

Wishlist Empty State​

  • Illustration: Browser the cat with a book
  • Heading: "Your wishlist is empty"
  • Body: "Add books you'd love to read or own."
  • Button: "Browse Books"

Clubs Empty State​

  • Illustration: Stack of books or Browser reading
  • Heading: "No clubs yet"
  • Body: "Join a book club to read with others."
  • Button: "Browse Clubs"

Search No Results​

  • Icon: Magnifying glass
  • Heading: "No results found"
  • Body: "Try different keywords or browse categories."
  • No button (search is already active)

Guidelines​

  • Keep text concise and friendly
  • Avoid negative language ("You don't have..." → "Your wishlist is empty")
  • Provide clear next steps when possible
  • Use Browser the cat sparingly (not in every empty state)
  • No emoji in text
  • Maintain the calm, bookish tone

Flutter Component​

Flutter should define:

  • BwEmptyState – centered message with optional Browser illustration
  • Configurable heading, body, illustration, and button
  • Consistent spacing and typography