Prompt

“An opera house announcing its winter season: grand, dramatic, crimson and black, programme-led.”

The agent invented Ravensgate Opera House - A London producing house announces five winter productions, forty-five nights, with prices set by the night.

Toolchain: pure + inspo
Register: dark mode
Build effort: 12+ MCP calls · 5 sites studied
Self-score: 7.5 / 10

The page it shipped - live, scaledOpen full page ↗

The move

The fold is a stage. The right 44% of the hero is a house curtain drawn entirely in CSS (a five-stop repeating gradient for the velvet folds, a radial vignette for the footlight shadow, an SVG scalloped pelmet along the top and a cream stage lip along the bottom), and the headline runs across the seam so its last words, "lit red.", land on the velvet, the Lamborghini move of letting the visual serve as a typographic baseline. Below it the page stays programme-led the way the Barbican fold is: five production rows with number, title, composer, dates, category and lowest price, each opening to a synopsis and creative team, then a four-month calendar where first nights are the only solid crimson marks, then a price table that switches between first nights, standard nights and family matinees.

What Inspo gave it

The captures it studied, and exactly what each one contributed.

Lamborghini - The headline physically crossing into the hero visual. Ravensgate's display line runs left to right and its last words ("lit red.") land on the CSS curtain panel, so text and visual share one composition instead of sitting in two columns.
Metmuseum - Crisp white serif floating directly on a dark, textured ground with no scrim, plus the "Now on view / View all" strip that turns the fold into a listing. The programme section head with a right-aligned meta line is that strip.
Barbican Org Uk - The one cultural site in the archive whose fold is a programme CTA ("Discover our summer programme") followed by a "This week" listing. It set the page order: hero, programme, then everything else in service of booking.
Tana Inc - Black void hero, elegant serif display, one pale pill as the only anchor. Confirmed that a dark opera page does not need photography to feel grand; type and one accent carry it.
Redis - Pure typographic lockup on a dark ground with the red CTA as the sole chromatic event. Taken as permission to keep crimson to the curtain, the CTA and the first-night markers rather than flooding the page.

How it was built

The actual MCP calls, in order.

recommend
```
brief "An opera house announcing its winter season...", mode dark, detail full
```
Picked Marquee Hero; evidence packet said 79% grotesk-sans display in the neighbourhood, 38% warm accent, mid/dark paper split 50/50. Exemplars standardvision-com, deathandcompany-com, generalcondition-com, phantom-land, lithic-com. Took the position against the sans gravity (serif display) and with the warm accent.
search_screens
```
query "theatre opera concert season programme listing dark dramatic red", paperBand dark, limit 8, full
```
redis-io, drams-framer-website, shure-com, lamborghini-com, huly-io, audius-co, finach-com, adcker-com. Lamborghini and Redis were the useful ones.
search_screens
```
query "cultural institution events calendar performances", industry culture, limit 8, full
```
getty-edu, moma-org, barbican-org-uk, centrepompidou-fr, frieze-com, cooperhewitt-org, lacma-org, louvre-fr. Barbican and Met-adjacent institutional patterns; the lacma-org "single red word" note reinforced the restrained accent.
find_by_color
```
hex #b3121f, tolerance 0.2, limit 10, full
```
bbc-com, platonphoto-com, stanford-edu, metmuseum-org, brightful-me, studio-design, radix-ui-com, wired-com, crackmagazine-net, basement-studio. Confirmed #B3121F sits in the BBC / Met / Stanford crimson family, so the accent reads institutional rather than neon.
find_examples_for_macrostructure
```
name catalogue, limit 6, full
```
Only emigre-com; coverage thin. Took its lesson (the product is the visual, no abstraction) for the programme rows and moved on.
find_reference_components
```
type hero
```
Seven archetypes; Marquee (mono dateline as anchor) and Split-screen (pure-CSS atmospheric panel, no image placeholder) shaped the fold: dateline above the headline, curtain drawn in CSS and SVG.
get_screen
```
slug barbican-org-uk
```
Full record; confirmed the programme-CTA-then-listing order and the 137px top spacing step.
get_screen
```
slug metmuseum-org
```
Full record; 5-step type scale, 93px section step, crimson nav band.
search_screens
```
query "luxurious serif display dark stage performance", displayClass roman-serif, paperBand dark, limit 6, full
```
tana-inc, railway-com, atomixnyc-com, moshimoshimusic-com, lucidmotors-com--compare, lafamigliamysteryunfolds-gucci-com. Tana and Lucid (roman plus italic in one headline) informed the display treatment.
find_reference_components
```
type footer
```
Seven footers; Address card and Index shaped the four-column footer with a real box office address and a hand-set season list, no social icon row.
find_reference_components
```
type pricing
```
Seven pricing shapes; Per-use (line items read as a menu) became the ticket table and offers list, Comparison table gave the thin-rule, no-zebra table.
compare
```
slugs metmuseum-org, lamborghini-com, tana-inc, barbican-org-uk
```
All four sit on a 5-step type scale; section steps of 93 to 152px; shared style is minimalism. Set the seam rhythm at clamp(72px, 10vw, 140px).

Palette, traced

Every token, and the reference it came from.

--ink#0c0a0bPage ground. A warm near-black rather than pure black so the crimson curtain does not vibrate against it.
--ink-2#171316Raised surfaces: the marquee strip, the footer, the seating plan ground. One step up from the page so seams read without borders shouting.
--crimson#b3121fThe house colour. Curtain folds, primary CTA, first-night markers, the season pass band, hover state on production titles. Sits in the Met / BBC crimson family per find_by_color.
--crimson-deep#6a0a12Curtain shadow folds, the upper circle on the seating plan, the spotlight visual's base gradient. Gives the red depth without a second hue.
--cream#f3eadbAll text and the sun disc in the spotlight visual. Warm off-white so the serif reads as printed programme paper, not screen white.
--muted#a2969aMeta lines, secondary columns in programme rows, synopses. Desaturated with a hint of the crimson so it belongs to the same family.
--rule#f3eadb24Every hairline: row dividers, table rules, month grid, ghost buttons. Cream at low alpha so rules dim consistently over both black and crimson.

Built with the Inspo MCP - try it on your own brief.← All examples