Live capture at 1440px, 2026-10-24
How it’s built
- Layout
- Pale gray panel dominates over a grayscale still-life background visible at edges. Oversized glossy purple 3D letterform anchors the center; small file/folder-like tiles and captions scatter around it. A slim utility row spans the top and a black nav bar is centered at bottom. Asymmetrical placements with clear central priority.
- Type
- Small simple sans labels for file names and utilities; no conventional large headline. The dimensional letterform is the dominant identity mark. Font family and CSS metrics unknown.
- Color and surface
- Soft gray/white, monochrome background, vivid violet and lilac sculptural centerpiece, small pink and black details. Main panel appears flat; central object has glossy dimensional highlights.
- Components
- Central 3D identity form, small asset preview tiles with filename labels, folder icons, music/gravity/date/subscribe utilities, and bottom navigation. Scattered samples are not a uniform grid.
What makes it work
- one central sculptural mark
- small scattered samples
- pale open field
On a new subjectFor another studio or event, create one dimensional identity object as the anchor, then place a few new project samples and quiet captions around it without creating an even tile grid.
Prompts
Create an original visual direction for {{website_name}} in {{industry}} for {{audience}}, presenting {{content}} and enabling {{functionality}}. Composition invariant: Place a pale rounded content panel over a subdued contextual backdrop. Distribute a few labeled visual artifacts around one oversized sculptural focal form; keep top utilities and one compact bottom action in clear bands. Typography character and hierarchy: Use compact sans labels and make the central form the strongest scale and material contrast; do not require literal dimensional lettering. Color/surface contrast: Contrast a quiet pale panel and subdued outer scene with one vivid focal accent selected for {{content}}. Image and component roles: Use new subject-relevant images or objects around the central focal visual; file/folder metaphors, exact letterforms and source background art are optional source content, not requirements. Visual estimate from the selected image, not a measured CSS value: Visual estimate: panel about 90% width and 75% height; sculpture about 40% panel width; assets scatter around. Scale this balance to the actual content. Variables: replace all source identity, wording, products, people, artwork, palette details and actions with new material for {{website_name}}, {{industry}}, {{audience}}, {{content}} and {{functionality}}. Preserve only layout relationships and type hierarchy. No source asset or exact phrase is mandatory. Do not infer named fonts, framework, CSS, animations or tested interactions. Continue with sections that support the new content, using the same relative whitespace and clear grouping. Simplify the surrounding artifacts, scale the focal form to fit, and put controls in a stable top or bottom row instead of overlaying essential content.
Implement a responsive page for {{website_name}} in {{industry}} for {{audience}}, presenting {{content}} and implementing {{functionality}}. Wide composition: Place a pale rounded content panel over a subdued contextual backdrop. Distribute a few labeled visual artifacts around one oversized sculptural focal form; keep top utilities and one compact bottom action in clear bands. Type system: Use compact sans labels and make the central form the strongest scale and material contrast; do not require literal dimensional lettering. Surface treatment: Contrast a quiet pale panel and subdued outer scene with one vivid focal accent selected for {{content}}. Media/components: Use new subject-relevant images or objects around the central focal visual; file/folder metaphors, exact letterforms and source background art are optional source content, not requirements. Visual estimate from the selected image, not a measured CSS value: Visual estimate: panel about 90% width and 75% height; sculpture about 40% panel width; assets scatter around. Scale this balance to the actual content. Variables: replace all source identity, wording, products, people, artwork, palette details and actions with new material for {{website_name}}, {{industry}}, {{audience}}, {{content}} and {{functionality}}. Preserve only layout relationships and type hierarchy. No source asset or exact phrase is mandatory. Do not infer named fonts, framework, CSS, animations or tested interactions. Continue with sections that support the new content, using the same relative whitespace and clear grouping. Simplify the surrounding artifacts, scale the focal form to fit, and put controls in a stable top or bottom row instead of overlaying essential content. Use semantic, selectable text and meaningful image descriptions. Keep controls clearly named, keyboard usable and visibly focused. Any requested action should work as new behavior; do not assert source behavior from this static image.
Measured
Fonts loadedInter, Inconsolata, Lato
H114px / 500 / -0.14px
Body text18px
Page background#f3f1f2
Text color#1b1818
Page height1,000px
Computed CSS at 1440px, 2026-10-24.
Live behavior
- Today
- Pale gray desktop metaphor with scattered labeled file thumbnails and folders around oversized purple sculptural lettering. White rounded window, black bottom dock and compact neutral sans UI create a simulated desktop.
- Responsive
- Tablet and phone capture the open window cut off at the right edge; phone dock remains visible. This is a captured viewport condition, not proof of intended usability.
- Scroll
- The saved desktop-scroll state reports actual scrollY 0: the speaker window remains over the desktop; no scroll progression is demonstrated.
