Live capture at 1440px, 2026-10-24
How it’s built
- Layout
- A full-bleed blurred photographic field carries the page, tinted blue at the edges and warm/pink near the center. Thin court-like horizontal and vertical lines divide the field into an oversized tennis-court diagram, but the lines are interrupted at intersections and near the central content rather than boxed into a rigid grid. The brand marks, large two-line title, short explanatory copy, and start action form a centered vertical stack. Peripheral court lines and margins remain visible on every side. The visual has an intentionally soft, hazy focal center and clear geometric frame.
- Type
- The title is a large italic high-contrast serif in white, split after “Tie-” so the two words form a compact centered block. Small white sans-serif copy sits immediately below, centered over three short lines. Brand marks above are compact and brighter. The visual suggests a sharp display-versus-utility hierarchy; exact typeface, font size, weights, leading, and tracking cannot be identified from the image and are not inferred.
- Color and surface
- Dark navy and indigo dominate the outer image; the center contains smoky beige, purple, and muted red. Court lines glow in pale cyan, pink, and white with subtle color shifts. The background is photographic and defocused rather than a flat panel. The small start control has a white face and dark outline, giving it the strongest crisp surface contrast. No card sits behind the text.
- Components
- Centered brand stack includes two compact logos, a serif event title, one brief instruction, and a single rectangular Start button with a small outlined circular pictogram. Court lines operate as background framing rather than interactive controls. No utility nav is visible in this frame.
What makes it work
- continuous blurred photo background
- large centered italic display title
- geometric thin-line frame referencing a court
- compact centered action stack
On a new subjectFor another interactive campaign, use its activity's abstract geometry around a centered proposition and one initiating action; preserve legible white type over softened imagery.
Prompts
Create an original website image for {{website_name}} in {{industry}}, serving {{audience}}, presenting {{content}} and making {{functionality}} apparent.
INVARIANTS: Use an intentionally soft-focus full-field image beneath a narrow centered stack of identity, italic title, explanation and one small outlined action; sparse fine geometry may frame the stack.
TYPOGRAPHY: An italic serif title leads the compact center; supporting copy and controls remain very small sans.
COLORS AND SURFACES: Cool image values and pale thin lines/text; preserve enough local contrast for the copy.
IMAGERY: Use an original defocused subject image. Court markings become optional abstract framing suited to the new subject.
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: Keep the center stack readable and shorten surrounding line geometry; simplify the background rather than shrinking the explanation to illegibility. 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: Use an intentionally soft-focus full-field image beneath a narrow centered stack of identity, italic title, explanation and one small outlined action; sparse fine geometry may frame the stack.
TYPOGRAPHY: An italic serif title leads the compact center; supporting copy and controls remain very small sans.
COLORS AND SURFACES: Cool image values and pale thin lines/text; preserve enough local contrast for the copy.
IMAGERY: Use an original defocused subject image. Court markings become optional abstract framing suited to the new subject.
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: Keep the center stack readable and shorten surrounding line geometry; simplify the background rather than shrinking the explanation to illegibility. 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 loadedWorkSans
Body text7.5px
Page backgroundtransparent
Text color#ffffff
Page height1,000px
Computed CSS at 1440px, 2026-10-24.
Live behavior
- Today
- The Tie-break landing screen layers thin white court-like line geometry over a full-field heavily blurred blue-gray image with dense grain. A small centered white co-brand mark sits above a very large white slanted high-contrast serif title on two lines, tiny white centered sans explanation and small white rectangular Start button with dark icon/label and separated translucent outline. This is a restrained centered entry composition; the game itself was not entered.
- Responsive
- At768px the line geometry becomes taller and the co-brand image, title, support and action occupy a much larger proportion of width/height. At390px they remain centered in a narrow vertical composition, with title filling most width and court-like lines running close to the sides. The title is slightly larger on tablet than desktop, while the phone reduces it. No actual game, landscape layout or later scene was tested.
- Scroll
- Nominal desktop scroll attempt stays actual0 with document1440x1000; screenshot bytes equal t0/t2. This establishes no document scroll in the saved entry state, not that the later game has no navigation or scene movement.
