Screenshot from Httpster, saved 2026-10-24
How it’s built
- Layout
- A white portfolio canvas has a small identity at upper left and a compact irregular mosaic of seven rounded rectangular stills in the upper-middle area. Mixed portrait and landscape tiles form staggered rows with narrow white gutters; none visibly overlap. The left landscape, tall lower-center tile and right landscape define an uneven outer silhouette. A large blank region separates the cluster from a long bottom navigation row and far-right label. Warm photographic tones and people in institutional interiors tie the varied crops together.
- Type
- Identity and bottom navigation are compact uppercase/regular sans, spaced to act as quiet anchors rather than competing titles. No main headline or image captions are visible in this frame. The small labels sit outside the collage, leaving the image arrangement to convey project context. Font identity and metrics are not measurable from this gallery still.
- Color and surface
- White background and soft warm photographic tones dominate. Rounded stills are separated by narrow white gaps, without visible card shadows or colored panel grounds. White space also separates the cluster from navigation.
- Components
- Small text identity; one multi-image mosaic of varied portrait and landscape stills; a widely spaced bottom navigation row; a far-right auxiliary label. The collage has no visible caption or card text within the photos, so navigation remains separated from the visual cluster.
What makes it work
- Image cluster remains the main visual area.
- Mixed aspect ratios give the cluster movement while maintaining a bounded overall footprint.
- Navigation is spatially distinct from the image group.
On a new subjectFor a museum’s annual report landing page, assemble a tight mosaic from varied images of its collections and public programs, leaving clear blank space before a bottom link row. Select the images to serve the institution’s subject; preserve the cluster-to-whitespace relationship rather than copying these interior scenes.
Prompts
Create a transferable visual direction for {{website_name}} in {{industry}}, for {{audience}}, presenting {{content}} and supporting {{functionality}}. Composition rule: Create a compact upper-middle collage from rounded rectangular images of mixed size and orientation, with selected edges close or interlocking. Keep a tiny identity at upper left and a thin line of compact section links along the lower edge. Type character and hierarchy: Use small bold uppercase sans labels and low-key footer links; avoid adding a large promotional headline. Palette and contrast: Use a white or light ground with dark labels and an image-led palette selected for the target content. Image/component role: Choose new documentary, process or project visuals appropriate to {{industry}} and {{content}}; keep photographic subjects original and avoid source people or places. Visual estimate from this selected image, not measured CSS: Visual estimate: collage about 82% width and 65% height; bottom nav is shallow; white margins remain. Treat the proportions as guidance rather than fixed geometry. Variables: choose new identity, wording, subject, imagery, palette and actions for {{website_name}}, {{industry}}, {{audience}}, {{content}} and {{functionality}}. Do not reuse source brands, exact phrases, logos, people, products, photography, artwork, or other distinctive source assets. Do not infer a named typeface, technology, CSS value, motion or untested behavior. Build any continuation from the target's actual content while preserving the stated hierarchy and contrast. Convert the collage to a small staggered vertical run, keep rounded images distinct, and allow footer links to wrap without hiding content.
Implement a responsive page for {{website_name}} in {{industry}} for {{audience}}, presenting {{content}} and making {{functionality}} work. Desktop layout: Create a compact upper-middle collage from rounded rectangular images of mixed size and orientation, with selected edges close or interlocking. Keep a tiny identity at upper left and a thin line of compact section links along the lower edge. Typography: Use small bold uppercase sans labels and low-key footer links; avoid adding a large promotional headline. Surface contrast: Use a white or light ground with dark labels and an image-led palette selected for the target content. Media and components: Choose new documentary, process or project visuals appropriate to {{industry}} and {{content}}; keep photographic subjects original and avoid source people or places. Visual estimate from this selected image, not measured CSS: Visual estimate: collage about 82% width and 65% height; bottom nav is shallow; white margins remain. Treat the proportions as guidance rather than fixed geometry. Variables: choose new identity, wording, subject, imagery, palette and actions for {{website_name}}, {{industry}}, {{audience}}, {{content}} and {{functionality}}. Do not reuse source brands, exact phrases, logos, people, products, photography, artwork, or other distinctive source assets. Do not infer a named typeface, technology, CSS value, motion or untested behavior. Build any continuation from the target's actual content while preserving the stated hierarchy and contrast. Convert the collage to a small staggered vertical run, keep rounded images distinct, and allow footer links to wrap without hiding content. Use semantic content, useful image descriptions, and labels linked to the correct item. Any new controls need accessible names, keyboard operation and visible focus; the reference's controls and behavior remain untested.
Live behavior
- Today
- No current-site visual state was captured. The original URL attempt did not render in the dated pass; see evidence_gap and the directly bound zero-state log.
- Responsive
- Not assessed: the original URL did not render from this capture environment on 2026-11-02.
- Scroll
- Not assessed: no current-site scroll state was captured.
