Gallery screenshot, saved 2026-10-24
How it’s built
- Layout
- A large white page panel sits inside the black outer submission surround. An enormous black sans display phrase “Code-Driven Systems Between Amsterdam & Athens” dominates the panel and is clipped by its left, right, and lower edges. Small paragraphs of gray/black text run in dense columns beneath and behind the display words, creating deliberate scale collision rather than clear conventional reading order. A tiny top rail identifies the studio, two locations, and About/Projects/Contact. Display words cross column boundaries, overlap the copy, and form a typographic field. This is an editorial/typographic composition rather than card-based content layout.
- Type
- A huge neutral grotesk sans with very large lowercase/uppercase forms supplies the main graphic. The words have normal-to-tight spacing and are positioned across multiple lines at dramatically different vertical offsets. Dense small text appears in a narrow, monospaced or compact sans treatment; much of it is visually fragmented by the overlaid display layer and cannot be read reliably. The top rail uses tiny condensed uppercase labels. Exact font family is unknown from the raster and is not inferred.
- Color and surface
- The content area is stark black and white with no accent palette. Text hierarchy is produced almost entirely by scale and overlap. The page panel has a subtly rounded outer corner, though this may be part of screenshot clipping. No visible shadows or color blocks. The black submission field outside the white page must not be treated as the site's background.
- Components
- A tiny top nav spans the panel width with brand, city/time metadata, and three links. The center and lower page are composed of layered giant words and multiple compact text columns. No obvious buttons or media cards appear. Display words intentionally pass over the small prose and are not isolated into a hero block.
What makes it work
- extreme display/body scale contrast
- overlap across multiple text columns
- mostly monochrome ground
- tiny location/identity rail
On a new subjectUse one or two identity phrases as oversized layers across factual columns; preserve enough clear body copy to retain usability while maintaining controlled collisions.
Prompts
Create an original website image for {{website_name}} in {{industry}}, serving {{audience}}, presenting {{content}} and making {{functionality}} apparent.
INVARIANTS: Arrange large separated statement words across a pale field, threaded through several dense narrow text columns; preserve the sharp large/small scale jump and shared alignments.
TYPOGRAPHY: Use large light-to-regular sans words against very small plain text. Do not require serif contrast where this example does not show it.
COLORS AND SURFACES: Predominantly black and gray type on white, with no ornamental surfaces.
IMAGERY: Treat supporting prose as readable text blocks; do not reproduce the original wording or turn essential content into clipped decoration.
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: Reduce the number of simultaneous columns and place the large words between readable text groups; maintain the scale contrast while preventing collisions and cut-off text. 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: Arrange large separated statement words across a pale field, threaded through several dense narrow text columns; preserve the sharp large/small scale jump and shared alignments.
TYPOGRAPHY: Use large light-to-regular sans words against very small plain text. Do not require serif contrast where this example does not show it.
COLORS AND SURFACES: Predominantly black and gray type on white, with no ornamental surfaces.
IMAGERY: Treat supporting prose as readable text blocks; do not reproduce the original wording or turn essential content into clipped decoration.
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: Reduce the number of simultaneous columns and place the large words between readable text groups; maintain the scale contrast while preventing collisions and cut-off text. 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.
Live behavior
- Today
- The saved live states show a fixed, narrow distressed wordmark/navigation rail over a long generative studio page. The desktop opening states include a tiled LOADING frame followed by a white network diagram with bright-green circular nodes and fine connections. Another desktop state at scrollY 750 shows a very large block-built studio wordmark over black. Tablet and phone captures show a black surround and a centered white media panel, with colored glitch bands on tablet and a handwritten question on phone. The separate reduced-motion fresh load shows only a small studio descriptor against black. These frames are captured states rather than a complete page walkthrough.
- Responsive
- The paired browser measurements report 1440x1000 desktop, 768x1024 tablet and 390x844 phone viewports, with matching JPEG screenshot dimensions. The measured fixed NAV is 55.75 px high at desktop, 52 px at tablet and 36 px at phone; its declared display changes from a 12-column grid at desktop to a space-between flex row at tablet and phone. The declared wordmark/nav font is “2XAMONOVF”, monospace: 23.75 px on desktop and 20 px at tablet and phone. Measured document sizes are 1440x9135 at desktop, 768x8383 at tablet and 390x6370 on ordinary phone. The separate reduced-motion phone document is 390x6227. These are three responsive widths and one additional fresh-load sample, not evidence for breakpoints or all content at other widths.
- Scroll
- The state labeled desktop-scroll has a paired measured document scroll_y of 750, matching the log. Its screenshot shows the large block-built 2XA STUDIO treatment over the black page. This verifies the capture position, but one sampled offset does not establish scroll-trigger behavior or the layout across intervening sections.
