Live capture at 1440px, 2026-10-24
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.
Prompts
Create a visual direction for {{website_name}} in {{industry}} for {{audience}}, shaping {{content}} and supporting {{functionality}}.
COMPOSITION INVARIANTS: Create a pale editorial schedule page with a centered masthead, ample breathing room, a thin-rule utility band, then a structured lower area pairing a calendar or index with featured entries and images. Preserve the observed visual hierarchy and spacing relationships, not the source-specific object inventory.
TYPE: Use an expressive serif masthead and event titles, with compact serif utility labels and smaller caption details. Keep italic styling subordinate. Set a readable scale step between display text, supporting copy, captions, and utilities. Do not name a font family.
SURFACE AND COMPONENTS: Use white or pale surfaces, fine gray rules, dark type and restrained photography; avoid unnecessary colored cards. Component roles: Masthead/nav, side identity label if useful, three-part utility band, date/index area, featured content columns and captions. Keep controls visually distinct and subordinate to the main content.
IMAGE DIRECTION: Use current subject-relevant event or editorial images; theater scenes and source-specific language are not required. Proportion estimate from the selected still: Visual estimate: masthead/blank space about 30% height; utility row 5%; lower grid remaining 65%. Treat it as an estimate, not fixed CSS geometry.
VARIABLES: Adapt names, details, image subjects, palette accents, and working actions to {{website_name}}, {{industry}}, {{audience}}, {{content}}, and {{functionality}}.
PROHIBITIONS: Use original copy and assets. Do not reproduce the source brand, exact wording, photographs, illustrations, products, people, or signature artwork; source-specific objects and motifs are optional only when they genuinely fit the new subject.
CONTINUATION: Continue with a scannable schedule/list section that carries the same rule hierarchy and caption treatment.
RESPONSIVE PROPOSAL: Stack the date/index before entries, keep each image adjacent to its title/date, and move vertical side identity into a top label. These are design proposals, not observed mobile behavior. The selected still does not establish source fonts, CSS, implementation technology, motion, or control behavior. Do not present any of those as observed. Implement requested {{functionality}} as working new behavior without implying source validation.
Implement a responsive page for {{website_name}} in {{industry}} for {{audience}}, presenting {{content}} and working {{functionality}}.
INVARIANTS: Create a pale editorial schedule page with a centered masthead, ample breathing room, a thin-rule utility band, then a structured lower area pairing a calendar or index with featured entries and images. Keep the same relative prominence and spacing without requiring the same source objects.
TYPE AND SURFACES: Use an expressive serif masthead and event titles, with compact serif utility labels and smaller caption details. Keep italic styling subordinate. Use white or pale surfaces, fine gray rules, dark type and restrained photography; avoid unnecessary colored cards. Maintain clear display/body/utility scale, readable line lengths, and sufficient contrast. Components: Masthead/nav, side identity label if useful, three-part utility band, date/index area, featured content columns and captions.
IMAGERY AND SCALE: Use current subject-relevant event or editorial images; theater scenes and source-specific language are not required. Visual estimate only: Visual estimate: masthead/blank space about 30% height; utility row 5%; lower grid remaining 65%. Use flexible widths and content-led dimensions; do not copy this screenshot's coordinates as fixed values.
VARIABLES: Adapt names, details, image subjects, palette accents, and working actions to {{website_name}}, {{industry}}, {{audience}}, {{content}}, and {{functionality}}.
PROHIBITIONS: Use original copy and assets. Do not reproduce the source brand, exact wording, photographs, illustrations, products, people, or signature artwork; source-specific objects and motifs are optional only when they genuinely fit the new subject.
CONTINUATION: Continue with a scannable schedule/list section that carries the same rule hierarchy and caption treatment.
RESPONSIVE PROPOSAL: Stack the date/index before entries, keep each image adjacent to its title/date, and move vertical side identity into a top label. Use semantic content, keyboard-operable controls, visible focus, meaningful alt text, and no clipped content. The selected still does not establish source fonts, CSS, implementation technology, motion, or control behavior. Do not present any of those as observed. Implement requested {{functionality}} as working new behavior without implying source validation.
Measured
Fonts loadedGT Cinetype
H159px / 400
Body text14px
Page background#ffffff
Text color#000000
Page height4,838px
Computed CSS at 1440px, 2026-10-24.
