Live capture at 1440px, 2026-10-24
How it’s built
- Layout
- A pale lavender presentation shows a large dark two-line sans headline above a large rounded screenshot of a review interface, with purple accents; logo sits top left and tiny category label top right.
- Type
- Large bold clean sans headline; tiny spaced uppercase category label.
- Color and surface
- Pale lavender, near-black, white and saturated violet.
- Components
- A bold left-aligned two-line title on pale lavender precedes a large rounded interface screenshot with violet controls.
What makes it work
- Pale lavender field
- Large dark two-line sans headline
- Large rounded interface screenshot
- Violet accent controls
On a new subjectFor a public library catalog, pair a large dark two-line headline on pale lavender with a large rounded screenshot of the catalog interface and violet accents.
Measured
H172px / 700 / -3.24px
Body text16px
Page background#ffffff
Text color#101828
Page height4,024px
Computed CSS at 1440px, 2026-10-24.
Live behavior
- Today
- White product page with a restrained header, a left-aligned dark navy three-line headline, short explanation and paired purple/outlined actions. A pale lavender rounded panel at right contains a framed example page and a separate comment card. Small mint status badge and thin rules add structure; a white cookie panel overlays the bottom.
- Responsive
- Desktop uses a two-column text and demonstration layout. Tablet and phone stack the demonstration below the text; phone retains only the brand and primary action in its header. Hero heading declares Inter 72px desktop, 42.24px tablet and 43px phone. The phone cookie panel hides much of the demonstration, while tablet consent overlaps its lower portion.
- Scroll
- At actual scrollY750 a white section introduces a small violet label, large heading and three equal outlined rounded cards; the header and bottom cookie panel remain. The next section is partly hidden by the consent panel and viewport.
