Théâtre de la Cité website design

How it’s built

Layout: White theatre program: centered title and italic multi-line navigation; vertical institution label at left. Hairline separates header from three utility links. A month calendar sits left of three event listings, each pairing stage photo with dates, title and credits. Thin rules divide modules.
Type: High-contrast serif masthead, italic serif navigation/credits, smaller utility labels. Event title outranks date and credits but is smaller than masthead. Metrics unknown.
Color and surface: White ground, black type, pale dividers and varied stage photos. No card shadows; rules and whitespace partition schedule.
Components: Vertical label, masthead/nav, utility row, calendar and repeated event modules with images and credits.

What makes it work

Separate global heading, schedule and event details
Use alignment/rules to scan listings
Keep event photos subordinate to dates/titles

On a new subjectFor a municipal transit service directory, use a distinctive serif masthead over a shallow rule-separated action row. Pair a compact route/date navigator with repeated aligned route entries, short factual metadata and relevant original images or diagrams. Preserve the fine information hierarchy and quiet grid without borrowing theater names or ticketing content.