Create a Notification Center Design System with Smart Grouping

Design a complete notification center for [APPLICATION TYPE] that handles [ESTIMATED DAILY NOTIFICATION VOLUME] notifications per user. The platform serves [TARGET USER PERSONA]. Deliver a full design specification covering these areas: 1. **Notification Bell Icon**: Design the trigger icon with badge counter behavior. Define rules for: no notifications, 1-9 count, 10-99 count, and 99+ overflow. Include animation for new incoming notifications. 2. **Dropdown Panel (Desktop)**: Specify dimensions (width: [VALUE]px, max-height: [VALUE]px), positioning relative to the bell icon, and scroll behavior. Include a header with 'Mark All Read' action and filter tabs: [All / Unread / [CUSTOM CATEGORY]]. 3. **Notification Item Design**: Create card layouts for these notification types: - [TYPE 1, e.g., social interaction like comments/likes] - [TYPE 2, e.g., system alert or status update] - [TYPE 3, e.g., actionable request like approval needed] Each card should include: avatar/icon, title, body preview (2-line max), timestamp (relative time format), read/unread indicator, and swipe or hover actions (archive, mute, delete). 4. **Smart Grouping**: Define rules for collapsing similar notifications (e.g., '5 people liked your post'). Specify expanded vs. collapsed states. 5. **Empty State**: Design for zero notifications with illustration suggestion and friendly copy. 6. **Full-Page Notification View (Mobile)**: Layout for a dedicated notifications screen with pull-to-refresh, infinite scroll, and section dividers (Today, Yesterday, Earlier). 7. **Settings Integration**: List toggleable notification preferences per channel (in-app, email, push) in a table format. Visual style: [BRAND STYLE]. Include dark mode variants.