— Step one
Start writing.
The blank page is the only feature you really need. Begin with words. Everything else can wait.
Try writing →Alternating image-text rows that pull the eye through a zigzag — top-left → top-right → bottom-left → bottom-right. The marketing-page workhorse.
Where the F-pattern (3.1) describes text-heavy reading, the Z-pattern describes how eyes scan image-heavy marketing pages. Rows alternate image-left/text-right, then text-left/image-right, then image-left again — pulling the eye through a Z shape. Used by basically every SaaS marketing page that isn't pure hero+grid: Notion, Figma, Stripe product pages, Apple feature pages.
Stack 3–5 rows of CSS Grid (two equal columns each). Each row holds an image block and a text block. Alternate the order via a .reverse class on every other row (use CSS order property or just swap which child gets which grid column). Keep the columns vertically centered with align-items: center. The Z is invisible to the user but governs how their attention naturally flows down the page.
Click "Show Z" to reveal the invisible eye-flow path overlay.
The blank page is the only feature you really need. Begin with words. Everything else can wait.
Try writing →Structure follows draft. Drop blocks, drag sections, rename headings until the shape feels right.
See organize →One keyboard shortcut and your draft becomes a public page, a newsletter, or a deploy. No middle step.
See publishing →Build a Z-pattern marketing page with 3 alternating image-text rows. Each row is a CSS Grid with grid-template-columns:1fr 1fr, gap:28px, align-items:center. Inside each row: a text column (small red uppercase eyebrow, large display-serif headline with one italic accent word, body paragraph max-width 42ch, dark CTA button) and an image column (aspect-ratio:4/3, border-radius:14px, colored gradient placeholder). Row 1: image on the right. Row 2 (.reverse): image on the LEFT, text on the right — flip the visual order using CSS order property. Row 3: image on the right again. The alternation pulls the reader's eye diagonally through a Z, which is the natural scan path for image-heavy marketing pages. Add an optional "Show Z" toggle button that overlays dashed red SVG arrows tracing the Z-shape across the page. On mobile (under 720px) collapse to single column and stack text-then-image consistently.