Live capture at 1440px, 2026-10-24
How it’s built
- Layout
- A centered three-line black serif introduction sits over a sweeping pink ribbon on white, with neon highlighted phrases, scattered colored dots, three overlapping illustrated cards and an open box below. Tiny decorated navigation sits across the top.
- Type
- Large regular black serif introduction; compact serif card titles and small decorated nav labels.
- Color and surface
- White, pink ribbon, neon yellow and blue highlights, multicolor dots and pastel illustration cards.
- Components
- Centered serif introduction, highlighted phrases and overlapping illustrated cards above an open box on a pink-ribbon field.
What makes it work
- Pink sweeping ribbon on white
- Centered serif introduction with highlighted phrases
- Overlapping illustrated cards and open box
- Small decorated navigation
On a new subjectFor a public science learning collection, present a centered black serif introduction with neon highlights, three overlapping illustrated topic cards and an open box over a sweeping pink ribbon on white.
Measured
Fonts loadedMona Sans Variable, Plaak
H162px / 300 / -1.86px
Body text16px
Page background#ffffff
Text color#1f2328
Page height4,638px
Computed CSS at 1440px, 2026-10-24.
Live behavior
- Today
- A white canvas with faint vertical and horizontal grid rules carries a centered serif introduction with lime and pale blue rounded highlights behind selected phrases. Three colorful gradient illustration cards float above a pink open box; scattered blurred colored dots and a hand-drawn underline give the composition an informal layered quality. Tiny navigation occupies ruled header cells.
- Responsive
- Tablet and phone replace the desktop header links with a menu icon and wrap the introduction into more centered lines; illustration cards stack vertically above the box. Introduction declares Averia Serif Libre 62px desktop, 44px tablet and 32px phone. The card labels and drawings are visual artwork and are not assigned the DOM heading font.
- Scroll
- At actual desktop scrollY750 the bottom of the pink hero transitions to a centered Work label and a two-column project grid with image tiles and small labels. Duplicate category text in the DOM is not treated as separate visible labels.
