B-Emblem™

The wordmark

What a consuming site actually renders — composed here from the same files it vendors, so this page is a conformance test and not a picture of one.

B-Wordmark

The B-Emblem™ stands in for the B in Bank. It is the whole substitution: one letter, in one word.

Both states are real states. Static is Proof of Coordinate ℠ and beating is Proof of Humanity ℠ — so turning the beat off is not a degraded rendering, it is the other half of the pair. At rest the mark sits on the baseline and fills exactly what it occupies; the beat is the only thing that overflows it.

The emblem beats here because a wordmark is chrome. That is the canonical placement, not a decorative choice — .beating claims humans run this, which an institutional mark may say and a mark beside a person's name may not. The two proof-states are on the mark page.

B-Slogan

The slogan is the wordmark in a sentence, and the substitution does not change inside one.

  • Only the B in Bank. Never the T in Thank. The mark is bistable as a heart and a capital B; it can only stand in for the letter it already is.
  • The string is the site's, not the layer's. footer.slogan lives in each consumer's i18n because it is translated — អរគុណជាមួយ — and a shared package has no business owning a translated string. This layer owns the composition; i18n owns the words.
  • The ® rides on HeartBank. B-Wordmark and B-Slogan are internal short-names with no mark of their own; what carries the registration is HeartBank®, which is why the ® sits where it does and nowhere else.

The sister slogan

Thank sets it in motion; Re-Thank keeps it circulating. The sister slogan is the B-Slogan with one prefix, and it follows every rule above unchanged: the mark stands in for the B in Bank only, the words are the site's, and the ® rides on HeartBank.

Written with the wordmark, never as HeartBank in letters. Same form as the B-Slogan, for the same reason: the slogan is the wordmark in a sentence.

Dark mode

On both grounds

There is no dark wordmark and no light one. The letters take --ink, which the theme flips; the mark takes --emblem, which it does not. The variant is the cascade, which is why <img src> can never deliver it.

The mark keeps its color on both grounds, and that is a contrast question per color. Pick a gem in the swatches on the overview and watch both panels. Some gems lose contrast on one ground, and the color page explains why a site's accent is paired per theme.

Where there is no glyph

Monochrome print, a commit message, a plain-text email, a filename. The stand-in is a 3:

Heart3ank®

Not a heart character. A keeps the heart and drops the B, which is the half that makes the substitution legible at all — the whole claim of this mark is that it is both. A 3 carries both, and it is why the estate's internal shorthand for HeartBank® is H3.

A literal B remains the correct fallback where a 3 would read as a digit — a legal instrument, a form field, anything parsed by machine.

What a consuming site takes

Nothing on this page is a special asset. The wordmark is a composition of files a consumer already vendors, which is why there is no wordmark.svg to download and never will be.

File What it supplies
emblem/emblem.ts the mark, as a bare template function — the caller passes its own classes, which is what lets one call site beat and another not
css/tokens.css --emblem, the colour the mark inherits through currentColor
css/motion.css .beating — the cardiac rhythm, and the placement rule that governs it
your own i18n footer.slogan, and the two literals Heart and ank®

The call site

<h5 class="slogan">
    ${t("footer.slogan")} Heart${emblem("beating")}ank&reg;
</h5>

Inline, never <img src>. CSS cannot reach inside an <img>, so the fill has to be repeated at every call site — and a value that must be remembered is a value that drifts. Inline, the mark inherits --emblem and answers dark mode for free. The delivery mechanism is what makes the colour a property instead of a rule.

The ® above carries one extra <span> that the markup here does not. Every typeface draws ® at full cap height — right at body size, far too heavy at display size, where it competes with the mark it is there to defer to. The specimen scales it optically; a call site setting the wordmark at ~1rem needs none of that. The difference is the guidance, not a discrepancy.

The mark does not fill its own viewBox, and is not centred in it either. Its bounding box is 18.0828 × 18.0851 at (3.6824, 2.2349) inside 24 × 24 — it paints across 75.34% of its square and sits high and right in it. Pull the margin box in to the painted mark by its own four insets and three things follow at once: the footprint becomes the mark, the line box stops being driven by the larger box, and an <svg>'s baseline — its bottom margin edge — becomes the mark's own bottom, so a plain vertical-align: baseline seats it with no fudge factor.

Do it with the box, never transform: scale(). A CSS animation on transform overrides a non-animated one, so .beating would silently eat the correction — the same trap the 45° rotation is baked into the path coordinates to avoid.

A chrome lockup is a different problem. The mark beside a label in inline-flex with align-items: center — the header of this site — centres on the text's cap band instead of seating on the baseline, and needs none of this. Both are correct; do not make one look like the other.

Tailwind's preflight sets svg { display: block }, which drops the mark onto its own line inside a <p>. A call site in flowing text needs display: inline-block; vertical-align: -0.12em.

Who renders it

heartbank.ceo is the first — the first HeartBank® TLD to vendor this layer rather than carry its own copy of the mark.

Everything else in the estate still hand-assembles the wordmark around an <img>, and the glyph inside it is not this one. That is being retired site by site; this page is the target it is being retired toward.