Brand system
The visual system: the mark, the logotype, the palette measured from the source artwork, typography, and the rules for using them.
The identity follows Concept 1 of the bMail brand book. Every value on this page was measured directly from the supplied logo artwork rather than transcribed, so what is documented here is what actually ships.
The mark
Four shapes: a top plate, two side flaps, and a chevron body. Together they read as a stacked envelope and echo the BNB Chain diamond. The flaps are what make it a mail mark rather than a generic token logo.
The logotype
The wordmark is drawn artwork, not set type. It is a geometric sans with a
single-storey a, which is why it cannot be reproduced by typing
"bMail" in the interface font.
The full lockup
The logotype sits at roughly 62% of the mark's height, separated by a gap of about one third of the mark's width. In the product this is expressed relatively, so the lockup holds together at any size.
Palette
Four colours. The yellow and the eerie black were sampled from the artwork files and match exactly; obsidian blue carries structure and is used for surfaces, borders and disabled states.
Usage weighting
| Colour | Role | Share of a typical screen |
|---|---|---|
| Eerie black | Ground. Nearly everything sits on it. | ~75% |
| White | Primary text and the mark on dark surfaces | ~15% |
| Obsidian blue | Cards, borders, dividers, inactive states | ~8% |
| Yellow | One accent per view: the primary action, the active state, the number that matters | ~2% |
Its power comes from scarcity. Two competing yellow elements in one view means neither reads as the action. If everything is highlighted, nothing is.
Typography
Rules
Do
Keep clear space around the mark equal to the height of its top plate. Use the single-colour marks. Let the ground be dark.
Do not
Recolour the mark outside the palette, add gradients or drop shadows to it, rotate it, outline it, or reconstruct the logotype by typing it.
Minimum sizes
The mark holds down to 16px. The lockup needs 96px of width before the logotype starts to close up; below that, use the mark alone.
No emoji
Not in the interface, not in headings, not as section markers. Icons are drawn, monochrome, and inherit their colour.
Motion
Motion is used to explain, not to decorate. Transitions run 150–260ms on
cubic-bezier(0.22, 1, 0.36, 1). Scroll-linked sequences use native
animation-timeline rather than scroll listeners, so they stay on the
compositor. Every animation is disabled under
prefers-reduced-motion.
Asset files
| File | Format | Use |
|---|---|---|
mark.svg | SVG, four addressable paths | The mark, inheriting currentColor |
wordmark.svg | SVG, single evenodd path | The logotype |
favicon.svg | SVG, locked to yellow | Browser tab |
icon-512.png | PNG, 524×524 | Touch icon and social preview |
icon-square.png / icon-round.png | PNG | Profile images |
The supplied artwork is raster. It was traced to vector so the mark stays sharp from a 16px favicon to a full-bleed hero, can be recoloured through CSS, and can have its four plates animated independently. The trace follows the sub-pixel edge of the original, so the geometry is the artwork's, not an approximation of it.