Brand

The lockup

Two files, never one recoloured: the lettering is black for a light ground and white for a dark one. The mark and the wordmark are one image on purpose — the space between them is part of the drawing, not something to set by hand.

Stacked instead of side by side, for a column rather than a row — this is what heads the sign-in pages in this app.

Two more of each, for two specific jobs

Adaptive. The switch happens inside the file, off prefers-color-scheme, so one tag covers both grounds. Reach for it where you cannot ship two files and a CSS rule — a README, someone else’s CMS. Not what this app uses, because what an <img> is told depends on the browser: Chromium hands the image the page’s own colour scheme, and one that hands it the operating system’s instead paints white lettering onto a white page for a reader who chose light.

lockup-horizontal-adaptive.svg7.3 KBCopy URL

lockup-vertical-adaptive.svg7.7 KBCopy URL

Mono. Every shape in currentColor, with the glyph knocked out of the tile rather than painted on it. Inline the SVG, or paint it through a CSS mask the way this specimen does — an <img> cannot inherit the colour of the text beside it.

lockup-horizontal-mono.svg7.3 KBCopy URL

lockup-vertical-mono.svg7.6 KBCopy URL

Mark, glyph, wordmark

The three pieces on their own, for the places a full lockup does not fit: an avatar, a favicon, a stamp on a corner.

Without a tile, in your own colour

These three carry no colour of their own: they are currentColor on a transparent ground, tinted here with this page’s own text colour.

Icons

Four tiles, one drawing. Which one you want depends entirely on what is going to round the corners, and on how dark the surface behind it is.

Rounded

Corners already rounded, corners transparent — in-app and on the web, where nothing will round it for you.

icon-rounded.svg2.7 KBCopy URL

Square

Full-bleed to the edge, for iOS, Android and macOS, which round it themselves.

icon-square.svg2.7 KBCopy URL

Light

Orange tile, dark glyph — for a dark interface, where the brown tile disappears into the page.

icon-light.svg2.7 KBCopy URL

Maskable

The glyph pulled inside the middle 60%, so Android can crop this to any shape and lose none of it.

icon-maskable.svg2.7 KBCopy URL

Favicons, at the size they are actually drawn

Below roughly 48 pixels the open book stops reading as a book and turns into three grey strokes. That is the whole reason the two small favicons are the note alone rather than the same mark scaled down.

16pxnote only

32pxnote only

48pxfull mark

96pxfull mark

Link previews and social

Ready-made cards: 1200×630 for a link preview, 1200×1200 for the places that want a square. Three grounds for the wide one, because a card sits on whatever the app showing it decides.

Palette

Five values, and only the first two are ever a background. Brown and Orange are this app’s own accent in its two themes, to the digit — the colour that marks a chord on a song sheet is the colour of the tile.

• Brown#97490FThe tile, the theme colour, and this app’s light-theme accent.
• Orange#F1B369The tile on a dark ground, and the dark-theme accent.
• Ink#231F20The glyph, when the tile under it is orange.
• Black#000000The lettering on a light ground.
• White#FFFFFFThe lettering on a dark ground, and the glyph on brown.

Using it

• Leave it room. Every viewBox is cropped to the ink, with no padding built in — clear space is yours to add. Half the height of the tile, on all four sides, is enough.
• Scale, never stretch. Set one dimension and let the other follow: 2336×344 for the horizontal lockup, 1688×804 for the vertical, 499×344 for the mark.
• Pick the file for the ground. Black lettering on light, white on dark, and neither one recoloured to bridge the gap. On a photograph or a mid-tone, use the mark on its own tile rather than the lockup.
• Small means the note. Under about 48 pixels the book closes up. Below that use note.svg or the 16 and 32 pixel favicons, which are drawn for it.
• Don’t rebuild it. No shadows, outlines, gradients or rotations, and no setting the wordmark next to the mark yourself — the lockup files exist so that spacing is never a decision anyone has to make twice.

Every file

The drop as delivered, read off the folder itself. There is no archive to download: link to the file you need.