B-Emblem™

The mark

One shape, two meanings, and a placement rule that decides which of them a surface is allowed to claim.

The mark

B-Emblem™

A universal heart rotated 45° clockwise. It is bistable — heart and capital B, both immediately apparent. Not a reveal like the FedEx arrow; there is no aha to wait for, which is why it survives down to a 16px favicon.

  • Inline it in the DOM. Never <img src> — CSS cannot reach inside an <img>, so the colour would have to be duplicated everywhere the mark appears.
  • The 45° rotation is baked into the path coordinates. It used to be a transform attribute, which is a trap: a CSS animation on transform overrides a non-animated one, so the first heartbeat silently un-rotates the mark and it stops reading as a B.
  • fill="currentColor", and the page sets --emblem. There is no second colour to keep in step.
  • Never re-apply a rotation, and never scale the mark inside an icon canvas to "fix" padding — the maskable safe area was measured against the mark at its shipped size.

Motion

The heartbeat is a signal, not decoration

Two unequal beats and then a long rest — systole, a weaker diastole, then most of the period at rest. That morphology is what a counterfeit gets wrong at any tempo, which is why the rhythm is the signature and the rate is not. A 72 BPM variant was built and rejected.

.beating — Proof of Humanity ℠
static — Proof of Coordinate ℠

Placement, not taste. .beating goes on chrome — a wordmark, a footer attribution, anything that says an institution stands behind this page. It goes never on a mark drawn beside somebody's name, where an unverified pulse would be claiming something about them.

Under prefers-reduced-motion: stop, and substitute nothing. The static mark is already a meaningful state, so there is no degradation to compensate for.