Reference
The mark, and how to use it.
Everything on this page is generated from one file — src/lib/brand.mjs. Nothing here is hand-exported, so nothing here can drift.
The name
It is B♭ Studio — with U+266D, the actual flat sign. The name is a pitch.
Bb Studio is the fallback for places that cannot render the glyph: the page title, a filename, a user agent. Never “BB Studio” — Bb is B-flat; BB is a typo with a capital letter in it. Never uppercased, and never “B-Flat Studio”.
On this site the flat is drawn as a path rather than typed as a character, because U+266D is not in Inter and every operating system would otherwise render a slightly different one.
The mark
Full stave above 64px; the flat alone below it, where stave lines are thinner than a pixel.
On ink
On paper
The flat sits on the middle line, because the middle line of a treble stave is B. The logo is not a flat decorating a stave — it is the note B♭, notated.
The stave lines are cut around the glyph rather than hidden behind a halo of background colour, so the mark carries no assumption about what is behind it. One file works on a dark site, a light letterhead and somebody else’s slide.
Clear space and don’ts
- Leave clear space of at least the height of the flat on every side.
- Do not recolour the flat. Brass on ink, or brass-ink on paper.
- Do not add the stave back at small sizes — use the simplified mark.
- Do not stretch, rotate, outline, or set the wordmark in another face.
- Do not place the tiled mark on a photograph. Use the untiled mark, or the mono version.
Palette
Manuscript paper and brass. Deliberately not the app’s #4f8cff, which is a placeholder every studio overrides.
- Ink
#14161bDark ground - Paper
#faf8f4Light ground - Brass
#c08a2eThe accent at rest - Brass lit
#e2ab48On dark — 9.1:1 on Ink - Brass ink
#7d5a10Text weight on Paper — 6.0:1 - Slate
#5c6672Secondary text - Good
#3fb950Paid, attended, approved - Warn
#d29922Due, pending, skipped - Bad
#f85149Overdue, clash, failed
Type
Inter, self-hosted, Latin subset. One family, tight tracking on display sizes.
- B Studio
--step-6· Page headline - B Studio
--step-4· Section heading - B Studio
--step-2· Lede, subhead - B Studio
--step-0· Body - B Studio
--step--1· Table, caption, badge
Files
Everything lives in src/assets/brand/ and is regenerated withnpm run brand. Editing one of them by hand is how an icon set stops agreeing with itself.
logo-mark.svg— the mark on inklogo-mark-light.svg— the mark on paperlogo-mark-plain.svg— no tile, for arbitrary backgroundslogo-mark-simplified.svg— flat only, below 48pxlogo-mono.svg— one colour, takescurrentColorlogo-lockup.svg/-light/-stacked— mark and wordmark, with the font embeddedflat.svg— the glyph alone