Live capture at 1440px, 2026-10-24
How it’s built
- Layout
- A rounded white header sits above a centered stack: announcement pill, three-line large headline with playful symbols, three benefit cards, two actions and a review line.
- Type
- Heavy black sans headline contrasts smaller regular sans navigation and benefit labels.
- Color and surface
- Pale gray ground, white rounded surfaces, fluorescent yellow-green accents and colorful small illustrations.
- Components
- Navigation bar, announcement pill, floating avatars and symbols, three benefit cards, paired actions and rating row.
What makes it work
- A centered bold multi-line headline with playful accents above three pale benefit cards and a bright paired-action row.
On a new subjectFor a city composting program, center a bold invitation with small colorful leaf marks above three benefit cards and a bright registration action.
Measured
Fonts loadedDM Sans, Instrument Serif
H176px / 500 / -3px
Body text16px
Page background#f8f7f2
Text color#18241f
Page height6,392px
Computed CSS at 1440px, 2026-10-24.
Live behavior
- Today
- The captured Printery page has an ivory field and pale rounded hero with very subtle paper/fold imagery and a dot texture. A large dark centered sans proposition ends with a coral italic-serif word; small uppercase eyebrow, support, two actions and an import link form a clear center stack. A large editor screenshot with soft shadow sits below. Desktop has one horizontal navigation row. Tablet moves links to a separate second row, while mobile shows brand and Resources and omits the other top-level links in this captured header. The editor image scales to the narrower screen. At 750px scroll, the hero image ends above a benefit strip and a three-column row of lightly tinted publication cards.
- Responsive
- At 1440px the hero uses a two-line main heading with large inline italic accent and one-row navigation. At 768px links occupy a second row; headline remains centered over paired actions and scaled editor image. At 390px the heading wraps into three lines including the italic final word, only Resources remains visible beneath the brand, and the editor image fits within the narrow page. Only these sampled widths are established; the mobile screenshot does not test hidden navigation destinations.
- Scroll
- The desktop scroll snapshot reports scrollY750 and document height6392 at a1000px viewport. It reveals the editor image base, a fine benefit strip, and three lightly tinted cards under a paired section heading/description. This is one actual document scroll, not a whole-page examination.
