website/DESIGN.md

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 + cyclocrust wordmark, 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, status come from frontmatter with honest defaults; no invented facts.
• Contacts ship as the author's real ones: e-mail order@cyclocrust.net and Instagram cyclocrust (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/.