Free print studio website template

Live demo GitHub Download ZIP Use this template

Repository: github.com/8bsite/print-studio-website-template · Live demo: 8bsite.github.io/print-studio-website-template/ · MIT license

Dotdrum template: first screen on a phone

About this template

Dotdrum is a print studio website template for a risograph studio and small press: ink chart, process, own editions for sale, dated workshops, a live price calculator and a contact form. It also suits a screen-print or letterpress studio, or a copy and print shop.

A one-page site for a two-ink risograph studio that prints zines, posters and books, sells its own editions and runs workshops. Two flat inks, ultramarine and fluorescent pink, and halftone dots drawn in CSS; as you scroll, four drums print the page band by band, ink plates slide into register and a drum inks the workshop dates one by one.

Good for:

Risograph, screen-print or letterpress studioPrint shop or copy shop with online quotesSmall press or zine publisher with a few editions for saleCraft studio that sells work and runs workshopsAny small studio with a two-colour graphic identity

Free for personal and client work under the MIT license. In collections: one page website templates, github website templates, website templates with animation, brutalist website templates.

How to use the print studio website template

With an AI coding agent

Download the files into your project (Windows PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/print-studio-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/print-studio-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/print-studio-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/print-studio-website-template/main/CREDITS.md

Then give the agent this prompt:

Read AGENTS.md, then edit index.html. Use this template as the base for a site for <your studio or shop: what you make or print, where you are, your prices, products, workshops or events, how people order or book>. Keep the layout, the motion and the single-file format; replace the brand name, copy, photos, prices and rates, dates, client list, links and contacts, and recolour it through the CSS variables if needed.

Give the agent the file, not a link. AGENTS.md says what to keep and what to replace. Step by step: templates for Claude Code.

In a terminal

npx degit 8bsite/print-studio-website-template my-site

No code

Download the ZIP, edit index.html and drag its folder onto Netlify Drop, or click Use this template and turn on GitHub Pages.

Print studio website design and motion

Palette

#11138d ultramarine background and text#ed008e fluorescent pink: drums, dots, buttons#f3f3fa paper white sections and text#07061f near-black text on pink

Fonts

Gabarito: heavy, tight grotesk headings sized to fill the width
Rethink Sans: body text, buttons, uppercase labels

Full-width bands of ultramarine, paper white and fluorescent pink. Everything is drawn in the two inks: CSS halftone dots and registration marks, round drums trailing dotted lines, blue-and-pink duotone photos. The ink chart overprints two plates into a 4×4 grid; the job ticket has a perforated top edge.

Motion runs on scroll; the list of sections below says what moves in each.

What is on the page

Navigation
Top bar: wordmark, section links, Price a run button; phone menu overlay
Two inks, ten thousand dots.
Two-screen opening: big two-line headline and four drums with halftone trails, then a pink panel with the studio statement, a photo and three facts
Smooth scrolling throughout. Scrolling down, four pink drums roll onto the panel below and print it band by band; photos appear through growing halftone dots.
Two inks. Sixteen colours.
Colour chart: two ink plates overprint into a 4×4 grid of tints (demo: blue and pink)
Headings start with an offset ghost that slides into register. Tied to scroll, the tilted blue and pink plates slide together into the chart.
One sheet, two passes.
How it works: five numbered steps on a horizontal track beside a sheet that gets printed step by step
Pinned, the five stations slide sideways while the sheet beside them takes a blue pass, then a pink pass that nudges into register.
A small room with a loud machine.
About the studio: paragraph, list of four machines, three photos at alternating heights
From our own drum.
Shop: eight products in four staggered lanes, each with photo, title, format, price and Order link (demo: zines, prints and books)
Tied to scroll, alternate product lanes slide up and down like pistons into their staggered places, printing dotted trails.
Learn the drum.
Event list: five dated sessions with price, places left and a Book link, beside a lane where a drum inks each date
A pink drum rolls down beside the list as you scroll, and each date fills solid pink as the drum passes.
Price a run.
Price calculator: job options on the left, a live job ticket with total, unit price and turnaround, and a Send this ticket email button
Lately on the drum.
List of recent clients and jobs set in large type (demo: a press log)
Client names drift left or right away from mid-screen, with a pink ghost that closes up as each reaches the centre.
Before you send a file.
Questions and answers (native <details>)
Bring a file. Leave with a stack.
Address, opening hours, email, phone and a contact form (placeholders), four drums across the foot
Tied to scroll, four drums drop down their lanes at staggered times, printing dotted trails behind them.
Footer
Width-filling dotdrum wordmark, links, address, socials, copyright and the Design: 8B credit

What is inside

Files: index.html (99 KB, CSS and JavaScript inside), AGENTS.md, CREDITS.md, LICENSE
Motion: GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll, loaded from jsDelivr. With reduced motion on, the page shows a complete static version.
Fonts: Gabarito and Rethink Sans from Google Fonts (SIL Open Font License)
Photos: 13 from Unsplash (Unsplash License), loaded from Unsplash's servers and each credited in CREDITS.md
Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 121+ (it uses color-mix(), container query units, :has(), cascade layers, small/dynamic viewport units).
Replace before publishing: Social preview image, favicon, email address, contact form (sends nothing yet), phone number and social media links, plus the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
License: MIT

Good to know

One page, no CMS: texts and prices are edited in the HTML, and there is no checkout or payment built in.
Order links under each of the eight editions lead to mailto:shop@dotdrum.example with the edition in the subject now; point them to your shop or checkout URL for each edition (or keep the email with your real address).
Book a place links under each of the five workshops lead to mailto:hello@dotdrum.example with the workshop in the subject now; point them to your booking or ticketing URL for each session (or keep the email with your real address).
The Send this ticket button in the quote section lead to a mailto: address (the script adds the job lines) now; point them to your real email address, or your own quote or order form.
The form sends nothing until you connect a form service such as Formspree or Netlify Forms, or your backend.
On screens shorter than 640 px the first screen grows past the viewport and the print starts later; the process stage needs about 600 px of height on phones, below that the sheet shrinks.
The demo facts are invented. Photos load from Unsplash, the motion libraries from jsDelivr.

Questions about this print studio website template

Does the price calculator send real quotes?

It prices in the browser: pick format, copies, inks, paper and sides for a total, unit price and turnaround. Send this ticket opens an email with the job filled in.

How do orders and bookings work?

Each Order and Book a place link opens an email with the item in the subject, so there is no cart. The contact form needs a form service such as Formspree or Netlify Forms.