4.2 KiB
Design
A crust-punk xerox zine, held inside a tight grid. The subject is bicycles and crust punk; the ethics are DIY and minimal consumption. The look borrows the strict monochrome and photocopied-zine / noisy-film feel of japanese crust, but keeps a dosnoventa-tight, ordered structure. Built code-first on Eleventy (11ty) v3 + Nunjucks + plain CSS.
The two poles
- Chaos (crust): photocopier grain over the sheet, halftone 1-bit photos,
heavy condensed caps, the
////slash motif, hairline rules,№stamps. - Order (dosnoventa): a clean 1160px shell, strict baseline rhythm, one monochrome palette, everything on a ruled grid.
Neither wins: the grain and the caps supply the attitude, the grid keeps it legible.
Palette
Strictly monochrome — paper and one ink.
| token | value | role |
|---|---|---|
--paper |
#f4f1ea |
newsprint / warm photocopy ground |
--ink |
#111110 |
photocopier black (text, rules) |
--dim |
#59544a |
faded toner grey (secondary) |
--faint |
#b7b0a3 |
whisper rules |
Contrast: ink/paper 17.4:1, dim/paper 7.1:1, paper-on-ink 17.4:1 — all far above 4.5:1.
Type
Self-hosted woff2 with cyrillic + latin subsets; no external font requests.
- Jost 300–700 — the brand display face: a Futura homage (geometric, Paul Renner). Masthead, titles, labels, buttons, nav. The author's identity sheet is set in Futura PT Light, so Jost is the web stand-in (Futura itself is licensed and lacks a free webfont).
- Literata 400/600/700 + italic — the serif reading column (the text face the author asked for).
- JetBrains Mono 400/700 — dates, entry numbers, spec keys, captions.
Measure 64ch; body ~17px; display titles up to 4.6rem fluid.
Mark
The logo mark is the author's own ../identity/logo-mark.png, traced to clean
inline SVG (potrace) and inlined in the masthead so no extra static file ships:
two large intersecting circles forming a lens, an ellipse iris, and a filled
diamond pupil. fill="currentColor", so it inherits the ink colour.
Signature moves
- The
////slash (from the logo's four mitre strokes) recurs: the button tail, list bullets, the caption and back-link prefixes. - Photocopier grain — a fixed, non-interactive multiply layer over the whole
sheet (
static/images/grain.png, ~14% opacity). - Halftone photographs — the two real photos are dithered to 1-bit B&W
(
hero-xerox.png,lugs-xerox.png) and multiply-blended onto the paper.
Structure
- Masthead — eye mark +
cyclocrustwordmark, uppercase nav, mono folio. - Cover — newest entry leads: condensed caps title, ruled fact line (запись · дата · материал), serif lede, ink-block CTA, halftone plate + mono caption.
- Log — entry index as a ruled contents list:
№ · дата · заголовок · материал; hover shifts the row and underlines the title. - Entry — left data rail (sticky spec table + date), serif reading column
with a condensed drop cap, ruled
h2s, framed halftone figures. - Colophon — wordmark, note, contacts, mono tag.
Motion
One authored moment: rows and nav carry a single ease-out transition; the ink
button inverts on hover. No scroll effects. prefers-reduced-motion keeps
smooth scroll off.
Browser surfaces
Selection (ink ground), caret, scrollbar (dim on paper), focus ring (2.5px ink),
underline offset, and accent-color are themed to the two-colour palette.
Content contracts
- Titles and copy stay as written by the author;
topic,material,statuscome from frontmatter with honest defaults; no invented facts. - Contacts ship as the author's real ones: e-mail
order@cyclocrust.netand Instagramcyclocrust(no Telegram). - No fabricated prices, counts, testimonials, or commercial claims.
- Rasters carry provenance: the two photographs are the author's own, dithered; the grain is generated.
Constraints
Eleventy (11ty) v3 kept as-is; dist/ is the output. .eleventyignore excludes
PRODUCT.md, DESIGN.md, readme.md, .impeccable/.