Reference
The mark, and how to use it.
Everything on this page is generated from one file, src/lib/brand.mjs. Nothing is hand-exported, so nothing can drift.
The name
The name is B♭ Studio, written with U+266D, the flat sign. The name is a pitch.
Bb Studio is the fallback for places that can’t render the glyph: the page title, a filename, a user agent. Never “BB Studio.” Bb is B-flat, and 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 instead of typed as a character, because U+266D isn’t in Inter and every operating system would otherwise render a slightly different one.
The mark
Use the full stave above 64px, and the flat alone below that, 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 the note B♭, notated, and not a flat decorating a stave.
The stave lines are cut around the glyph rather than hidden behind a halo of background color, 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 recolor the flat. Use 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 or outline the mark, or set the wordmark in another typeface.
- Do not place the tiled mark on a photograph. Use the untiled mark, or the mono version.
Palette
Manuscript paper and brass. 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, with tight tracking at 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 with npm run brand. Editing one of them by hand is how an icon set ends up disagreeing 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 color, takescurrentColorlogo-lockup.svg/-light/-stacked— mark and wordmark, with the font embeddedflat.svg— the glyph alone