01 / 08 · Music festival
Nocturne
A three-night festival of electronic and experimental music in Rotterdam’s old port warehouses: 41 artists on three stages, tickets as the one job.
- Direction
- 07 · Institutional (culture)
- Register
- Loud
- Default look
- 0 of 6 traits
- Length
- 11.1 screens
Audited0 fail · 1 warnOpen the live build
The spine
Written by the agent before any code, and kept at the top of the build’s HTML.
- DIRECTION
- 7 Institutional (culture) — a festival is a programme to scan (nights, stages, set times, prices), so it gets the institutional system (semantic colour per stage, operational truth as type, visible a11y), played loud for a scene audience.
- REGISTER
- Loud — the bold device is colour as ground: every stage owns one saturated field, and the stage names run poster-scale.
- AXES
- ground colour-block system (black + HAL vermilion / SILO chartreuse / DOK ultramarine + bone for action) · type genre condensed gothic caps (Big Shoulders Display 800, 100–314px) · image medium type poster / kinetic type (the line-up IS the image) · composition banded (full-bleed bands per section) · motion feel kinetic type.
- DEFAULT LOOK
- 0/6 matched (black ground, no mono labels, 2px poster rules not hairlines, no line drawing, colour is the ground, heavy display) → DIFFERENT FROM DEFAULT BY: ground, type genre, image medium, composition, motion.
- MOTIF
- the stage key, three blocks in fixed order HAL / SILO / DOK. 1 hero key bar (navigation into the stages) · 2 line-up colour code + stage filter · 3 day-programme stage squares · 4 ticket coverage bars (the 04–06 DOK segment is the Night Owl) · 5 marquee separators + favicon.
- TYPE
- display Big Shoulders Display 800 · text Archivo 400/600/700 (labels in Archivo at 82% width, caps +0.1em) · no mono.
- PALETTE
- ground #0D0C0B · ink bone #EFEAE0 (68% / 60% tiers) · HAL #FF4B1F (ink #1C0700) · SILO #D4F531 (ink #1A2000) · DOK #2E3CF5 (ink #EEF0FF; #8C97FF as text on black) · bone = the action colour (buttons, tickets field, marquee). Each hue means one stage and nothing else.
- HERO
- poster — letter-spread NOCTURNE across the full measure, a rotating "loud / strange / slow" line, buy CTA, live doors countdown, and the three-colour stage key as the bottom edge of the first viewport.
- IMAGERY
- type poster / kinetic type; no photography. The line-up is set as the festival poster.
- MOTION
- house ease cubic-bezier(.16,1,.3,1) · UI 150–240ms · builds 1400ms · primitives: letter-spread build, rotating word, 200px marquee, live countdown. A global "Pause motion" control; reduced motion shows final states.
- SIGNATURES
- #28 letter-spread title · #19 rotating word · #30 marquee at 200px (+ a live countdown).
- CONVERSION
- Buy tickets — header (always), hero primary, each pass (3), giant ticket marquee, footer.
- VOICE
- "Music for the loud hours." · "Peak-time techno under the crane rails." · "Buy tickets. Doors Friday at 20:00."
Palette
#0D0C0B#EFEAE0#FF4B1F#1C0700#D4F531#1A2000
Every screen
01 / 08 · drag or scroll
On a phone
390 pixels wide. Recomposed, not shrunk.
