Count badge

The outlined pill that says how many, next to a section heading, a tab or a column. Primitive .acrm-count in apps/web/src/ds.css; the app wraps it in apps/web/src/components/CountBadge.tsx ({ count, tone }).

It unified what used to be a scoped .cnt in a handful of places — .acrm-tab .cnt, the record rail, section blocks (F246). Do not write a new one.

When to use

• A count beside a heading, a tab label, a column header or a nav item.
• A count the user must clear — then with accent (unread).

When not to use

• An attribute or a state — that is pill.
• A number that is a value rather than a quantity of items (an amount, a percentage) — that is text.
• A count of zero — it is not drawn at all; "no tasks" is an empty-state.
• A count in a GROUP heading inside a list (timeline groups, task groups, Activity days — .tl-grp .cnt) — that is a bare number, 600 11px, --fg-muted, no pill. A group heading is not a section title; a pill in every group would thicken the list (AD, 27 Sep 2026).
• A corner indicator over an icon (notification bell) — that is a separate overlay badge, not a CountBadge.
• A second shade of the active count (solid --accent + white text): the active count has ONE look, accent = accent tint + accent ink.
• accent on a count that is not something to clear — e.g. the number of conditions on a filter/control toggle (.sgb-ctl) stays NEUTRAL; an accent pill on the toggle's own accent-tint "on" background would vanish (AD, 27 Sep 2026).

Anatomy

• span.acrm-count with an optional .accent.
• Geometry: height 16px, padding 0 var(--sp-2), border-radius: var(--radius-pill), background: --surface-75, 1px --border, font: 600 11px with tabular-nums.
• .accent — --accent-tint ground, --accent-ink text, no border. (An .alert variant existed until 5 Sep 2026; it was deleted — nothing ever called it and white on --critical is 3.91:1, below AA on the loudest variant.)
• The content may be a short phrase, not only a number (2 nové, 9+, 3 chyby), as long as it stays short enough not to read as a label.

Measured: 16px tall at every content length (21px wide for one digit, 28 for two, 35 for three).

Best practices

Do

• Keep the default outlined tone unless the count is a call to act.
• Let it sit in the flow next to the label, so removing it at zero does not shift anything.
• Cap a badge that can grow without bound (9+).
• Use tabular-nums as the sheet does, so a changing count does not jitter.

Don't

• Draw a zero — hide the whole badge, and hide the tab's .cnt too.
• Reach for a red ground to mark a problem count; say it in the word beside the badge instead.
• Put a count in a pill; the two are different primitives with different geometry.
• Re-declare the geometry in a page sheet.

Content

• A number, or a number plus one word (2 nové).
• No parentheses, no ks, no thousands separator inside a badge.

Related

• pill — attributes and states.
• section-block, tabs, sidebar-nav-item, notifications — the hosts.
• Stories: components--count-badge--default, --variants, --states, --composition.

Known drift

ds/section-block.css re-declares the geometry one pixel wider than ds.css (min-width: 18px vs none, height 17 vs 16) to match the DS card for the record rail. Squaring the two is a separate change with screenshots across Board, NotifBell, calls, segments and task types (noted in the sheet itself, F246).