{
  "title": "Notifications",
  "path": "/components/notifications",
  "url": "https://design.werklist.com/components/notifications",
  "text": "https://design.werklist.com/agent/components/notifications",
  "summary": "The bell, the notification center and the cards that arrive while you work, for events you did not cause.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Notifications",
  "purpose": "Tells the reader about events they did not cause: cards that arrive at the top right while they work, and the notification center under the bell that keeps every notification.",
  "use": [
    "Someone mentions the reader, assigns them work or writes to them",
    "A candidate applies or a company lead arrives",
    "A message arrives in an inbox that is not on screen"
  ],
  "avoid": [
    "The item is already on screen: it appears in its list",
    "The result of the reader's own action: Toast",
    "A condition of the current page: Inline message",
    "Marketing or announcements"
  ],
  "anatomy": [
    {
      "part": "center",
      "measure": "404 px wide, on a phone the screen less 24 px; corner radius 24 px; raised glass, opaque on a phone",
      "token": "--radius-3xl, --glass-fill-raised, --elevation-3"
    },
    {
      "part": "title",
      "measure": "Title 3, 17 px, bold, with Mark all as read at the end in blue text",
      "token": "--type-product-title-3, --brand-blue"
    },
    {
      "part": "lane filter",
      "measure": "round gray chips, each with its unread count; the current lane in full ink at weight 700",
      "token": "--glass-fill-hover, --radius-full"
    },
    {
      "part": "tabs",
      "measure": "All and Unread, Dense, 13 px, medium; the current tab in full ink at weight 700 with a 2 px underline",
      "token": "--type-product-dense, --text, --text-muted"
    },
    {
      "part": "day heading",
      "measure": "Today, Yesterday, Earlier; bold, in muted ink",
      "token": "--text-muted"
    },
    {
      "part": "list",
      "measure": "460 px high on a desktop, then it scrolls"
    },
    {
      "part": "row",
      "measure": "corner radius 16 px; padding 10 px by 12 px; a 32 px avatar; name Dense, 13 px, bold; the sentence regular, with the verb in muted ink; time and lane Caption small, 11 px, tabular digits",
      "token": "--radius-2xl, --type-product-dense, --type-product-caption-small"
    },
    {
      "part": "unread",
      "measure": "a 6 px dot and --brand-blue at 6 percent on the row",
      "token": "--brand-blue"
    },
    {
      "part": "urgent",
      "measure": "the word Urgent after the name, bold, on the solid alert fill, corner radius 6 px",
      "token": "--badge-alert, --badge-alert-ink"
    },
    {
      "part": "row dismiss",
      "measure": "28 px quiet icon button at the end of the row, shown on hover and focus; 44 px and always shown on touch"
    },
    {
      "part": "card stack",
      "measure": "top right, 72 px from the top of the window; 376 px wide, or the screen less 24 px; 8 px between cards; scrolls before a card would be cut in half",
      "token": "--space-2"
    },
    {
      "part": "card",
      "measure": "thin frosted glass with a bright rim; corner radius 28 px; padding 14 px, 40 px at the end for Dismiss; rises 1 px on hover"
    },
    {
      "part": "card lines",
      "measure": "first the kind of event (Caption small, 11 px, on its color at 15 percent, fully round), the name (Dense, 13 px, bold) and the time (Caption small, 11 px); then what arrived; then an optional detail in muted ink",
      "token": "--type-product-caption-small, --type-product-dense"
    }
  ],
  "variants": [
    {
      "name": "notification center",
      "use": "the history and the live feed, opened from the bell"
    },
    {
      "name": "card",
      "use": "an arrival while the reader works"
    }
  ],
  "states": [
    {
      "name": "center opening",
      "change": "moves 8 px down into place as it fades in, over 160 ms",
      "tokens": [
        "--ease-standard"
      ]
    },
    {
      "name": "row unread",
      "change": "6 px dot and --brand-blue at 6 percent on the row",
      "tokens": [
        "--brand-blue"
      ]
    },
    {
      "name": "row read",
      "change": "no dot, no fill"
    },
    {
      "name": "row dismissed",
      "change": "listed under All only; name in --text-muted at weight 500"
    },
    {
      "name": "row hover or focus",
      "change": "a faint fill",
      "tokens": [
        "--glass-fill-hover"
      ]
    },
    {
      "name": "loading",
      "change": "four skeleton rows"
    },
    {
      "name": "empty",
      "change": "'Nothing unread' under Unread, 'You are all caught up' under All, and one line on what arrives here"
    },
    {
      "name": "failed",
      "change": "'Your notifications did not load.' with Try again, in place of the list"
    },
    {
      "name": "partly failed",
      "change": "a warning band above the rows that loaded: 'Some notifications did not load.' with Try again",
      "tokens": [
        "--warning-ink"
      ]
    },
    {
      "name": "reduced motion",
      "change": "fades only"
    }
  ],
  "keys": [
    {
      "key": "Enter or Space on the bell",
      "action": "opens the center; focus moves to the current lane"
    },
    {
      "key": "Left and Right",
      "action": "move between lanes, or between All and Unread, and select"
    },
    {
      "key": "Home and End",
      "action": "first and last lane or tab"
    },
    {
      "key": "Tab",
      "action": "lanes, tabs, then each row followed by its dismiss button"
    },
    {
      "key": "Enter on a row or card",
      "action": "opens the item and marks it read"
    },
    {
      "key": "Escape",
      "action": "closes the center and returns focus to the bell"
    }
  ],
  "accessibility": [
    "the bell's name carries the count ('Notifications, 3 unread'); the number drawn on it is hidden from screen readers",
    "the center is a named dialog; the lane filter and the tabs are tab lists",
    "a card is announced once, politely, and takes no focus",
    "unread is shown by the dot and named in the row's accessible name; the fill is a second cue",
    "targets 44 px on touch"
  ],
  "content": [
    "a row reads as a sentence: person, verb, item ('Ana Horvat assigned you to Welders for Split')",
    "the filter has five lanes: Email, Work, Companies, Candidates and Chat",
    "a card names the kind of event instead, in its color: Email in blue, Candidate lead in green, a message that did not send in red",
    "no private detail beyond what the item shows",
    "one notification per event; a later event on the same item updates it",
    "a card carries no icon"
  ],
  "tokens": [
    "--glass-fill-raised",
    "--type-product-title-3",
    "--type-product-dense",
    "--type-product-caption-small",
    "--surface-1",
    "--elevation-3",
    "--radius-3xl",
    "--radius-2xl",
    "--radius-full",
    "--space-2",
    "--text",
    "--text-muted",
    "--brand-blue",
    "--warning-ink",
    "--badge-alert",
    "--badge-alert-ink",
    "--glass-fill-hover",
    "--ease-standard",
    "--focus-ring"
  ]
}