Live capture at 1440px, 2026-10-24
How it’s built
- Layout
- Saturated orange-red background with tiny yellow utility links and central bakery mark across the top. Huge heavy yellow uppercase type fills almost the whole frame in two stacked claims; oversized lower line is partially outside the screenshot. Sparse small icon and action text sit at top corners.
- Type
- Extremely large bold block sans headline in yellow; small bold yellow utility labels and compact brand graphic. No supporting body copy visible in this frame.
- Color and surface
- Flat vivid orange-red field and bright yellow type/mark, very high contrast. No photo, gradients, cards, borders or shadows.
- Components
- Small merch link, centered bakery wordmark, order action and icon, giant campaign headline.
What makes it work
- Single vivid field
- Very large high-contrast type
- Minimal peripheral navigation
On a new subjectChoose one vivid background and a short bold statement that dominates it. Keep navigation to a few small edge labels and replace bakery-specific color and copy.
Prompts
Create an original website image for {{website_name}} in {{industry}}, serving {{audience}}, presenting {{content}} and making {{functionality}} apparent.
INVARIANTS: Make a single saturated field and enormous stacked uppercase statement dominate the opening; a small centered identity and corner actions remain a very shallow utility layer.
TYPOGRAPHY: Heavy broad uppercase letters occupy roughly 75–90% width and more than half the visible height, with very tight leading.
COLORS AND SURFACES: One saturated background and a strongly contrasting bright text color; exact orange/yellow hues are variables.
IMAGERY: No major photo is needed; the typography supplies the graphic impact. Clipping observed in the source is incidental.
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: Rebreak and fit every display line after fonts load, retaining large letter mass; place additional content below rather than shrinking the headline to ordinary hero size. 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: Make a single saturated field and enormous stacked uppercase statement dominate the opening; a small centered identity and corner actions remain a very shallow utility layer.
TYPOGRAPHY: Heavy broad uppercase letters occupy roughly 75–90% width and more than half the visible height, with very tight leading.
COLORS AND SURFACES: One saturated background and a strongly contrasting bright text color; exact orange/yellow hues are variables.
IMAGERY: No major photo is needed; the typography supplies the graphic impact. Clipping observed in the source is incidental.
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: Rebreak and fit every display line after fonts load, retaining large letter mass; place additional content below rather than shrinking the headline to ordinary hero size. 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 loadedrightgrotesk-spatialblack-webfont, obviously-condensed-semibold, nimbus-sans-extended-regular, nimbus-sans-extended-bold
H354px / 400
Body text18px
Page backgroundtransparent
Text color#292a2c
Page height11,363px
Computed CSS at 1440px, 2026-10-24.
