# 36 Punk Zine

**Philosophy and fit.** Treat publishing as an authored, opinionated act. Suitable for independent magazines, music collectives, criticism, activist archives, and underground event programmes.

**Visual grammar.** A masthead anchors an irregular editorial spread: narrow text columns, cutout photography, rotated section labels, torn dividers, and deliberately mismatched headline scales. Use condensed grotesque headlines, readable serif body copy, ink black, dirty white, and one acidic spot colour. A plain contents strip provides dependable navigation beneath the collage.

**Specimen and flow.** _Underpass_ is a fictional independent music journal. Open an issue, select a feature from its annotated cover, and read the full article. Supporting views are a chronological issue archive and an article’s credits and related reading section. All decorative scraps accompany actual editorial content.

**Mobile and motion.** Recompose the spread into a clear reading sequence; captions remain beside their images. Collage elements are static, with no background jitter or compulsory animation.

**Identity and effort.** Preserve material layering and editorial tension; avoid illegible body text, arbitrary overlap, and a conventional card grid hidden beneath distress textures. **Effort: medium.**

## Implemented sample

Underpass is an expansive, bounded design reference. All organisations, events, prices, statistics and research claims are fictional fixtures. The page includes a complete primary composition and two local supporting routes that show its interaction and content hierarchy.

## Defining features

- Cutout photography and material layering
- Unequal headline scales
- Readable long-form editorial text

## Adaptable choices

Brand, subject, accent and equivalent licensed typefaces can change. Preserve composition and navigation. Do not turn the hierarchy into a uniform collection of cards.

## Tokens and typography

Heading: Archivo Black. Reading: Libre Baskerville. Local WOFF2 fonts with system fallbacks. Page #e9e7dc; surface #ffffff; text #141714; accent #c5f34f. Eight-pixel base spacing; reading measure 65ch; width 1240px. See tokens.css for role values and Demo.vue for composition. Palette and type match the working specimen.

## States

- Entry: /preview/36-punk-zine/start
- After the last train: /preview/36-punk-zine/article
- Issue archive: /preview/36-punk-zine/archive

## Neighbours and adaptation

- [09 Glossy Fashion](../09-glossy-fashion/DESIGN.md) uses photographic cover with large display type and alternating editorial spreads and issue chapters and contributor credits. This reference keeps irregular editorial collage with a plain contents strip and issue contents and chronological archive.
- [44 Neo Brutalist Board](../44-neo-brutalist-board/DESIGN.md) uses bold outlined workshop notices in separated horizontal board zones and discipline filters and full notice sheets. This reference keeps irregular editorial collage with a plain contents strip and issue contents and chronological archive.

## Assets

See [asset record](../../../docs/ASSETS.md). All vector diagrams and sample writing are original to this repository. Photos are illustrative, not evidence of the fictional brands. Font faces: Archivo Black, Libre Baskerville.

## Verification

Reviewed working sample. Browser checks cover entry-page reflow at 320, 390, 768, and 1440 pixels, keyboard entry, direct routes, and automated accessibility; both supporting routes are checked at 390 pixels. Capture metadata is stored in public/previews/36/capture.json and names the source content hash. Accessibility scans are supplementary; no formal WCAG certification or field-performance claim is made.

## Distinctive composition

Unequal column starts, a photocopied image cutout, a large overprint, interrupted dividers, and varied headline scales give the issue an editorial collage. Contents links and article text remain straight and readable.