Chapter 01

The logo

A rounded square carrying two stacked strokes of a B — the rows of a ledger, drawn as one letter. The container wears the brand gradient; the glyph is always white. It's the one element that never changes.

The mark

One mark, every surface

Primaryfull color on light
Primary on darksame asset — no inversion needed
Construction: the container's corner radius is 25% of its width. The glyph is two stacked strokes with fully rounded right ends, the lower stroke one unit wider — set in white at 95% opacity. The gradient runs corner-to-corner at 135°, teal #008080 to aqua #0ddbd4. Never redraw these proportions.
The lockup

Mark + wordmark

The horizontal lockup pairs the mark with "BackOffice" set in Inter Bold. It's the default for headers, footers, documents, and co-branding.

BackOffice
On lightwordmark in Ink #171717
BackOffice
On darkwordmark in white
Wordmark spec: "BackOffice" — one word, capital B and O — in Inter Bold (700), letter-spacing −0.02em. Text size ≈ 64% of the mark's height; gap between mark and text ≈ 36% of the mark's height (the site header uses 28px mark / 18px text). The wordmark is never used without the mark, and never carries the gradient.
Breathing room

Clearspace & minimum sizes

¼ × height ¼ × height
Clearspace¼ of the mark's height, all sides
ContextMinimumNotes
Mark, digital16 pxBelow this, use the favicon set — it's tuned for tiny sizes.
Mark, print6 mmGradient prints CMYK; request vector, never screenshot it.
Lockup, digital20 px tallBelow this, drop the wordmark and use the mark alone.
App iconUse the supplied 192/512 px PNGs; don't re-export.
Variants

When color isn't an option

Engraving, embossing, single-color print, or a partner page that requires monochrome: use the ink or white variant. Everywhere else, use the full-color mark.

Mono · inkone-color print on light
Mono · whiteone-color on dark or photo
Misuse

Please don't

If it's not shown on this page, don't do it. The six most common offenses:

Don't stretch or squash it
Don't rotate or tilt it
Don't recolor it
Don't add effects or shadows
BackOffice
Don't reset the wordmark in another face
Don't place it on the gradient or busy imagery
Assets

Download the real files

Always start from these. Never screenshot the logo, trace it, or rebuild it from memory.

BackOffice mark, full color
Mark · full color
SVG · vector
Download
BackOffice mark, monochrome ink
Mark · mono ink
SVG · vector
Download
BackOffice mark, monochrome white
Mark · mono white
SVG · vector
Download
BackOffice app icon
App icon
PNG · 512 × 512
Download
BackOffice favicon
Favicon
SVG · vector
Download
BackOffice social share image
Social share card
PNG · 1200 × 630
Download