07 / 08 · Podcast studio
On Air
A four-person Manchester studio that takes a founder from first recording to a launched show: a six-week Pilot or a monthly Season. No clients, quotes or listener numbers to show yet.
- Direction
- 09 · Playful System (studio / service variant)
- Register
- Loud
- Default look
- 1 of 6 traits
- Length
- 8.4 screens
Audited0 fail · 0 warnOpen the live build
The spine
Written by the agent before any code, and kept at the top of the build’s HTML.
- DIRECTION
- 9 Playful System (studio / service variant) — founders and marketing teams buying "a show that doesn't sound like everyone else's" need the page itself to prove personality; a broadcast-studio world does that, a quiet portfolio would not.
- REGISTER
- Loud — colour is the ground (signal-red "on air" field), poster type at ~150px, studio objects on springs. Bold device: the ON AIR tally lamp.
- AXES
- ground colour-block system (signal red = on air · night = in the studio · tape cream = notes) · type genre heavy condensed display + one marker word (mixed font) · image medium objects in CSS/SVG (lamp, mixing-desk channel strips, cassette J-cards, audiogram monitor, foam-wedge map) · composition banded · motion springy and characterful (critically damped on big surfaces)
- DEFAULT LOOK
- default-look check 0/6 matched → DIFFERENT FROM DEFAULT BY: ground, type genre, image medium, composition, motion (no mono labels, no hairline spec bands, no line-drawing hero)
- MOTIF
- the ON AIR tally lamp, 5 uses, each a new role/scale: 1 nav wordmark lit lamp (brand, 28px) · 2 hero monitor tally lights while the trailer plays (status, 10px) · 3 running-order stations are lamps that light in sequence as the cable draws (progress, 28px) · 4 finale: giant ON AIR sign flicks on (the ask, ~16vw) · 5 footer studio lamp, live Manchester time (live truth)
- TYPE
- 4 role-locked faces (techniques §66, Loud only): statement Bricolage Grotesque 600, wdth 75 → headings ONLY body Instrument Sans 400/500 → reading text, labels, buttons LED Doto 800 → numbers ONLY: prices, timecodes, channel numbers, week marks, clock marker Permanent Marker → ONE word per heading, accent red, on a masking-tape strip
- PALETTE
- field red #FF5A36 · ink-on-red #260803 (6.0:1) · ink-2 on red = 82% (4.7:1, mid-tone rule) · night #16132B · cream ink #F8EDE0 · tape #F3E6D3 · hairline = ink @12–16% · accent #C42A1B → ONLY the marker word and the lamp glass (#D8341F)
- HERO
- H18 variant (illustrated world with a framed film) — red field; poster h1 left with one taped marker word; framed audiogram monitor playing the trailer (captions-only) right; "Read the trailer" disclosure
- IMAGERY
- objects in CSS/SVG (no photos, no stock)
- MOTION
- house ease cubic-bezier(.16,1,.3,1) · UI 240ms · reveal 850ms · primitives: rise (no blur) · --spring-ui faders · --spring-pop stickers + cassette · path draw (stroke-dashoffset) · lamp flicker (finite)
- SIGNATURES
- §61 inline UI tokens in copy · §62 pricing as an object (cassette J-cards) · §64 process as a journey map (cable across a foam-wedge landscape). System rules also applied: §63 naming, §66 voices, §67 transcript.
- CONVERSION
- "Book a free format call" — nav, hero, Pilot J-card, Season J-card, finale, footer
- VOICE
- hero "Sound like nobody else." · section "Five channels, one mix." · finale "Let's get your show on air." PLACEHOLDERS (no real clients, quotes or listener numbers exist — all marked on the page): P1 trailer audio (captions-only cut) · P2–P4 three client shows on "the shelf" · P5 one host quote · P6 booking link / email (studio@onair.example) · P7 studio street address · P8 studio hours (assumed Mon–Fri 9–6)
Palette
#FF5A36#260803#16132B#F8EDE0#F3E6D3#C42A1B
Every screen
01 / 08 · drag or scroll
On a phone
390 pixels wide. Recomposed, not shrunk.
