Live capture at 1440px, 2026-10-24
How it’s built
- Layout
- Ivory product page with centered red re_ mark, vertical Menu left, search/bag right and centered rows of coral category links. Rectangular color tiles below hold centered ingredient bowls and small lower labels. Sizes vary; first orange-red tile spans wider than beige, tan, green and blush blocks; narrow pale gutters maintain order.
- Type
- Thin coral sans category links and tiny counts; small white sans tile labels. Centered mark modest beside utilities. Metrics unknown.
- Color and surface
- Ivory, coral links, flat orange-red/beige/tan/green/blush tiles. Bowl images centered; sharp edges and narrow gutters, no shadow.
- Components
- Vertical menu, centered mark, category rows, search/bag, varied tiles and small social glyphs. Grid is primary.
What makes it work
- Tie each label to its image
- Maintain tile grammar across sizes
- Keep nav before grid
On a new subjectFor a public emergency-preparedness resource directory, place compact category links above a varied but aligned module grid. Center original service illustrations within flat color fields and attach concise labels at consistent edges. Preserve scale variation, small counts and the image-label rhythm while replacing food categories, ingredients and commerce actions.
Prompts
Create a visual direction for {{website_name}} in {{industry}} for {{audience}}, shaping {{content}} and supporting {{functionality}}.
COMPOSITION INVARIANTS: Place a compact identity and dense category navigation above a color-blocked index. Use a clean asymmetrical tile layout with one isolated specimen or visual sample per tile and a small label anchored consistently. Preserve the observed visual hierarchy and spacing relationships, not the source-specific object inventory.
TYPE: Use clear medium-sized navigation, restrained tile captions and tiny side utilities. Text should remain subordinate to each broad color field. Set a readable scale step between display text, supporting copy, captions, and utilities. Do not name a font family.
SURFACE AND COMPONENTS: Use a warm light ground with a coordinated but adaptable set of solid tile colors; preserve contrast and avoid treating the exact source hues as mandatory. Component roles: Centered mark, category links, side utilities, asymmetrical tile field, one sample per tile and consistent captions. Keep controls visually distinct and subordinate to the main content.
IMAGE DIRECTION: Choose a content-relevant object, illustration, or product sample per tile; bowls and food ingredients are not required. Proportion estimate from the selected still: Visual estimate: navigation occupies upper quarter; largest tile spans about 60% width; gutters remain narrow and even. 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 into category detail pages using the same broad-color tile language without repeating a crowded top nav.
RESPONSIVE PROPOSAL: Turn the dense category row into a menu or wrapping list, then stack tiles one or two across with labels attached to their sample. 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: Place a compact identity and dense category navigation above a color-blocked index. Use a clean asymmetrical tile layout with one isolated specimen or visual sample per tile and a small label anchored consistently. Keep the same relative prominence and spacing without requiring the same source objects.
TYPE AND SURFACES: Use clear medium-sized navigation, restrained tile captions and tiny side utilities. Text should remain subordinate to each broad color field. Use a warm light ground with a coordinated but adaptable set of solid tile colors; preserve contrast and avoid treating the exact source hues as mandatory. Maintain clear display/body/utility scale, readable line lengths, and sufficient contrast. Components: Centered mark, category links, side utilities, asymmetrical tile field, one sample per tile and consistent captions.
IMAGERY AND SCALE: Choose a content-relevant object, illustration, or product sample per tile; bowls and food ingredients are not required. Visual estimate only: Visual estimate: navigation occupies upper quarter; largest tile spans about 60% width; gutters remain narrow and even. 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 into category detail pages using the same broad-color tile language without repeating a crowded top nav.
RESPONSIVE PROPOSAL: Turn the dense category row into a menu or wrapping list, then stack tiles one or two across with labels attached to their sample. 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 loadedSuisse Int'l, ITC Garamond W01 Book Narrow
H280px / 400 / -1.74px
Body text20px
Page backgroundtransparent
Text color#f74c25
Page height8,228px
Computed CSS at 1440px, 2026-10-24.
