Stage dark
The interface is a dark stage; the music and the musicians are the performers. Surfaces stay quiet so content can be loud.
Design system
Backstage
The design language behind Roadie. Named for the people who make the
show possible — it stays in the dark so the music can take the light.
The living tokens are in
src/styles/tokens.css; the rules live in docs/DESIGN_SYSTEM.md.
Limelight
One vivid accent — lime #C6F24E — used like a spotlight: record buttons, primary actions, live states. If everything glows, nothing does.
Rounded & human
Every shape descends from the logo's rounded bars: pills, capsules, soft cards. Nothing sharp, nothing corporate.
Motion with rhythm
Animation happens in musical time — short, eased, purposeful — and always steps aside for prefers-reduced-motion.
Mark
The bars
Eight rounded bars form an “R” — part equalizer, part road markings. The gradient runs cold to hot, cyan to lime: the journey from listening to playing.
Roadie
Roadie
Color
Stage, Limelight, Ink
Three families: Stage for surfaces, Limelight for the brand accent, Ink for text. The lime accent should never exceed roughly ten percent of any screen.
Stage — surfaces
--stage-0 #101210 Page background --stage-1 #161916 Raised surface --stage-2 #1D211D Card --stage-3 #242A24 Elevated / hover --line-1 #2A302A Hairline border --line-2 #3B443B Strong border Limelight — brand
--lime #C6F24E Limelight — primary accent --lime-bright #D9FF70 Hover / active --lime-deep #9CCB2E Pressed / borders --cyan #54BFEF Gradient start --mint #8EDBA9 Gradient middle --brand-gradient cyan → mint → lime Logo, gradient text Ink — text
--ink-hi #F4F7F0 Headings, primary text --ink-mid #B7C1B4 Body text --ink-low #7F897C Captions, labels --ink-on-lime #141712 Text on lime Typography
Space Grotesk & Inter
Space Grotesk carries headlines and UI labels — technical but warm, like a well-worn pedalboard. Inter handles body copy. Both are variable fonts, self-hosted.
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.
Caption FUNK · C-MAJOR · 125 BPM
Components
The kit
Buttons, chips and cards — every piece descended from the same rounded bar.
Buttons
Primary is Limelight with dark ink — reserved for the one action that matters. Ghost handles everything else.
Chips
Guitar Funk Lisbon 125 BPM C-major
Instruments, genres, cities, keys — the metadata of music, always in pills. Lit chips mark live or musical state.
Musician card
Amelia Cabal
People are the core object at Roadie: face, sound, place — then one action.
Track player
2:47
Waveforms are the brand's second voice — always rounded bars, always Limelight on play.