# Design

<!-- impeccable design system — Cyclocrust -->

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 `h2`s, 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/`.