risograph-covers

Risograph Covers

Produce an editable HTML cover and a inspected PNG. Use the bundled fonts and print textures to preserve this established style. The static renderer composes existing artwork. The optional local generation server connects the editor to OpenAI or Gemini image APIs. Use the available image-generation tool for genuinely new illustrations, then place the resulting artwork in this framework.

Visual direction

• Warm paper #f3f0e8, black #090909, red #d01920.
• Large Manrope headline; emphasis in EB Garamond Italic, often red. No full stops after headers.
• Textured circles, squares, triangles; thin muted graph edges. Generous empty space. Minimal text; default no eyebrow or decorative document illustration.
• Graph may sit partly behind the heading, but inspect word legibility. Rotation affects the graph only, never the footer logo.
• Square 1200 × 1200, horizontal 1600 × 900, or vertical 1200 × 1500, or story 1080 × 1920. Right-aligned footer: name, middot, LinkedIn icon, profile path; make it optional.
• Opacity and transparency are inverses: 80% transparency = 0.2 opacity. “20% more visible” multiplies opacity by 1.2, rather than adding 20 percentage points. Follow explicit user correction.

Create or revise

Read references/config.md for the editable input. Copy assets/example.json to the output directory, update wording and composition, and run:

python3 scripts/build.py /absolute/path/cover.json /absolute/path/output
node scripts/render.cjs /absolute/path/output

The generated index.html is a visual editor. Serve the output over localhost, for example python3 scripts/serve.py OUTPUT --port 8899, and open that URL in the browser. Direct file URLs can display the editor but prevent canvas PNG export due to browser origin restrictions. The automated renderer starts its own temporary loopback server and closes it afterwards.

In the editor: click text/artwork and drag it directly, double-click text to edit it inline, and drag the selected text’s corner handle to resize its font. Add text creates another independent item. Text items are numbered in sequence, each with its own font dropdown, weight, size, italic and colour controls. Choose a format, adjust layer rotation/scale, background, or footer visibility. The mono choice is the user-supplied Paper Mono; the footer uses it too. Each format keeps an independent layout, including text, fonts, transforms, footer and PNG blocks. New formats start from the original preset, not another format’s edits. Returning to a format restores its own work. Save design includes all format layouts. Save design downloads editable JSON; Open design restores it; Download PNG exports full canvas dimensions. Edits are automatically saved to a local browser draft and restored on reload; Save design downloads a portable backup. Draft storage failure is reported. Edits they do not overwrite the source JSON or original image. Keep the browser open when the user is editing. The template picker offers six graph and sculptural compositions with independent format-specific defaults. Applying a template preserves words, changes the active format only, and supports Undo. Artwork settings can regenerate a decorative graph locally, add bundled PNG blocks, or embed an uploaded PNG. Selected blocks support move, rotation, scaling and removal. PNG uploads stay in the local browser draft and saved design JSON. Regeneration reshuffles geometry; it is not an AI image-generation connection. Do not regenerate source-derived relationships as decorative data.