Skip to main content

Overlays & Modals

Overlays and modals should feel light and focused, presenting information or actions without overwhelming the user.

General Specifications​

Container​

  • Background: white or very light Parchment variant
  • Corner radius: 16–20 pt (slightly more rounded than cards for prominence)
  • Shadow: Medium elevation, Ink Blue (#233548) at 12% opacity
  • Max width: 400–500 pt on tablet/desktop (smaller on mobile)

Overlay Background​

  • Scrim: Dark overlay (black at 40–50% opacity)
  • Dismissible: Tap outside to close (for non-critical modals)

Dialog Types​

Information Dialog​

Present information with optional action buttons

  • Title: AppTypography.heading (20pt, w600, sans-serif)
  • Body: AppTypography.body (16pt, w400, sans-serif)
  • Padding: 24 pt all sides
  • Button row: Right-aligned, 12 pt spacing between buttons

Action Sheet​

Present multiple action options

  • List of action buttons
  • Each item: 44–48 pt height
  • Clear visual separation between destructive and normal actions
  • Destructive actions: Error color (#C44545)
  • Normal actions: Ink Blue (#233548)

Bottom Sheet​

Slide up from bottom on mobile

  • Full-width on mobile
  • Corner radius: 16 pt on top corners only
  • Handle bar: Optional, 4 pt height, 32 pt width, centered at top
  • Max height: 90% of screen

Specific Overlays​

Book Info Overlay​

Displays detailed book information

  • Large book cover at top
  • Book title: AppTypography.bookTitleLarge (22pt, w700, serif)
  • Author: AppTypography.author (14pt, w400, serif)
  • Description and details in card typography
  • Action buttons at bottom

Browser's Speech Bubble​

When Browser the cat provides help

  • Small card with rounded corners
  • Dark background (Ink Blue #233548)
  • Light text (Parchment #FAF4E8)
  • Small arrow pointing to Browser illustration
  • Clear, concise text (2–3 sentences max)
  • Corner position, doesn't block main content

Wishlist Picker​

For adding books to wishlists

  • Simple list of user's wishlists
  • Each item: 44 pt height
  • Selected state: Teal Edge (#4BB4C8) background
  • "Create new wishlist" option at bottom

Guidelines​

  • Keep overlays focused on a single task or piece of information
  • Avoid nesting modals (modal on top of modal)
  • Use clear dismiss mechanisms (X button, tap outside, or explicit Cancel button)
  • Respect the spacing and typography rules from the main design system
  • No emoji in overlay text

Flutter Component​

Flutter should define:

  • Reusable overlay/modal components following these specifications
  • Consistent animation patterns (fade in scrim, slide or fade in content)