Help · Brand kit
Punk zine meets record-store counter. Every logo, icon, color and sample file for Collectors' Tune Tracker, in dark and light. Grab what you need, or take the whole crate.
Hand-made, cut-and-paste, a little loud. Photocopied flyers, ransom-note letters, gaffer tape, spray paint and the grinning-dead XX face. Both modes are zine: dark is the record shop after hours, light is a fresh photocopy on cream stock.
We are
We are not
Name: Collectors' Tune Tracker, with the plural possessive apostrophe (it's a place for collectors). Short form CTT. Tagline: Every pressing. Every scuff. Every story.
All marks are vector, with every letter converted to outlines, so they look the same everywhere with no fonts installed. Each comes in a dark and a light version and three accent colorways. Use the dark version on charcoal or black, and the light version on cream or paper. On light paper the accents switch to their deep variants so they keep their contrast.
The loud one. Ransom-note letters, a vinyl O, a Dymo EST. 2024 and the XX face. Heroes, the marketing site, splash screens, merch, social.
| Version | Teal | Signal | Mustard |
|---|---|---|---|
| For dark backgrounds | SVG · PNG | SVG · PNG | SVG · PNG |
| For light backgrounds | SVG · PNG | SVG · PNG | SVG · PNG |
The friendly one. A record sliding out of a hand-cut sleeve, XX eyes peeking off the label, CTT in ransom tiles. Nav logo, avatars, app icon art.
| Version | Teal | Signal | Mustard |
|---|---|---|---|
| For dark backgrounds | SVG · PNG | SVG · PNG | SVG · PNG |
| For light backgrounds | SVG · PNG | SVG · PNG | SVG · PNG |
Badge plus the script name. Email headers, docs, invoices, anywhere a wide strip fits better than a square.
| Version | Teal | Signal | Mustard |
|---|---|---|---|
| For dark backgrounds | SVG · PNG | SVG · PNG | SVG · PNG |
| For light backgrounds | SVG · PNG | SVG · PNG | SVG · PNG |
The utilitarian one and the troublemaker. The rubber-stamped CTT block goes on loading screens, docs, packing slips and the API. The XX face goes on avatars without a photo, error and 404 pages, “lent out” badges and stickers. Both are single-color: pick the ink that suits the paper.
App icons put the sleeve badge on a full-bleed square, with the art kept inside the center 80% so it survives round and squircle masks (they work as maskable PWA icons too). Below 48px the badge's lettering turns to mush, so favicons use a stripped-down glyph: the sleeve, the record and one accent rule.
Every color comes from the original logo files. The brand defaults to dark. Teal, signal and mustard are made for charcoal; on cream paper always use their deep variants. Bright accents on cream fail contrast (teal 2.4:1, mustard 1.5:1), so never put them there.
--ctt-charcoalBack Room background. The shop at night.--ctt-inkDeepest surfaces, letterboxing.--ctt-smokeRaised surfaces and cards on dark.--ctt-creamText on dark. Paper in light themes.--ctt-tealPrimary accent on dark: links, focus, actions.--ctt-signalHot accent on dark: highlights, wants, danger.--ctt-mustardWarm accent on dark: ratings, value, new.--ctt-teal-deepTeal for light paper (5.4:1 on cream).--ctt-signal-deepSignal for light paper (5.1:1 on cream).--ctt-mustard-deepMustard for light paper (5.6:1 on cream).The record shop after hours. Sleeve-badge teal on charcoal.
#1C191A#2F2C2D#141213#F6E7D8#A39A92#07A5C3#F14902#F4B324#F6E7D8#07A5C3#07A5C3Pure black wall, signal-orange XX face, drips and hard offset shadows.
#000000#161314#000000#F6E7D8#A8A098#F14902#F4B324#07A5C3#F6E7D8#F14902#F4B324Smoke-grey low ceiling, mustard house lights, warm and loud.
#2F2C2D#3B3738#242122#F6E7D8#B8AEA5#F4B324#F14902#07A5C3#F4B324#F6E7D8#F4B324Two-ink riso on black stock: teal and fluoro orange, out of register.
#121011#1F1B1C#0A0909#F6E7D8#A69D95#07A5C3#FF5A1F#F4B324#07A5C3#FF5A1F#FF5A1FMonochrome photocopy. Toner and paper, one orange stamp for danger.
#0B0A0A#1A1818#000000#F2F0EB#A3A09A#F2F0EB#F14902#C9C5BD#F2F0EB#0B0A0A#F2F0EBCream stock, charcoal ink, deep-teal accents.
#F6E7D8#FBF3EA#EBDCCB#1C191A#5A5456#05667A#B23600#7A5500#1C191A#FBF3EA#05667ACold copy-shop paper, black toner, one red rubber stamp.
#EEECE6#F8F7F3#DEDBD3#111010#55524E#111010#B8300A#55524E#111010#F8F7F3#B8300AWarm grey pulp, serif headlines, mustard highlighter swipes.
#E5DDCF#EFE9DE#D6CCBB#1C191A#57514C#1C191A#A33200#F4B324#F4B324#1C191A#A33200Cream stock with teal and orange riso inks, slightly misregistered.
#F6E7D8#FBF3EA#EDDCCA#1C191A#5A5456#05667A#B23600#07A5C3#07A5C3#F14902#B23600Mustard flyer on a telephone pole. Charcoal ink, cream paste-ups.
#F4B324#F6E7D8#E0A21C#1C191A#4A3A12#1C191A#8F2B00#F14902#1C191A#F6E7D8#1C191APalette files
The source of truth is packages/ui/src/themes.css. CI checks every theme for WCAG AA contrast. Pick your own themes in Appearance.
Three voices from the logos, plus a mono for the numbers collectors read character by character. All open-license Google Fonts.
2,417 records
Page titles, big numbers. Uppercase. 2rem and up.Collectors'
Sparingly: collection names, empty-state headlines. Never below 20px, never on controls.Tune Tracker
Eyebrows, labels, tab bars, metadata keys.Talk like the person behind the counter who's genuinely excited about your find.
All running text, forms, tables.FACT 10 A-1 · PORKY PRIME CUT
Matrix and runout strings, catalog numbers, barcodes.Heroes, collection covers, public shelves, empty states only. ~24 characters max.
Do
Don't
The brand in use, ready to adapt. Every sample is an SVG you can edit, plus a PNG ready to post.
brand/scripts/build_brand.py, so new sizes and colorways are a re-run away. Or grab the whole kit.