## When to use

Bell menu: the ambient affordance — a small popover the user glances at when the bell icon shows an unread count. Distinct from the full notifications feed (15a) which is a dedicated page and from toasts (08e) which are transient. Digest preview: the in-app preview of what a scheduled email will contain — used inside notification-prefs (15c) so the user can validate the digest before committing.

## Bell menu — empty

Default state when there are no unread notifications. Uses an empty-state-ui in the menu body so the popover doesn't feel broken; "View all" footer links to the full feed.

Notifications

## Bell menu — unread items

Each row carries an avatar (or icon for system events), a one-line summary, a timestamp, and a small unread-dot. Clicking a row marks it read and navigates to the source. "Mark all read" + "View all activity" in the footer.

Notifications 3 new
Avery Chen commented on your PR "OKLCH ramp comment" · 4 minutes ago Jordan Lee assigned you a task "Audit kanban accessibility" · 1 hour ago Build #4823 succeeded on main 2 hours ago Sam Park mentioned you "#design — auth review" · yesterday Storage 80% full 2 days ago · Workspace

## Email digest preview

The in-app rendering of the digest email — frequency header, "What's in this digest" summary, sectioned content. Used inside notification prefs so the user can see exactly what a daily/weekly digest will look like before opting in.

Weekly digest preview This is what your Monday morning email will contain
Hi Kim, Here's what happened in Adia AI this week. Mentions · 4 Avery on "OKLCH ramp comment" "Should we use chrome or data scale here?" · Tuesday Jordan on "Auth flow rebuild" "Nominating for review" · Wednesday Activity · 12 3 PRs merged v0.0.26 hotfix, attribute-API migration sweep, INDEX update 9 issues closed 5 by you, 4 by team Coming up Design review — Tuesday 2pm v0.0.27 cut planning

## Composition rules

- Unread dot, not unread badge — a small primary-tinted dot on the trailing edge of the row reads as "new" without screaming. Per-row badges with counts are noise on a glance-surface.
- Cap the menu at ~5–7 rows — anything more is a feed, not a glance. Older items live in the full activity surface (15a) reachable via "View all".
- Empty state is mandatory — bare "No notifications" text reads as broken. The empty-state-ui treatment (icon + heading + description) is the difference between "system is working and there's nothing to show" vs. "did the page fail to load?".
- Mark-all-read goes in the footer — destructive-ish actions (clearing the unread state across many items) live below a divider, not inline with row clicks.
- Digest previews use the same components as the email — the in-app preview should be visually faithful to what the email renders. Don't render a different layout for the preview.
- "Send test" on the digest preview — let the user fire one to themselves before committing to a recurring schedule. The preview is a confidence check; the test is the proof.
- Frequency lives in the header — "Weekly digest", "Monday 8am". Without that anchor, users don't know if the preview is "what I'd see today" or "the standard shape".

## See also

- menu-ui · empty-state-ui — bell-menu primitives.
- list-ui · list-item-ui — digest section anatomy.
- comments-and-collaboration — what mentions in the bell menu link to.
- avatar-ui — actor identity in both surfaces.