The Cover

Summary

One idea carries the whole page: the DEPO cover, the thing every member wants to be on. On a pale green-grey ground a 2:3 cover frame with a heavy DEPO masthead stays pinned on the right; on the left the text scrolls through "Put your work on the cover" and the six values. The step in the middle of the screen is the current issue — its portrait and cover line ("Collaboration, with Daleros Vilard") slide into the frame. Then the magazines as an open list, the roles as one sentence with portraits between the words, Connect / Locals / Awards, a mosaic of faces and a closing green masthead. The owner liked it most of all the variants; demo7–demo17 were made to reach its quality.

Prompt

The brief this page was built from.

Build a DEPO home page around one idea: the DEPO cover, the thing every member wants to be on.

- A pale green-grey ground (#e8ebe4), paper, ink, deep green fields (#0f2a1a), green links, the
  brand yellow sparingly; Schibsted Grotesk only, 900 for display (very large, tight tracking).
- A 2:3 cover frame with a heavy DEPO masthead stays pinned on the right while the left column
  scrolls through "Put your work on the cover" and the six values; the step in the middle of the
  screen is the current issue — its portrait and cover line ("Collaboration, with Daleros
  Vilard") slide into the frame.
- Then the magazines as an open list, the five roles as one sentence with portraits between the
  words, Connect / Locals / Awards, a mosaic of faces and a closing green masthead.
- The real header and footer; premium, editorial; reduced motion respected.

Look

• Type: Schibsted Grotesk (Google Fonts, 400 / 500 / 700 / 900) for everything in the page: 900 for the hero (up to 132 px, -0.055em), step titles (up to 112 px) and the cover masthead (31 cqw), 700 for section titles and the magazine names, 400 for body text at 18–22 px. Lato and Poppins only in the site header and footer.
• Palette: #e8ebe4 pale green-grey ground, #f4f6f1 paper, #121612 ink, #4a524b soft ink, #0f2a1a deep green fields (header, magazines, close), #2f7d43 green for links, rules and the closing masthead, #ffb500 yellow for the open magazine and the light button, #c9d3cb text on green.
• Layout: header on deep green; pinned sequence — text steps in a 6fr column, the sticky cover in a 5fr column; "Magazines that publish here" on deep green, eight huge names that open a row of covers; one sentence "Photographers, models, stylists, make-up artists and magazines on one set" with pill portraits between the words, then Connect, Locals and Depo Awards under green rules; "Faces of the community", a six-column mosaic with two large portraits; "Shoot. Publish. Repeat." on deep green with a 32 vw DEPO masthead cut off at the bottom; footer.
• Motion: an IntersectionObserver with a -45 % root margin picks the current step; the cover cross-fades (opacity + scale(1.04) → 1, 700 ms / 1100 ms) and the cover line slides up; other steps dim to 22 %; magazine rows open their covers with a staggered rise and indent on hover; the pill portraits widen when you hover the role beside them; portraits scale on hover. Below 900 px every step carries its own cover inline; reduced motion removes the transitions.

Built with

Borrowed

• The real DEPO site header and footer with the site-asset snapshot (/demo5/css/, /demo5/js/, /demo5/fonts/, /_img/site/) of the site CSS, JS, fonts and images (front at commit 43a7a8b^); copy from the live site's sections.
• Made with the taste-skill v2.0.0 (github.com/Leonxlnx/taste-skill) and frontend-design skills, as the prompt asked; the taste-skill inspector was used for 1440 / 768 / 390 screenshots.
• Schibsted Grotesk from Google Fonts (SIL OFL); magazine covers from the DEPO gallery.

Config

None — static page.

Notes

• A full-page screenshot shows only one cover and the inactive steps dimmed: the scene only reads when you scroll it.
• demo6 is this page with a "peek" header that returns as the pointer moves up.