01 Type
Display / XL
Hero wordmark only. 144 / 128.
B44
Display / Monogram
The B44 monogram in the footer. 160 / 144.
B44
Display / L
Page titles, lineup names, big statements, the Info address. 88 / 88. One word must fit the column with 10% to spare.
Nacht 112
Heading / H3
Names in lists and cards, previous and next night. 32 / 40.
Kai Severin
Body / M
All running text. 16 / 26.
Doors 23:59. No photos on the dancefloor, no re-entry after 06:00, water at the bar is free all night.
Label / M
Navigation, buttons, section notes. 14 / 20.
Sat 31.10 → Sun 12:00
Label / S
Section heads (h2), meta, captions. 12 / 16.
Room 1 · Since 2019
Label / Strong
Emphasised labels: titles on the receipt, rule numbers. 14 / 20.
Rule 01 · Ask first
Rich Text / H1 to H6
Only inside CMS rich text (About, Bio), attached per tag on the rich text layer. H1 56, H2 40, H3 32, H4 24, H5 16, H6 14.
About the room
02 Colour
Neutral / Ink
#050505
Page background. Text on red.
Neutral / Paper
#EDEDED
Main text, button outlines, section lines, the receipt on Info.
Text / Muted
#9A9A9A
Secondary text: notes, captions, labels on facts. 7.4:1 on Ink.
Brand / Red
#FF1F1F
Signal only: the 44, rule numbers, the ticker, button hover, the 21+ stamp. Never a large block.
Brand / Signal
#4BF5FF
One use: the next-night dot in the hero.
Border / Subtle
Paper 20%
Lines between rows (nights, rules) and form fields.
03 Photos
01
Black and white or near. Dark, grainy, shot in the room: hands, smoke, light, booths, the floor before doors.
02
Faces only for residents, portraits in 4:5.
03
No bright stock, no colour casts, no posed crowds.
04
Every photo layer gets a Blob Invert layer on top and alt text that says what is in the picture.
05
New pages reuse the photos already in the project. Ask for new ones instead of sourcing them.
04 Components
Button / Primary
The one call to action: tickets, send, join. Paper outline, fills red on hover (Blob Fill). Variants: Default, Hover.
Button / Submit
Submit button of the contact form. The form switches the variants itself. Variants: Default, Hover, Pending, Success, Error.
Button / Badge
Template badge in the layout template (Remix, More templates). Not for page content.
List / Night
One row per night, bound to the Nights CMS. Default on the Nights page, Compact in the hero lineup. Featured adds the red dot.
List / Resident
One resident with portrait, bound to the Residents CMS. Portrait 4:5, negative under the cursor.
Section / Page Head
First section of every subpage: title in Display / L (h1) and an intro. Variants: Desktop, Tablet, Phone.
Section / House Rules
Five numbered rules with details. Lives on Home; reuse it where the rules belong, never rebuild it.
Section / Lineups CTA
Closing section of every page: heading, one line and two buttons. Keep it last.
Section / Nav
Navigation and metronome: the bar at the top of this page, placed on every page by the Site layout template. Four links and one button, all editable on the template. Variants: Desktop, Tablet, Phone, Phone Open.
05 Section grammar
Layout
Breakpoints 1200, 810, 390.
Section: full width, padding 160 / 128 / 96 top and bottom, 24 / 24 / 16 at the sides. Content in an Inner frame, max width 1440, gap 64 (48 on phone).
Section head: 1 px Paper line, label in Label / S as h2 on the left, a muted note on the right.
Spacing only from 4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 160. Radius 0. Lines, not cards.
No two sections in a row built the same way.
Motion
One ease for everything: 0.7, 0, 0.2, 1. Page transition: vertical blinds, 0.4 s.
Inner frames rise and fade in on scroll, softer on phone.
Display text grows out of a liquid blob and pulses on the beat. Running text never does.
Links melt into a red blob, buttons fill with a red pool, photos turn negative under the cursor.
One strobe per section edge. No smooth scroll. Everything stops for reduced motion.
Content
One h1 per page, h2 for section labels, h3 for items.
Nights and Residents live in the CMS. Repeated content on one page is a component.
Every text and link of a section component is a variable, bound in all variants.
Copy is short and factual, in the voice of the door: times, rules, names.
Contact: Konrad Makowski, konrad.design/contact.