Count

Count prints a number on a slab pill: 14 px at weight 650 with tabular figures, at least 24 by 24 px, capped at "99+". Standalone it carries a label ("3 waiting") that screen readers read in place of the bare figure. On an IconButton (count) and at the end of an AvatarGroup it is decorative, because the control's name already says it.

Example#

Usage#

Use a count for a number that changes and needs attention: unread messages, items waiting, results. It is a slab pill with tabular figures, capped at "99+".

• Standalone, it needs a label ("3 waiting") that screen readers read instead of the bare figure.
• On a control, such as IconButton count or the end of an AvatarGroup, it is decorative: the control's name already says it.
• Zero usually means no count at all.

Anatomy#

Volume#

Reading layer: identical at every volume.

• Quiet

  Inbox 33 waiting Archive 99+140 archived

  Docs, forms, legal and long reads. Flat inks, no art in motion.

• Studio

  Inbox 33 waiting Archive 99+140 archived

  The site default. Art on its own plates, one display moment per view.

• Press

  Inbox 33 waiting Archive 99+140 archived

  Hero moments, covers and campaigns. Halftone fields and the second ink.

• Rave

  Inbox 33 waiting Archive 99+140 archived

  Launches, posters and the 404. Every ink, and the words still win.

Content#

• The label says what is counted: "3 waiting", "140 archived".

Do and don't#

Accessibility#

• The figure is hidden from assistive tech when a label is given; the words are read instead.
• Colour never carries the count's meaning: there is no red badge. The slab pill is the same on every look.

The colour pairs it prints, with their contrast on both papers:

Props#

Tokens#

Changelog#