Brand style sheet

A taglet is a small tag. The brand is a tag hanging in a dark room, coloured like aged copper: warm, handled, a little playful, and honest about what it does.

Colour

Warm near-blacks keep the room dark so album art and one accent carry the colour. The accent is Patina, the blue-green that copper turns with age: classic, calm, and nothing like a streaming service’s brand. A second colour, Signal, appears only when something needs fixing.

Type

Three faces, each with one job. All are open-source and self-hosted, so nothing loads from a font service.

Icon and mark

A patina tag on a string, tipped 14 degrees as if it just swung. The eyelet is where the string goes in. Three lines on the tag stand for title, artists and album, the first one bold. The small mark in the bar is the same tag, simplified so it reads at 16 px.

Liquid Glass

Glass belongs to the control layer that floats above content: the top bar, the phone dock, menus and sheets. Content (track lists, fields, art) is never glass. The glass has something to bend because the current album’s art is blurred into the room behind it, so the bars take on the album’s colours.

Motion

• One idea: the tag on a string. It leans toward the pointer, swings when files arrive, and knocks once when an album becomes ready.
• Screens slide by direction (deeper goes right, back goes left) with the View Transitions API. The album cover morphs from the list into the album.
• Ease-out curves and springs that settle. No bounce for its own sake.
• Everything respects Reduce Motion.

Voice

• Plain words, sentence case, second person. Say what will happen: “Number in this order”, not “Fix”.
• Errors name the problem and the way out.
• Be specific about privacy. Say what stays on the device and what doesn’t.
• Don’t use Spotify’s name or marks as branding. Taglet works with Spotify; it isn’t part of it.