Screenshot from Httpster, saved 2026-10-24
How it’s built
- Layout
- Terracotta field fills the canvas. Small black menu is isolated upper-left and two utility links sit upper-right. A wide-tracked black wordmark sits across upper middle. Rectangular photos are scattered asymmetrically: cropped ones enter from the top, a drink-and-fruit image sits left, an outdoor image near lower center carries tiny overlaid copy, and a large flat olive hand silhouette fills the right. Large red gaps separate the elements.
- Type
- Main wordmark is heavy black uppercase with very wide tracking, centered high; utilities are tiny caps; lower copy is compact and collides visually with the photograph. There is no large sentence headline. Typeface family not inferred.
- Color and surface
- Single oxide-red ground, black text, flat desaturated olive hand, and restrained warm photo tones. Large flat areas dominate; no card shadows or rounded surfaces.
- Components
- Small hamburger and utility links, an upper wordmark, several cut rectangular photos, one oversized flat hand illustration, and a tiny paragraph over the lower photo. Navigation remains a separate edge layer.
What makes it work
- Broad flat field
- Oversized simple drawn gesture
- Several uneven photo fragments
- Small detached edge navigation
On a new subjectReplace the hand with another large flat silhouette and use a few subject-relevant photo crops. Preserve visible background between pieces, uneven scale, and small detached navigation. The flat gesture should organize the composition rather than depict a literal brand product; replace the regional and beverage cues.
Prompts
Create a visual direction for {{website_name}} in {{industry}} for {{audience}}, shaping {{content}} and supporting {{functionality}}.
COMPOSITION INVARIANTS: Build a sparse collage over one broad saturated ground: a widely spaced title, a large flat illustrative gesture, and a few separated documentary images. Keep compact factual copy along an edge and small utilities at the top. Preserve the observed visual hierarchy and spacing relationships, not the source-specific object inventory.
TYPE: Use tracked uppercase display lettering and compact utility sans; keep explanatory copy narrow and readable. Set a readable scale step between display text, supporting copy, captions, and utilities. Do not name a font family.
SURFACE AND COMPONENTS: Use a strong solid background, a contrasting illustration color, and documentary image tones. The source rust/olive combination is optional. Component roles: Small menu/utility links, broad title, one large illustration, a few separate images and a concise factual text line. Keep controls visually distinct and subordinate to the main content.
IMAGE DIRECTION: Use a new abstract or symbolic gesture and original subject-relevant supporting images; the source hand and mezcal story are not requirements. Proportion estimate from the selected still: Visual estimate: hand about 25% width at right; title spans half; each photo under 20%, widely separated. 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 additional evidence or story sections that retain broad fields and sparse image placement.
RESPONSIVE PROPOSAL: Move title and utilities to the top, then arrange the illustration and images in a clear vertical sequence before the explanatory copy. 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: Build a sparse collage over one broad saturated ground: a widely spaced title, a large flat illustrative gesture, and a few separated documentary images. Keep compact factual copy along an edge and small utilities at the top. Keep the same relative prominence and spacing without requiring the same source objects.
TYPE AND SURFACES: Use tracked uppercase display lettering and compact utility sans; keep explanatory copy narrow and readable. Use a strong solid background, a contrasting illustration color, and documentary image tones. The source rust/olive combination is optional. Maintain clear display/body/utility scale, readable line lengths, and sufficient contrast. Components: Small menu/utility links, broad title, one large illustration, a few separate images and a concise factual text line.
IMAGERY AND SCALE: Use a new abstract or symbolic gesture and original subject-relevant supporting images; the source hand and mezcal story are not requirements. Visual estimate only: Visual estimate: hand about 25% width at right; title spans half; each photo under 20%, widely separated. 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 additional evidence or story sections that retain broad fields and sparse image placement.
RESPONSIVE PROPOSAL: Move title and utilities to the top, then arrange the illustration and images in a clear vertical sequence before the explanatory copy. 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.
