Skip to main content

Lists

Lists should be clean, scannable, and maintain comfortable spacing between items.

Spacing & Layout​

We use a 4-point grid:

  • Base spacing unit: 4 pt
  • Page horizontal padding: 16 pt
  • Vertical spacing between sections: 24 pt
  • Card inner padding: 16–20 pt

Between List Items​

  • Outer padding: 16 pt horizontal, 6 pt vertical (between cards)
  • This creates visual breathing room while maintaining density

Max Width​

On tablet/desktop layouts:

  • Constrain the main content column to ~600–720 pt wide and center it
  • Avoid extremely wide paragraphs; reading should feel like a good book column, not a full-width blog

General Guidelines​

  • Err on the side of more whitespace rather than less
  • Use consistent vertical rhythm so sections feel distinct but related
  • List items should be easily tappable (minimum 44pt touch targets)
  • Maintain clear visual hierarchy within list items

List Item Patterns​

Book Lists​

See Cards for book list tile specifications.

Social Content Lists​

Cards for:

  • Line cards (social posts)
  • Review cards
  • Club cards
  • Challenge cards

All use the standard card container specifications.

Action Lists​

For settings and configuration lists:

  • Use clean, simple list tiles
  • Icon on left (optional)
  • Label in Ink Blue (#233548)
  • Chevron/arrow on right for navigation items
  • Dividers between items (Border color #E0D7C8)

Reusable Components​

Flutter should define:

  • BwScaffold – wraps Scaffold with consistent background and padding
  • BwSectionHeader – H2 style with optional subtitle

All new screens should use these primitives rather than re-defining surfaces.