Free graphic design studio website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: misprint.md, data: misprint.json

Graphic design studio website template: first screen on a phone

About this graphic design studio website template

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.

At a glance, November 2026. 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.

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 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.

Good for:

Graphic design studio or branding agencyRisograph print room, print shop or small pressPoster, book or packaging designer with a portfolio of recent jobsIndependent creative studio that rents out a workshop or equipment

Turn the graphic design studio website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

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

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make it the site for <my design studio: name and city, year founded, services, recent jobs with years, how a project runs, print room rates and hours, team, clients and quotes, contacts>. 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.

In a terminal

npx degit 8bsite/graphic-design-studio-website-template my-site

GSAP build

Prefer GSAP? The same design built with GSAP, ScrollTrigger and Lenis smooth scroll, loaded from jsDelivr, is in the repository as index.gsap.html: 69 KB of code to download gzipped against 23 KB for this one, and the scroll motion also plays in Firefox.

curl -LO https://raw.githubusercontent.com/8bsite/graphic-design-studio-website-template/main/index.gsap.html

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.

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.

Graphic design studio website design and motion

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.

Every value of this graphic design studio website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the graphic design studio website page

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
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
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
Pinned horizontal row: a heading and five job cards with prints and a closing note with a button
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
Heading, two ink discs, a photo and three printing rules
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
Five discipline words in a justified column, each with a one-line note
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
A held poster sheet that is printed in four passes beside four steps
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 for hire: intro, a photo and a rates table
The heading registers, the photo is printed in, and the five rate rows feed in one after another.
seven people, one printer
Four portrait proofs dealt onto a table, with a hiring line
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
Three client quotes with name and business
Each of the three quotes registers its second ink, and the name and business pills feed in under it.
questions we get a lot
A giant question mark beside five questions (native details)
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
Heading, email, phone, address and print room hours beside a three-field form
The heading registers, then the three contact lines and the form fields feed in one by one.
Footer
Footer: studio line, six links, copyright with the Design: 8B credit and a giant extruded wordmark
The full-width wordmark starts flat and low, and its depth pulls out to full as the page ends.

Before you publish the graphic design studio website site

Replace social preview image, favicon, email address, phone number and contact form (sends nothing yet) and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
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.

Questions about this graphic design studio website template

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. 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.

Not a graphic design studio website? More free templates