Live capture at 1440px, 2026-10-24
How it’s built
- Layout
- Dense collage: central tall black-white fashion image with angular white strokes overlaps offset photos and color blocks. Red, magenta, orange and blue emerge at sides. Small Soft Power/Index pills sit upper-left; notification card overlays lower-left and content crops below. Intentional overlap, not a regular grid.
- Type
- Most text belongs to artwork; navigation is small dark text in white pills. Giant diagonal strokes act as graphic marks, not readable copy. Typeface unknown.
- Color and surface
- Monochrome media contrasts saturated colors and black panels. Images overlap without uniform card edges; notification is separate overlay.
- Components
- Two pill controls, central editorial media, overlapping fragments/color fields and notification. No clear primary headline.
What makes it work
- Preserve overlap and varied crop
- Separate fragments by contrast
- Keep navigation quiet
On a new subjectFor a civic water-conservation explainer, layer original documentary crops, bold chart fragments and a single dominant message at deliberately different scales. Keep the utility index small on a quiet separate layer and retain white gaps that distinguish the artifacts. The subject and visual assets change; controlled overlap and contrast provide continuity.
Prompts
Create a transferable visual direction for {{website_name}} in {{industry}} for {{audience}}, presenting {{content}} and supporting {{functionality}}. Composition rule: Build an energetic collage around one central poster-like image, then layer a few smaller image fragments and broad color fields at different depths. Keep a quiet navigation label at the edge; avoid making edge crops carry essential copy. Type character/hierarchy: Let the central visual carry the main graphic mark; keep navigation and any secondary labels small, clear sans. Palette and contrast: Mix neutral or monochrome media with a limited set of saturated color blocks; choose all hues and imagery for the target content. Image/component hierarchy: Use new subject-relevant photos, illustrations or artifacts; do not require sports, fashion, branded campaign imagery or logos. Visual estimate from the selected reference image, not a measured CSS value: Visual estimate: central panel roughly one third viewport; broad image/color fragments cover remaining field and crop at edges. Treat it as a flexible proportion. Variables: provide original identity, wording, imagery, hues and working actions for {{website_name}}, {{industry}}, {{audience}}, {{content}} and {{functionality}}. Source people, objects, products, exact artwork, logo shapes and text must never be required; select imagery specifically suited to the new subject. Do not infer named typefaces, technology, CSS values, effects or control behavior from a still. Continue the same scale and spacing logic into relevant lower content. Reduce layers and separate the central message from image fragments; no required information should be clipped beyond the viewport.
Implement a responsive page for {{website_name}} in {{industry}} for {{audience}}, with {{content}} and functional {{functionality}}. Desktop layout: Build an energetic collage around one central poster-like image, then layer a few smaller image fragments and broad color fields at different depths. Keep a quiet navigation label at the edge; avoid making edge crops carry essential copy. Typography: Let the central visual carry the main graphic mark; keep navigation and any secondary labels small, clear sans. Surface contrast: Mix neutral or monochrome media with a limited set of saturated color blocks; choose all hues and imagery for the target content. Image and component roles: Use new subject-relevant photos, illustrations or artifacts; do not require sports, fashion, branded campaign imagery or logos. Visual estimate from the selected reference image, not a measured CSS value: Visual estimate: central panel roughly one third viewport; broad image/color fragments cover remaining field and crop at edges. Treat it as a flexible proportion. Variables: provide original identity, wording, imagery, hues and working actions for {{website_name}}, {{industry}}, {{audience}}, {{content}} and {{functionality}}. Source people, objects, products, exact artwork, logo shapes and text must never be required; select imagery specifically suited to the new subject. Do not infer named typefaces, technology, CSS values, effects or control behavior from a still. Continue the same scale and spacing logic into relevant lower content. Reduce layers and separate the central message from image fragments; no required information should be clipped beyond the viewport. Use semantic text, useful image descriptions, and meaningful control labels. Provide keyboard operation and visible focus for new controls. Do not implement cookie or consent overlays as part of the style; behavior shown in static reference controls remains unverified.
Measured
H132px / 700
Body text16px
Page background#ffffff
Text color#000000
Page height1,000px
Computed CSS at 1440px, 2026-10-24.
