Skip to main content

Cards

Cards are the primary surface for displaying content in BookWish. They should feel like clean, readable containers that let the content shine.

Base Card Specifications​

  • Corner radius: 16 pt
  • Background: white or a very light Parchment variant
  • Border: 1 px Border color (#E0D7C8) OR a very soft shadow (low elevation)

Used For​

  • Book items in lists
  • Club/challenge tiles
  • POS cart items
  • Settings panels

List Tiles & Cards (Flutter Implementation)​

All list tiles and card components in the Flutter app use consistent styling:

Card Container​

  • Corner radius: 12 pt
  • Background: white
  • Elevation: 2
  • Shadow: Ink Blue (#233548) at 8% opacity
  • Outer padding: 16 pt horizontal, 6 pt vertical (between cards)

Components Using This Styling​

  • Wishlist item tiles
  • Notification tiles
  • Book list tiles
  • Inventory item tiles
  • Book cards
  • Club cards
  • Challenge cards
  • Line cards (social posts)
  • Review cards

Swipe-to-Delete​

For cards that support deletion:

  • Direction: End-to-start (right-to-left)
  • Background reveal: Error color (#C44545)
  • Icon: Delete icon, white, 28 pt
  • Applies to: Wishlist items, Notifications

Priority Badges (Wishlist Items)​

High Priority​

  • Circular badge with Coral Spine (#F37C7C) background
  • White star icon, 12 pt
  • Position: Top-right corner of book cover thumbnail

Low Priority​

  • Circular badge with Amber Star (#FFC857) background
  • White star icon, 12 pt
  • Position: Top-right corner of book cover thumbnail

Normal Priority​

  • No badge displayed

Flutter Component​

Flutter should define:

  • BwCard – standard card surface with the corner radius and padding above

All new screens should use this primitive rather than re-defining card surfaces.

Implementation Notes​

These styles are implemented via Material widget wrappers with consistent elevation and shadow properties, wrapped in Padding for spacing.