SignalCount

Basics

SignalCount wraps a live number in muted brackets and paints only the digits with --pds-accent — [ 64 ] Networks Live.

Sizes

Three mono steps: sm (11), md (13), lg (14). The label stays muted at every size so the number carries the emphasis.

One accent per screen

In context the green digits are the only saturated colour on the view — every other element stays ink, secondary, or muted, so the count reads as *live*.

A signature tell — and the accent budget

SignalCount is the third and most disciplined of the signature tells: the one green number per screen. It renders a bracketed count where only the digits take --pds-accent — the brand's reserved signal colour.

The accent is a strict budget. Per the differentiation contract, --pds-accent is *never* a button fill and *never* a status colour; it marks focus rings, selected nav markers, and this single live number. If green appears more than once on a screen, the budget is blown and the signal stops meaning anything. Treat a SignalCount like the one indicator light on a piece of hardware — there is exactly one, and it earns its glow.

When to use it

Use SignalCount for the single most alive number on a view: open roles, networks live, messages per second, TVL. The optional label reads as muted mono beside the count.

For an *ordinal* — a step or card number — use BracketIndex, which is the same bracket shape but deliberately monochrome. For a *status* — active, degraded, error — use Badge with a tone tint; never encode status in the accent. And there should only ever be one SignalCount in a viewport; a second live number means one of them is really a BracketIndex or a plain Text.

Accessibility

• Renders an inline `span`; the brackets are `aria-hidden` so the value and label are announced cleanly.
• The accent digits meet contrast on the surface, but colour is not the only cue — the number and label always carry the meaning.
• Uses tabular figures so an updating count doesn't shift layout.

Mobile (React Native)

Preview. @protocore/pds-mobile ships the React Native sibling of SignalCount. It mirrors the web API where React Native allows; the package is a preview with no device-level QA yet, so pin it and expect small changes.

Import it from the mobile package (not @protocore/pds), inside a <PdsProvider> — there is no stylesheet, so style (a ViewStyle) replaces className and every value comes from the theme:

import { SignalCount } from "@protocore/pds-mobile";

Parity with web. THE accent number — the single reserved-accent moment on a screen.

• The accent comes from theme.colors.accent (the RN stand-in for --pds-accent); like web, never use it as a button fill or a status.

<SignalCount value={128} label="active" />