Offscreen — Independent Print Magazine

---
version: alpha
name: Offscreen — Independent Print Magazine
description: An understated editorial landing page for an independent print magazine,
  with a layered coral-and-teal cover collage, generous white space, warm-gray storytelling
  band, small square purchase buttons and a five-column reader-quote wall. The site
  currently notes that publication is paused.
colors:
  primary: '#333333'
  surface: '#FFFFFF'
  on-surface: '#333333'
  secondary: '#DBD7D0'
  surface-variant: '#F1F1F1'
typography:
  headline:
    fontFamily: acumin-pro, "Helvetica Neue", sans-serif
    fontSize: 69.3px
    fontWeight: '400'
    lineHeight: 83.16px
  body:
    fontFamily: acumin-pro, "Helvetica Neue", sans-serif
    fontSize: 16.8px
    fontWeight: '400'
    lineHeight: 26.25px
  lead:
    fontFamily: acumin-pro, "Helvetica Neue", sans-serif
    fontSize: 26.25px
    fontWeight: '400'
    lineHeight: 36.75px
---

# Offscreen — Independent Print Magazine

## Overview

Observed at 2026-09-20T06:04:12.255024+00:00: desktop 1440 × 1000 CSS pixels, device scale factor 1; mobile 390 × 844. Full-page screenshot remains at native desktop width. This is an independent visual reference, not an official brand manual.

A calm, human-centered magazine storefront uses an oversized but regular-weight statement, tangible print photography and unhurried columns. The opening copy explicitly says the publication is currently paused; treat this as an observed design reference, not a claim of an active publishing schedule. The cover of issue 24 is the main visual asset, with supporting photographs of stacked and handheld copies making the physical object legible.

## Colors

Use a white canvas and charcoal text. The measured foreground and dark button backgrounds are rgba(0,0,0,0.8), which render as approximately #333333 over white; the YAML uses that opaque equivalent. White button text is actually rgba(255,255,255,0.9). A measured #DBD7D0 full-width story band adds warmth, and #F1F1F1 quote tiles add quiet separation. Coral and teal are concentrated in the cover photography, not measured global interface tokens. Do not spread those artwork accents across the navigation or testimonial backgrounds.

## Typography

The page declares acumin-pro with Helvetica Neue and sans-serif fallbacks. The desktop opening heading measures 69.3px/83.16px, weight 400; its light visual presence depends on size rather than heavy weight. The centered introductory paragraph is 26.25px/36.75px in a 546.53px box. Main text uses 16.8px/26.25px, while quote text is 14.7px/22.97px. Section headings are 36.75px/44.1px and story-column headings 26.25px/31.5px. Purchase labels use weight 600. These are measured samples, not a universal modular scale.

At 390px, the opening slogan is absent from the visible layout and the introductory paragraph becomes the primary message at 22.05px/30.87px. The later section heading reduces to 27.3px/32.76px. Preserve this hierarchy change rather than simply shrinking the desktop hero. Font-family values record the declared stack; they do not establish a font license.

## Layout

At 1440px, the primary content spans about 1141px, beginning near x=150. A compact wordmark sits left, with Magazine, About, Blog and a small Buy Now rectangle on the right. Below the centered headline and narrow paragraph, build a collage around one tall, frontal magazine cover. Smaller landscape photos sit behind it at staggered heights. Preserve the cover's full silhouette and face rather than treating this as an interchangeable product-dashboard mockup.

The next section has a wide introductory column, a similar-width column of four editorial principles, and a black line illustration of a seated reader. Measured text widths are 348.52px at x=149.70 and x=545.72. A full-width warm-gray chapter holds four 249.52px columns at x=149.70, 446.72, 743.73 and 1040.75. The reader quotes expand to five staggered columns closer to the page edges. Finish with a centered inline purchase link and a charcoal multi-column footer.

At 390px, the header uses a hamburger, wordmark and a plain Buy Now link. Content has about 16px side margins and a measured 358.23px width. The main cover fills this column; supporting pictures become a compact grid below. Story columns stack into a single flow. The sampled mobile DOM omits the desktop quote section from the visible elements. The opening was visually inspected; the entire mobile scroll sequence and intermediate breakpoints were not. Both sampled widths have no document overflow. Section gaps are visually generous; no precise spacing-token system was measured.

## Elevation & Depth

Layer the cover over supporting photos and give it a soft, broad shadow to suggest a physical issue resting above the page. The desktop filled purchase control has a small visible shadow; exact shadow CSS was not sampled. Quote tiles and the warm story chapter remain flat. Avoid adding raised cards to every text group: the depth belongs primarily to the print object.

## Shapes

Buttons, images and quote tiles have square corners; sampled control radii are 0px. The outlined Explore Current Issue control measures 211px wide, and the adjacent filled purchase action measures 114px. Both have 10px 20px 13px padding. The compact desktop navigation purchase action uses 7px 13px 9px padding. Keep the two actions side by side where room allows. Organic shapes come from the hand-drawn reader and the footer emblem, not pill-shaped containers.

## Components

Combine a sparse masthead, centered statement, layered issue collage, editorial-principles columns, four-link story band and small reader quotations. Quote cards contain short copy, a bold attribution and a subtle social icon; reproduce the pattern, not someone else's endorsement. Use underlined links for the story headings and final purchase sentence. The footer separates publication context, navigation and sponsor information. No purchase flow, menu-open state or hover interaction was exercised. Static screenshots describe one resting state only.

## Do's and Don'ts

- Do let the print photography carry the strongest colors.
- Do keep body copy readable and use regular-weight headings for an editorial tone.
- Do distinguish the outlined exploratory action from the filled purchase action.
- Don't turn the warm story strip into individual floating cards.
- Don't force the full desktop headline and overlapping collage onto a narrow screen.
- Don't reuse observed reader quotations as endorsements for another product.