Use case: ui-mockup
Asset type: high-fidelity desktop landing-page composition for EffectiveHTML.com, composition option A — Open Specimen
Primary request: Render an actual responsive website viewport, not a poster and not a picture of a website. The page is a custom Fumadocs/Next.js landing surface. A thin, exact top navigation sits on a near-black field. The first viewport uses a 5/7 split: on the left, a very large stacked grotesk wordmark reading exactly “Effective HTML” and one real headline reading exactly “HTML for thinking with agents.” with compact geometric CTA shapes beneath; on the right, one tight overlapping specimen stack with a dominant vivid browser mockup, a large warm-paper wireframe behind it, one narrow black interaction panel, one warm-paper diagram sheet, and one thin implementation strip. The cluster occupies the right two-thirds and remains one cohesive mass. The bottom 18% of the viewport reveals the beginning of a warm-paper catalog section with a large specimen preview and chapter rhythm, proving the design can govern the next fold.
Input images: Image 1 is the primary approved composition, palette, material, specimen hierarchy, and texture reference. Image 2 is the wordmark weight and wider brand-family reference. Preserve their Working Atlas world without copying either image as a single raster hero.
Style/medium: high-fidelity website UI comp; flat print-like color; warm cut-paper and black-stock materials translated into crisp semantic interface geometry; bold modern grotesk typography; subtle paper tooth; controlled overlap; no device frame.
Composition/framing: desktop web viewport, wide landscape, straight-on; visible navigation, complete first viewport, and a small slice of the second section. Large quiet Ink field around the title; one dense specimen cluster. No evenly spaced card grid.
Color palette: near-black #141413, warm bone #F3E6D2, cobalt #1649D8, lilac #A884E8, fresh green #1BAE61, pale pink #F09AA8, tiny coral #E8744F. Flat vivid fields only, no olive.
Typography: very heavy tightly set neutral grotesk for the product name and headline; clean sans for all other regions. Only “Effective HTML” and “HTML for thinking with agents.” may be legible. Render every other text area as indistinct geometric lines, never nonsense words.
Constraints: the output must read unmistakably as a polished website layout with navigation, CTA affordances, content hierarchy, and the start of a scroll story. No mascot, no person, no hands, no arrows, no connecting line, no lines weaving between specimens, no logos other than the exact product name, no fake body copy, no dashboard grid, no glossy gradients, no glow, no glassmorphism, no 3D chrome, no watermark.
