Live capture at 1440px, 2026-10-24
How it’s built
- Layout
- A tall portrait image sits centered in a warm white field, with tiny identity/menu to its left and artwork details to its right.
- Type
- Small dark serif labels with italic menu and index accents.
- Color and surface
- Warm off-white ground, muted portrait colors and dark gray text.
- Components
- Left identity and menu, central artwork, right title/details and index.
What makes it work
- A single centered portrait framed by tiny serif metadata on a warm pale field.
On a new subjectFor a botanical specimen archive, center one specimen image with tiny serif catalog details on either side.
Prompts
Create an original website image for {{website_name}} in {{industry}}, serving {{audience}}, presenting {{content}} and making {{functionality}} apparent.
INVARIANTS: Reserve roughly 14% desktop width for a narrow identity/navigation rail; pack the rest with a tight five-column masonry of mixed-aspect images.
TYPOGRAPHY: Use a small tracked serif identity with vertically stacked tiny navigation labels; imagery remains dominant.
COLORS AND SURFACES: White ground and narrow consistent pale gaps allow strongly colored content to lead.
IMAGERY: Use a coherent new image collection with mixed crops and dimensions; paintings are optional subject material.
VARIABLES: Supply original identity, writing, imagery, accent hues and tasks for {{website_name}}, {{industry}}, {{audience}}, {{content}} and {{functionality}}.
PROHIBITIONS: Do not copy source branding, wording, photographs or signature artwork. Do not turn privacy notices, submission frames or cut-off essential text into style rules. Avoid generic card stacks, extra decorative panels or an unrelated large hero heading when they erase the specified hierarchy.
CONTINUATION: Translate the same relative type scale, alignment and image treatment into the next real content section; give that section a clear purpose rather than duplicating the hero.
RESPONSIVE PROPOSAL: Turn the side rail into a compact header, reduce the masonry to two columns, and keep labels adjacent to their images rather than overlaying every tile. Render clear, readable original text and subject-appropriate controls with consistent spacing. These proportions are visual reproduction targets, not common measured CSS. The selected still does not establish source fonts, technology, motion, hover or responsive behavior. Preserve those evidence limits; this prompt remains unvalidated.
Build a functioning responsive website for {{website_name}} in {{industry}} for {{audience}}, using {{content}} and working {{functionality}}.
INVARIANTS: Reserve roughly 14% desktop width for a narrow identity/navigation rail; pack the rest with a tight five-column masonry of mixed-aspect images.
TYPOGRAPHY: Use a small tracked serif identity with vertically stacked tiny navigation labels; imagery remains dominant.
COLORS AND SURFACES: White ground and narrow consistent pale gaps allow strongly colored content to lead.
IMAGERY: Use a coherent new image collection with mixed crops and dimensions; paintings are optional subject material.
VARIABLES: Supply original identity, writing, imagery, accent hues and tasks for {{website_name}}, {{industry}}, {{audience}}, {{content}} and {{functionality}}.
PROHIBITIONS: Do not copy source branding, wording, photographs or signature artwork. Do not turn privacy notices, submission frames or cut-off essential text into style rules. Avoid generic card stacks, extra decorative panels or an unrelated large hero heading when they erase the specified hierarchy.
CONTINUATION: Carry the relative type scale, alignment and image treatment into appropriate content sections without repeating the hero or inventing irrelevant features.
RESPONSIVE PROPOSAL: Turn the side rail into a compact header, reduce the masonry to two columns, and keep labels adjacent to their images rather than overlaying every tile. Use semantic reading order, meaningful image descriptions, keyboard-operable controls and visible focus. Check display text bounds after the chosen fonts load at desktop and phone widths; keep complete essential text inside its container. Verify the actual requested actions rather than styling inert controls. Respect reduced-motion preferences if new motion is added. These proportions are visual reproduction targets, not common measured CSS. The selected still does not establish source fonts, technology, motion, hover or responsive behavior. Preserve those evidence limits; this prompt remains unvalidated.
Measured
Fonts loadedtimesNewerRoman, timesNewerRoman Fallback
H116px / 400
Body text16px
Page background#ffffff
Text color#1a1a1a
Page height1,736px
Computed CSS at 1440px, 2026-10-24.
