Decks - Brutalist DJ Landing Page Template
Decks is a one-page brutalist DJ landing page built on a bento grid layout. It opens with a Before/After Slider that transforms a dead venue into a packed crowd. Every cell in the grid is a proof point: an embedded mix, press logos, a muted crowd clip, and a booking form that filters serious inquiries from casual visitors.
by Rocket studio
Quick summary
Decks is a single-page DJ portfolio and mix landing page with a bold brutalist aesthetic. The bento grid layout turns your career into a gallery that bookers can wander freely. A fixed booking bar stays on screen throughout, making it easy for festival bookers, club promoters, and brand event coordinators to reach out the moment they are ready.
Who this template is for
This template is built for working DJs who need a booking-ready web presence. It speaks directly to the professionals who get hired, not the hobbyists who just want a profile.
- DJs pitching to festival bookers, club promoters, and brand event coordinators
- Artists who want their mixes, press coverage, and live energy on one page
- Performers who receive serious booking inquiries and need a form that filters genuine requests
What problem this template solves
Most DJ portfolios look like a résumé. They list credits without conveying atmosphere. Bookers scanning fifty portfolios before lunch need to feel the room before they book the act.
- A static page fails to communicate energy, crowd response, or set quality
- Generic contact forms attract spam and casual interest rather than real booking leads
- Scattered social profiles make it hard for a promoter to assess the act in one sitting
What you get with this template
You get a complete one-page layout designed specifically for DJ portfolio and mix page use cases. Every component is paired to a real booker need.
- A viewport-filling Before/After Slider that shows a venue empty versus packed mid-set
- A bento grid with cells for an embedded mix, press logos, a muted crowd video, and a typeset track list
- A fixed bottom booking bar with a minimal form that asks for event type, date, venue capacity, and a free-text room description
Feature list
This template includes six purpose-built components. Each one earns its place on the page.
Before/After Venue Slider
The header splits the viewport in half. A draggable brutalist steel-textured handle lets visitors pull a desaturated empty venue into a fully lit, crowd-packed mid-set scene. The stamp headline "THIS IS WHAT I DO TO A ROOM" runs across both states in monospaced caps.
Bento Grid Portfolio Layout
The main body is an exhibition-style bento grid. Cells vary in size and shape so the layout feels curated, not templated. Bookers can move through cells in any order, sampling proof points the way they would walk through a gallery.
Embedded Mix with Waveform Visualizer
One oversized bento cell holds the embedded mix alongside a custom waveform visualizer. This lets a booker sample the set quality directly on the page without leaving to a third-party platform.
Press Logo Column
A tall narrow cell stacks press and media logos vertically, styled like a concrete column. It communicates credibility at a glance without needing a paragraph of explanation.
Muted Crowd Autoplay Cell
A square bento cell autoplays a muted crowd clip. The visual motion communicates live energy without interrupting any audio already playing from the mix cell.
Fixed Bottom Booking Bar
A bottom bar slides up on scroll and stays fixed. Clicking it expands a minimal booking form with four fields: event type selector, date picker, venue capacity dropdown, and a free-text field labeled "Describe the room." No pricing or packages appear, which keeps the form focused on serious inquiries.
Page sections overview
| Section | Purpose |
|---|---|
| Before/After Slider Header | Contrast empty venue with packed mid-set crowd |
| Monospaced Stamp Headline | Anchor the DJ's core value statement |
| Embedded Mix Cell | Let bookers sample set quality directly |
| Press Logos Column | Stack media credibility markers vertically |
| Muted Crowd Clip | Show live energy through ambient autoplay video |
| Track List Poster | Display set structure in brutalist typographic style |
| Fixed Booking Bar | Surface the booking form on scroll throughout the page |
| Booking Inquiry Form | Collect event type, date, capacity, and room description |
Design & branding system
The visual identity follows a Monochrome Steel color system built on four deliberate tones. There is no warmth in this palette and that is intentional.
- Forge black (#0D0D0D) dominates the background, cold-rolled steel (#3A3A3C) surfaces cards and section dividers, industrial silver (#B0B0B4) carries body text and secondary labels, and arc-weld white (#F0F0F0) hits only on headlines and hover states
- Typography uses monospaced fonts throughout, reinforcing the brutalist industrial tone and making headlines read like stamps on concrete
- The overall aesthetic references a warehouse at 2 a.m.: functional, load-tested surfaces with no decorative softening
Mobile & speed optimization
The bento grid and fixed booking bar are structured to function across screen sizes. The layout adapts without losing the visual weight that defines the brutalist identity.
- Cell sizes and proportions are designed to reflow on smaller screens while keeping the grid hierarchy readable
- The Before/After Slider handle interaction is built for touch drag as well as mouse drag
- The fixed booking bar remains accessible at the bottom of the viewport on mobile, keeping the call to action within reach at all times
How this template helps you convert
The page is engineered around a single conversion goal: turning a browsing booker into a submitted inquiry. Every design decision supports that path.
- The Before/After Slider creates an immediate emotional argument for booking. A booker sees the transformation before they read a single word of copy.
- The bento grid delivers proof points non-linearly, so each booker finds the evidence they care about fastest, whether that is press coverage, a live clip, or the mix itself.
- The fixed booking form uses specific fields like venue capacity and room description to filter out casual contacts and surface only genuine leads.
Other information about this template
This template suits DJs who operate at a professional level and need a landing page that communicates that seriousness to the people who hire them. A few additional points worth noting:
- The Bold Brutalist theme and Gallery Walk creative direction are intentional choices, not just visual preferences. They position the DJ as a serious craft practitioner rather than a content creator.
- The form deliberately excludes pricing and packages. This creates a higher-intent inquiry funnel and positions the DJ to negotiate directly.
- The template is built as a single-page layout, which keeps the visitor focused and eliminates navigation drop-off between pages.
- This layout is well suited to portfolio platforms and personal domains where the DJ controls the full brand experience from first impression to booking form.




Theme
Bold Brutalist
Creative direction
Gallery Walk
Color system
Monochrome Steel
Style
Bento Grid
Direction
Lead Generation
Page Sections
Before/after Venue Slider Header
Bento Grid Portfolio Layout
Embedded Mix with Waveform Visualizer
Muted Crowd Autoplay Cell
Fixed Bottom Booking Bar
Brutalist Monochrome Visual System
Related questions
Can I replace the venue images in the Before/After Slider with my own photos?
Does the booking form connect to a calendar or email system?
Can I add my own mix, or does the embed support only one player?
Is this template suitable if I also do live production or hybrid sets?
Can I edit the booking form fields to match my own inquiry process?