Designing Overprint: A Risograph Portfolio Template

Misregistration#

Riso plates rarely line up perfectly, and that slight offset is part of the charm. Overprint does it in two places.

In the artwork, each project in assets/js/data.js has a reg list of offsets in pixels, one per ink:

inks: ['yellow', 'pink', 'blue'], reg: [[0, 0], [2, -2], [-2, 2]],

The plate() function in assets/js/main.js wraps each ink's shapes in a group moved by its offset:

return '<g class="plate ' + INK_CLASS[ink] + '" data-ink="' + ink + '" fill="currentColor" transform="translate(' + off[0] + ' ' + off[1] + ')" filter="url(#ink-' + uid + ')">' +

In headlines, the misreg class prints a second, pink copy of the heading just off the blue one:

.misreg { @apply relative isolate text-blue-text; }
.misreg::after {
  content: attr(data-ink) / ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  color: var(--color-pink); mix-blend-mode: multiply; transform: translate(0.045em, 0.035em);
}

The pink copy comes from the heading's data-ink attribute, which must match the visible text. The / "" after attr(data-ink) gives the pseudo-element empty alternative text, so screen readers don't read the headline twice. The offset is in em, so it scales with the font size.

The same offset idea shows up in the buttons, chips and cards, which use hard box-shadows in a second ink, such as shadow-[4px_4px_0_var(--color-pink)] on a blue button.

Halftones, rough edges and paper grain#

Risograph images build tones from dots. Overprint defines two halftone patterns per ink in each SVG, a light screen and a dense one, rotated to a different angle for each ink, as printers do to avoid moiré:

const SCREEN_ANGLE = { pink: 15, blue: 45, yellow: 75 };

Inside a drawing, @ht and @hd stand for that ink's light and dense halftone, so a shape written once as fill="@ht" gets the right dot pattern on whichever plate it sits.

Clean vector edges would give the game away, so every plate goes through an SVG filter built in artDefs(). One feTurbulence warps the edges slightly through feDisplacementMap, and a second, finer one becomes a mask that knocks tiny holes in the ink, the speckle you see in real riso prints. To get clean edges instead, the docs say to delete the filter attribute in plate().

The paper itself has grain too. body::before lays a fixed SVG noise tile over the whole page at 14% opacity, blended with multiply (screen and 6% in dark mode), and it's hidden when printing. Classes like .halftone-pink add dot fields made from radial-gradient backgrounds.

Case studies with switchable ink plates#

Each of the twelve projects has a case study at project.html?project=<id>, built from the same data. Its artwork comes in three stages, set up as an ARIA tablist you can move through with the arrow keys, Home and End:

• Sketch draws every plate as a gray pencil line. The is-sketch class turns blending off and replaces every fill with a thin stroke in the muted color.
• Plates shows each ink on its own, captioned "Pass 1", "Pass 2" and "Pass 3", in print order.
• Final print shows the overprinted result, with a button for each ink.

The buttons are chips with aria-pressed. Pressing one toggles data-off on that ink's plates, and the CSS rule above hides them, so you can take the blue off the press and see what pink and yellow do alone. At least one ink always stays on: turning off the last one shows a short "Leave at least one ink on the press." message instead. A live region reports what's showing, such as "Showing fluorescent pink and yellow only."

The shop and the commission estimator#

Overprint is also a working storefront and booking flow for the demo studio.

The shop lists twelve prints, zines, stickers and postcards, each drawn from the same motifs as the portfolio. Products have size options with a price, an edition and stock ("Edition of 60 · only 12 left"), and sold-out sizes are disabled and crossed out. The cart is saved in localStorage and falls back to memory when the browser blocks storage. The checkout offers USPS Ground Advantage (free from $75), USPS Priority or pickup at the studio, adds 6% Kentucky sales tax for Kentucky orders and pickups, validates a test card, and ends with an order number and the next mail day. No payment is taken; the docs say to connect a real payment provider before selling anything.

The commission enquiry runs in four steps and shows a fee range and dated timeline as you go. Each commission type in data.js has a starting fee and phase lengths in working days:

editorial: {
  label: 'Editorial',
  blurb: 'Covers, spots and full-page pieces for magazines, newspapers and newsletters.',
  from: 650,
  phases: { sketches: 4, revisions: 2, finals: 4 },
  example: 'A cover and two spots'
},

The range is the starting fee times a license factor (from 1 for one-time print up to 2.4 for exclusive rights), times 1.2 for worldwide use and 1.25 for a rush, up to 1.6 times that, rounded to $50. Editorial for one-time print in North America reads "$650 to $1,050". The timeline starts at the first working Monday at least 14 days away, skips US holidays and the studio's winter break, and warns when the deadline is too soon even for a rush, which squeezes each phase to 70% of its usual length.

Making it yours#

Most changes are in two files:

• Inks and paper: change the tokens in the @theme block and in the :root.dark block of src/input.css, then run npm run build. The artwork reads the inks through the text-pink, text-blue and text-yellow classes, so it follows automatically. For a teal plate, set --color-blue and --color-blue-text to teal values.
• Fonts: change the family in the Google Fonts URL on every page and the matching --font-* token.
• Content: projects, products, commission prices, shipping, tax and events all live in assets/js/data.js. Copy a project entry, pick a motif, set its inks and reg, and it shows up in the work grid with its own case study.
• Real scans: to show your own artwork instead of the drawn motifs, put a 4:5 image inside the .art box and remove its data-art attribute.
• Forms: none of the four forms send anything until you connect them. Replace the successSwap(...) call in each handler with a request to your form service.
• Events: fair dates roll forward while KEEP_DEMO_CURRENT is true. On a real site, set it to false and keep the list current.

The Overprint documentation covers every token, data field and feature in more detail, and the live demo shows the ink plates in action.