Use case: ui-mockup
Asset type: high-fidelity desktop landing-page composition for EffectiveHTML.com, composition option C — Field Guide Spread
Primary request: Render an actual polished responsive website viewport, not a poster, book photograph, or picture of a website. A thin exact top navigation sits on a near-black page. The main first viewport is a large asymmetric warm-paper field-guide spread occupying about 72% of the width and extending slightly beyond the bottom edge. It is a semantic website surface styled like an editorial working spread, not a literal bound book. A narrow black vertical spine separates two unequal regions and contains a few compact geometric navigation marks. The left warm-paper region carries the very large stacked product name exactly “Effective HTML”, the real headline exactly “HTML for thinking with agents.”, and two compact geometric CTA controls. The right region is a dense but elegant live specimen: one dominant cobalt/lilac browser mockup cropped at the top, a skeletal wireframe area beneath, a fresh-green interaction strip, a small precise diagram fragment, and one narrow black implementation strip layered with controlled overlaps. Three colored paper tabs project from the right edge as chapter navigation. Around the spread is generous quiet near-black space. The bottom 16% reveals the next catalog chapter as a black-stock panel sliding upward with one large warm-paper specimen preview, proving the page continues as a guided catalog.
Input images: Image 1 is the approved Working Atlas palette, paper/ink material, artifact forms, and controlled-overlap reference. Image 2 is the product-name weight and broader brand-family reference. Preserve the visual world but make a genuinely new website composition.
Style/medium: high-fidelity Fumadocs/Next.js website UI comp; flat vivid print-like color; warm paper tooth translated into crisp semantic interface geometry; bold tightly set modern grotesk typography; precise rules and functional controls; no device frame and no photoreal desktop scene.
Composition/framing: desktop landscape web viewport, straight-on. Thin site navigation, asymmetric editorial spread, vertical spine navigation, dense specimen region, projecting chapter tabs, and visible next fold. Clear information hierarchy and web affordances. Avoid a card grid.
Color palette: near-black #141413, warm bone #F3E6D2, cobalt #1649D8, lilac #A884E8, fresh green #1BAE61, pale pink #F09AA8, tiny coral #E8744F. Flat fields only, no olive.
Typography: extremely heavy neutral grotesk for product name; clean sans elsewhere. Only “Effective HTML” and “HTML for thinking with agents.” may be legible. Render all other text as clean abstract bars, never nonsense words.
Constraints: no mascot, no person, no hands, no arrows, no continuous connector line, no lines weaving between artifacts, no fake body copy, no conventional dashboard, no evenly spaced card grid, no gradients, no glow, no glassmorphism, no fake 3D chrome, no watermark.
