Connect · Bento

Summary

One of ten presentations of the Connect page (demo36–demo45); this one is vertical — the page scrolls normally and nothing moves sideways. Every block is a bento grid on one 12 px gap: the banner (a text tile with the page title and counts, a tall and a square magazine cover, a numeral tile), PARTNERS (Lucid as the 2×2 feature, the other seven partners as tall, wide and square crops with editorial captions), FREE (77 small tiles in a dense six-column grid) and People (one large portrait, two tall ones, nine small). Each grid ends with a text tile that links to the full list. Made for comparing how the Connect content reads as a composed magazine spread rather than as rows of sliders.

Prompt

The brief this page was built from.

Build one page of the DEPO demo album: the DEPO Connect page (dev0.dphub.net/connect — banner,
PARTNERS premium magazines, FREE basic magazines, People) as a vertical "bento" layout. Normal
page scroll, no horizontal scrollers.

Content: the shared Connect data (js/connect-data.js — 56 partner magazines with genre, city,
year, line, cover and issues; 77 free magazines; 84 people with role, city, photo). Keep the real
DEPO header and footer, the dark #18171a site and the shared animated background (keep the page
transparent so it shows). "View all" links go to dev0.dphub.net/premium, /basic, /locals; cards
link to each magazine's page; Premium / Free / Creator badges as in the data.

Design: a precise bento grid with one gap everywhere. PARTNERS: the featured partner as a 2×2
tile with its next three issues in a corner, the others in mixed 1×1 / 1×2 / 2×1 tiles, covers
cropped so faces stay in frame, editorial glass captions (genre · city, name, issue count and
year) over the photos, a subtle zoom on hover. FREE: a dense six-column grid of small tiles.
People: one large portrait, two tall ones and small ones. Each grid closes with a text tile
linking to the full list, so no grid has holes at any width (grid-auto-flow: dense). Poppins for
names and headings, Lato for captions, large serif numerals for section numbers and counts.
Tiles rise in as they enter the view (off with prefers-reduced-motion). Responsive to 375 px:
4 → 2 columns for partners, 6 → 4 → 3 for free, 6 → 3 → 2 for people.

Look

• Type: Poppins 600 (page title, section titles, names), Lato (captions, kickers, text), Lazurski Regular (section numbers 01–03 and the counts; numerals only — the font has no accented Latin letters). All self-hosted from the site kit.
• Palette: #18171a ground with the shared background; glass rgb(22 21 25 / .46) + blur for captions; #ffb500 Premium badges, kickers and numerals; #53f57e Creator badge and the dot; #469a58 Join button.
• Layout: banner bento (text 2×2, tall cover, square cover, numeral tile); PARTNERS 4×4 cells (feature 2×2, two tall, two wide, three square, link tile); FREE 6×2 small 4:5 tiles; People 6×3 cells (large 2×2, two tall, nine small, link tile). Section heads: big grey numeral, yellow kicker, title, "View all" pill, a hairline below.
• Motion: tiles fade and rise in once (IntersectionObserver, staggered by column); photos zoom 4.5 % on hover; arrows on the link tiles slide. All off with prefers-reduced-motion.

Built with

Borrowed

Nothing borrowed. The header, footer and background are the album's copy of the DEPO site chrome.

Config

None — static page.

Notes

• 2026-10-23: seven times the content — 56 partners (the original eight, Depo Magazine and 47 more) with 220 issues, 77 free titles, 84 people (js/connect-data.js, the same file in every Connect demo). The album has ~30 covers and 24 portraits, so the new entries reuse them as close-up crops in /_img/photos/crops/ (logos cropped away; mag1–4.jpg are the Depo Magazine covers from front/public/images/depo-magazine/), spread so the same photo never sits next to itself.