YL ON DEM 808s
A producer's beat store, live-session hub and interview archive — instant licensing across tiers, in a strict black-and-white brand.
Please note: Built to demonstrate an idea — not commissioned by this business.
- My role
- Designer and developer.
- Built for
- Music & creative
- Current status
- A live demonstration site on a temporary address. Some content is placeholder pending the artist's sign-off.
- Built with
- Vite · React · TypeScript · Tailwind CSS
The story
What problem existed, and what we built.
The problem
A producer selling beats needs licensing to be instant and unambiguous. Any friction or confusion about what a tier includes loses the sale.
What I built
A catalogue where every beat licenses instantly across clearly-stated tiers, alongside the live sessions and interviews that build the reputation making the beats worth buying.
What it had to achieve
- Make licensing instant and unambiguous
The customer's experience
An artist previews a beat, picks a licence tier, and buys it without a conversation.
What customers can do
- Browse and preview the catalogue
- Instant licensing from basic through exclusive
- Live sessions and interview archive
The owner & staff experience
The catalogue and its tiers are managed in one place.
What the business can do
- Catalogue and licensing tier management
How it works
The system, explained without the jargon.
If a technical term is needed below, it's explained right where it appears.
The catalogue is the product
Everything else on the site exists to make the catalogue credible.
Design decisions
The choices that shaped it — and why.
Black and white only
A strict two-color brand. With no color to lean on, hierarchy has to come from typography and space — which is a good discipline.
Real credits, flagged placeholders
Everything sourced from public profiles is real. The three items that are placeholders are documented as needing sign-off before launch, rather than quietly shipped.
How it was built
Development process
- 1Built the store, live sessions and interview archive
- 2Added the video stage and fixed the licensing tiers on mobile
Where it stands
Status & outcome
Current status
A live demonstration site on a temporary address. Some content is placeholder pending the artist's sign-off.
Outcome
A demonstration build. Placeholder content is documented and awaiting the artist's sign-off.
Related projects
You might also want to see
Want something like this for your business?
Tell me how your days go and what you'd like to stop doing by hand. I'll tell you honestly what would help.