The Broad
Marquee Hero
← All examples
“A city library's new branch opening: civic, welcoming, events calendar, open late.”
The agent invented Larkspur Branch Library - Halden's first new library in twenty-two years opens 3 October, and stays open until nine.
- pure + inspo
- light mode
- 8+ MCP calls · 5 sites studied
- 7.0 / 10
The fold and the hours section are the same argument told twice. The right half of the hero is a drawn SVG of the branch at 8:40 pm, every ground-floor bay lit in the glow colour with shelves and readers visible, under a small caption that says the lights stay on; the nav beside it carries a live chip that counts down to 3 October and, once the building is open, switches to "Open now until 9 pm" from the real hours table. Then the hours section repeats the dusk ground, sets the four late nights in the same glow, and marks today's row from the same script. The page never has to say "we are the late library" in a slogan; the colour system says it first, and the copy just confirms the times.
The Broad - The status line sitting beside the logo in the nav ("Open Today at 11 am") became the live opening countdown chip; the split hero with a solid colour panel on one side and the "Plan your visit" three-column info block shaped the fold and the getting-here section.
Lacma - One coral word ("TICKETS") as the only chromatic event in a monochrome page; that discipline is why the accent lands on a single phrase in each headline, the primary button and the lit windows, and nowhere else. Its top-ruled card rows became the opening-day timeline slots.
Walkerart - The arrowed index rows (Exhibitions, Performances, Screenings) and the "closed today" strip; the rooms list is that index shape with a number, a name, a sub-line and the floor, and the hours table borrows its row-per-item rhythm.
Stedelijk Nl - The dense what's-on list where every row is a full-width rule with a label, a title and a thumbnail; the October events calendar is that structure with the date as the big glyph instead of the title.
Harvard Edu - The asymmetric split with a big headline left and a short body block right over one shared ground; every section head on the page uses that two-column pairing.
recommendbrief "A city library's new branch opening: civic, welcoming, events calendar, open late", mode light, detail full
Picked Marquee Hero with feature-stack and specimen as runners-up; evidence over 24 sites: paper band mid 63%, grotesk-sans display 50%, warm accent 50%; exemplars wallpaper-com, newmuseum-org--about, openai-com, doodles-app, harvard-edu--about; the marquee hero JSX; hero-fit and 80-160px section rhythm guidance.
search_screensquery "public library civic institution events calendar opening hours welcoming", industry culture, paperBand light, limit 8, detail full
guggenheim-org--about-us, lacma-org, cooperhewitt-org--blog, louvre-fr--credits, stedelijk-nl, thebroad-org, walkerart-org, madmuseum-org--about with full autopsies; the nav status line, single-accent-word and index-row patterns came from here.
search_screensquery "community non-profit welcoming warm editorial with events programme and visiting information", industry non-profit, mode light, limit 8, detail full
propublica-org, ecologi-com, frontierclimate-com, effectivealtruism-org, dropdeadgenerous-org, ghost-org, signal-org; confirmed the warm off-white paper plus one coral element as the civic register.
get_screenslug harvard-edu--about
Full autopsy: massive left headline balanced by a right body block over one background, crimson used only as a small marker; the section-head pairing on this page.
find_reference_componentstype footer
Seven footer archetypes with JSX; the Ft8 Address card (find us, write, hours, no social row) is the footer shape used, with a fourth column for the other branches.
comparethebroad-org, lacma-org, walkerart-org, stedelijk-nl
Shared minimalism plus editorial in the light register; spacing scales of 15-100px and 12-48px, container widths 1170-1688px, radii 0-5px; set the 1180px container, 6px radius and the clamp(72px, 9vw, 128px) rhythm.
find_reference_componentstype hero
Seven hero archetypes; the split-screen note (typography on one half, a pure CSS atmospheric panel on the other, no stock photo) is why the right half of the fold is a drawn SVG facade rather than a photo placeholder.
get_design_systemslug thebroad-org, live false
Type ramp (36px display at 0.83 leading, 14px body), spacing 15/20/40/65/80/100, container 1170px, radius 0/5/50; used as a sanity check for the four-step spacing and squared buttons.
--paper#f5f1e8Page ground; the warm off-white that propublica-org and effectivealtruism-org measured in the light band, warmer than white so the dusk panel reads as night rather than as a dark-mode block.--ink#1b1915All body and display text, rules under the events list and the room index, hover fill on the outline button; a warm near-black rather than pure black to sit on the cream.--muted#6a6459Secondary copy, meta labels, map street names; one step of contrast down so descriptions read as captions under the display names.--rule#d9d2c4Every hairline: nav border, event rows, membership steps, footer; chosen to be visible on paper without becoming a grid.--card#ece6d9The rooms and services section ground and the map panel; a half-step darker paper so those sections change register without a colour change.--accent#cf3a1eThe one chromatic word in each headline, the primary button, the rooftop sign, the library block on the map and the brand mark; a civic vermilion in the warm band the evidence measured, applied the way lacma-org applies its single coral word.--dusk#1e2b45The hero panel sky, the hours section ground and the tram line on the map; the "open late" idea made into a surface, with --glow #F2C14E for the lit windows and the late-night hours so the two sections rhyme.