|
|
# 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/`.
|
