Paper & ink
Built on true neutrals — a warm near-black and a warm off-white, never pure #000 or #FFF. The neutrals carry the layout; everything else is quiet by default.
Design system
Liner notes
The design language behind Roadie. Named for the printed sleeve that
credits everyone who made the record — it keeps the type honest, the
colour scarce, and the musicians centre stage. Tokens live in src/styles/tokens.css; the rulebook is docs/DESIGN_SYSTEM.md.
Colour as punctuation
Three accents, tuned to the same brightness. Green leads, orange calls attention, purple supports. Roughly 60 / 30 / 10 neutral to colour — bold, never chaotic.
Editorial & flat
No gradients, drop shadows or glow. Flat surfaces, hairline borders, rounded 8–12px corners. High contrast, generous whitespace, confident restraint.
Two typefaces, sentence case
A grotesk for titles (Stack Sans Headline), a humanist sans for text (Inter). Sentence case throughout, ~1.6 line-height. Metadata reads in plain type — never a mono, never all-caps.
Mark
The bars — black and white.
Eight rounded bars form an “R” — part equalizer, part road markings. The mark is strictly monochrome: paper on ink, ink on paper. Colour stays in the interface, never in the logo.
Roadie
Roadie
Colour
Neutrals carry, accents punctuate.
Two families of neutral — ink for surfaces, paper for text — plus three accents. When text sits on an accent fill it takes that accent’s deep shade, never black.
Ink — surfaces
--ink #100F0E Page background --surface-1 #171613 Raised surface --surface-2 #1D1C18 Card --surface-3 #26241F Elevated / hover --line #2B2B29 Hairline border --line-strong #3A3A36 Strong border Paper — text
--paper #FAFAF6 Headings, primary text --text-mid #A8A8A0 Body text --text-low #6E6E68 Captions, metadata Accents — punctuation
Green #35D67C
Primary action
Buttons, links, live and playing states.
#D8F6E6 tint
#0E7A44 deep
Orange #FF9F1C
Attention
Badges, notifications, the record state.
#FFEACB tint
#9E5400 deep
Purple #9D4EDD
Secondary emphasis
Bands, tags, quiet second highlights.
#ECDDFA tint
#5B2A9E deep
Typography
Stack Sans Headline & Inter.
Titles are set in Stack Sans Headline — a grotesk with a bit more weight and character. Body, labels and metadata are Inter. Sentence case throughout. A monospace appears only for true technical detail like the hex codes above — never for metadata.
Hero Make music together.
Heading 1 Find your people.
Heading 2 A profile that sounds like you.
Body large Roadie is the social home for musicians.
Body Search musicians by instrument, genre and city — or let Roadie surface players who fit your sound.
Metadata
Components
The kit.
Buttons, chips, badges and cards — flat fills, hairline borders, rounded corners, real photos of real people.
Buttons
Primary is green with its own deep-green ink. Ghost handles everything else. Reserve the fill for the one action that matters.
Chips & badges
Guitar Funk Band Live
Instruments, genres, cities and keys live in chips — sentence case, plain type. The orange badge is for attention only.
Musician card
Amelia Cabal
People are the core object at Roadie: a real face, their sound, their place — then one action.
Track player
2:47
Waveforms are the brand’s second voice — rounded bars, green on the part that has already played.