# Free graphic design studio website template > Free HTML graphic design studio website template with scroll animations and no libraries, for design studios. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated November 2026. Graphic design studio website template: a free one-page site for a studio that also runs a risograph print room, with five jobs in a sideways row, a rates table, four team portraits and a contact form. The look is two inks on yellow paper under giant extruded words. Scroll motion is plain CSS, with no libraries, in one HTML file. - Page: https://8b.com/templates/misprint/ - Live demo: https://8b.com/templates/misprint/demo.html - DESIGN.md (design tokens and motion rules): https://8b.com/templates/misprint/DESIGN.md - Repository (GitHub template): https://github.com/8bsite/graphic-design-studio-website-template - Download ZIP: https://8b.com/templates/misprint/graphic-design-studio-website-template.zip - Template name in the repository: Misprint - At a glance: One 85 KB index.html with its CSS and JavaScript inside, 12 sections, 12 Unsplash photos credited in CREDITS.md, Schibsted Grotesk from Google Fonts, no JavaScript libraries: CSS scroll-driven animations and a small inline motion script with built-in smooth wheel scrolling, no script loaded from a CDN. ## Use it with an AI coding agent Download the files into the project (Windows PowerShell: `curl.exe`): ```bash curl -LO https://raw.githubusercontent.com/8bsite/graphic-design-studio-website-template/main/index.html curl -LO https://raw.githubusercontent.com/8bsite/graphic-design-studio-website-template/main/AGENTS.md curl -LO https://raw.githubusercontent.com/8bsite/graphic-design-studio-website-template/main/LICENSE curl -LO https://raw.githubusercontent.com/8bsite/graphic-design-studio-website-template/main/CREDITS.md ``` Then give the agent this prompt: ```text Read AGENTS.md, then edit index.html. Make it the site for . Replace the demo facts first, then the photos, and set each --len to the character count of its text. Keep the gate script, the inline motion kit and the data-8b-motion attributes; add no animation library. Ask me for missing facts and never invent jobs, prices, hours, clients, quotes or contacts. ``` Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/graphic-design-studio-website-template my-site`. ### Graphic design studio website design prompt for any AI tool Use this to build a graphic design studio site with a print room from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It is this template's design written as decisions; with the template itself, the short prompt above is enough. ```text Build a one-page website for a small graphic design studio that also runs a risograph print room. Sections in order: opening with one giant extruded lowercase word and a headline, recent work as five jobs in a sideways row, method as three printing rules, what we make as five huge discipline words, a four-step process, print room rates table, team of four portraits, three client quotes, five questions, contact form, footer with a giant wordmark. Type: Schibsted Grotesk only, lowercase headings at weight 800 with tight tracking, body at 400, small print at 600. Colours: #f2d27c yellow paper, #17423a pine ink for all text and lines, #5b9a7e green second ink for plates and heading shadows, #ebc568 deeper paper for rows and cards. Print every photo in two inks and offset the second ink slightly off register. Square corners, 2px pine rules, pill buttons on a hard offset plate. Avoid gradients, soft shadows, a third ink colour and stock icons. Motion: one idea, misregistration falling into place as you scroll, built with CSS scroll-driven animations and no library; with reduced motion or no support, show the static layout. Copy is short and concrete. Ask me for jobs and years, prices, hours, team, address and contacts, never invent them, and list every placeholder. One primary action, start a project, repeated in the nav and the opening. Check at 390 px, tap targets 44 px, visible keyboard focus, no console errors. ``` ## About A graphic design portfolio website has to show jobs before it explains anything, and here the work row comes straight after the opening: five jobs, each a photo, a title and a caption with a year. That suits a branding studio, a poster or book designer, a small design agency website, or a studio that rents out its presses and wants a print shop website with a rates table. Drop the print room and the rest still stands. In a vibe coding session, a graphic design studio website template for Claude Code, Cursor or Codex needs the facts only the studio has: jobs and years, how long an identity takes, print room rates, hours, team and clients. The demo invents all of them. The agent swaps the name in any letter case, retypes the giant words, which need a round letter at the data-focus position, and sets each --len to the new character count. Choose this base when the studio wants its portfolio to look hand printed and sells print on the side. A business that mostly takes quotes at a counter fits the [print and copy shop](https://8b.com/templates/shortrun/) template better, and a studio with many case studies needs more than one page. The weak spot is the portfolio itself: five cards in one pinned row, with no case-study pages and no filters. ## Design - Palette: #f2d27c (the paper: page ground, nav pills, the secondary button, the sheet over the opening, text on the pine menu overlay), #17423a (the first ink: all text, the 2px rules, outlines, primary buttons, the menu overlay and the dark second screen when scroll motion is off), #5b9a7e (the second ink: the giant word faces, plates behind photos, heading shadows, one ink disc, the hard shadow of primary buttons and the open question sign), #ebc568 (deeper paper: alternate rate rows, the process sheet, portrait proofs and the contact form fill) - Fonts: Schibsted Grotesk (the only family, a variable 400 to 900 with italics: lowercase headings at 800, giant extruded words in 800 italic, statements at 700, body at 400, buttons at 700, small print and form labels at 600) Full-width sections on yellow paper, with lists ruled by 2px pine lines. A 12-column grid holds the method and print room, the work is one wide strip, and the questions sit beside a sticky giant question mark. The giant words are SVG text with eight stacked copies for the extruded depth. Corners are square except pill buttons and tags, and sheets, proofs and the form carry a hard offset shadow. Print texture comes from CSS and blend modes: a faint paper grain sits on the page, photos are greyscaled and printed through the yellow, and buttons rest on a hard offset plate that they sink into on hover. Headings carry a second-ink shadow that slides into register on scroll. ## Sections and motion - **Navigation** (navigation): fixed top bar: wordmark, a turning arrows mark, four section links and a Start a project button; hides on scroll down; phone menu overlay of seven links - **perfect is not our type** (opening): two screens: a giant extruded word "oops" over a studio photo with the headline, intro and two buttons, then a statement sheet about the studio. Motion: On load the headline lines and buttons rise, the depth layers of the giant word pull into place and the studio photo opens inside its second o, then on scroll you dive through that counter while the word swells and the headline rises away. - **fresh off the drum** (work): pinned horizontal row: a heading and five job cards with prints and a closing note with a button. Motion: Pinned: the row of five jobs slides sideways, and each photo's second-ink plate drops into register as the card crosses the middle. - **two inks, no excuses** (method): heading, two ink discs, a photo and three printing rules. Motion: The heading's second ink slides into register, the photo is printed in from the top down, and the three rules feed in from the left 70 ms apart. - **what leaves the room** (make): five discipline words in a justified column, each with a one-line note. Motion: Each of the five discipline words starts off to the left or right, alternating, and slides into a justified column as its row rises, with its second ink closing up. - **how a job goes to print** (process): a held poster sheet that is printed in four passes beside four steps. Motion: A poster on a held sheet is drawn in four passes beside the four steps: sketch lines draw, the green plate drops in, the dark plate follows, crop marks are cut and the paper straightens. - **the print room is open** (print-room): print room for hire: intro, a photo and a rates table. Motion: The heading registers, the photo is printed in, and the five rate rows feed in one after another. - **seven people, one printer** (studio): four portrait proofs dealt onto a table, with a hiring line. Motion: The four portrait proofs start piled in the middle of the table, each at its own angle, and spread to their places as the table rises. - **said over the proofs** (voices): three client quotes with name and business. Motion: Each of the three quotes registers its second ink, and the name and business pills feed in under it. - **questions we get a lot** (faq): a giant question mark beside five questions (native details). Motion: The giant question mark rises into place and its depth swings from down-right to down-left while the section passes; the questions stay put. - **say something imperfect** (contact): heading, email, phone, address and print room hours beside a three-field form. Motion: The heading registers, then the three contact lines and the form fields feed in one by one. - **Footer** (footer): footer: studio line, six links, copyright with the Design: 8B credit and a giant extruded wordmark. Motion: The full-width wordmark starts flat and low, and its depth pulls out to full as the page ends. ## Good for - graphic design studio or branding agency - risograph print room, print shop or small press - poster, book or packaging designer with a portfolio of recent jobs - independent creative studio that rents out a workshop or equipment ## Questions **Is this a free graphic design portfolio website template I can use for clients?** Yes. It is one index.html under the MIT license, so a freelancer or a studio can use it for clients at no cost. The 12 demo photos stay under the Unsplash License and the typeface, Schibsted Grotesk, under the Open Font License; CREDITS.md lists them. Swap in your own work photography before launch. **Can I get a design studio website like this without editing code?** Yes, with [8B's AI website builder](https://8b.com/). You describe the site in a sentence and it designs a new one, not this template. Designing and restyling are free; publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT. **How do I give it to Claude Code, Cursor or Codex?** Download index.html and AGENTS.md, plus LICENSE and CREDITS.md, into an empty folder with the curl lines in AGENTS.md, then open the folder in the agent and paste the prompt on this page. To start without the file, use the graphic design studio website design prompt below. Hand over files, not a link; a link comes back as a summary. **Does it need GSAP or any other library, and what must I keep?** No library. The scroll motion is CSS scroll-driven animation plus a short inline script that measures the page and smooths the mouse wheel. It is about 23 KB gzipped in one file; the GSAP build in the repository is about 69 KB with three more requests. Keep the gate script in the head, the inline kit and the data-8b-motion attributes. **Does the contact form send anything?** No. It checks the three required fields, shows the thank-you line and clears itself, but it sends nothing until you connect Formspree or Netlify Forms; AGENTS.md has both recipes. Without a service, delete the form with its script and keep the email link. Also reword the line that promises a reply within two working days. **What happens in Firefox, with reduced motion or with scripts off?** Without scroll-driven animation support, as in Firefox today, or with reduced motion on, the page shows its static layout: the opening is two plain screens without the photo, the work row is a sideways-scrolling strip and scrolling is the browser's own. Firefox still plays the headline load-in. Without JavaScript the phone menu stays shut and the form sends nothing. ## Before publishing Replace: social preview image, favicon, email address, phone number and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses). - Start a project buttons in the nav bar, the opening and the phone menu list (Contact) lead to #contact now; point them to keep #contact once the form is connected, or your brief or booking page. - See the work button in the opening lead to #work now; point them to keep #work, or your portfolio or case-study index. - Ask for the archive button at the end of the work row lead to #contact now; point them to a link to your archive, a PDF portfolio, or a mailto for archive requests. - Book a slot button in the print room section lead to #contact now; point them to your print-room booking page or calendar, or keep #contact. - Write to us link in the hiring line of the studio section lead to #contact now; point them to a mailto for jobs or your careers page. - How we print link in the second screen of the opening lead to #method now; point them to keep #method, or a page about your print process. - Without scroll-driven animation support (Firefox today) or with reduced motion the page stays in its static layout: the opening is two plain screens and the studio photo inside the giant word does not show, the work row is an ordinary sideways-scrolling strip, the sheet, the words and the portraits sit in place, no process step is marked and scrolling is the browser's own. The headline intro and the looping outline, tag and arrows mark are CSS keyframes that play whenever reduced motion is off, Firefox included; the nav bar still hides on scroll and buttons still move on hover with reduced motion. - The giant second-ink type and the thin extruded layers are decorative; the offset ink is lower contrast against the yellow and should not carry small text. - The pinned work row lasts as long as the track overflows the screen width (five cards, the heading and the closing note), so on a phone, where cards are 76% of the screen wide, it is shorter in pixels but still a long horizontal pass. ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 108+, Safari 16+, Firefox 110+ (it uses container query units, cascade layers, small/dynamic viewport units).