{
 "slug": "misprint",
 "name": "Misprint",
 "title": "Free graphic design studio website template",
 "description": "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.",
 "kind": "One-page website for a graphic design studio with its own risograph print room",
 "summary": "A one-page site for a design studio that also runs a two-drum riso print room: a giant extruded word you dive through, a pinned row of five recent jobs, three printing rules, five disciplines, a four-step process, a rates table for the print room, a team of four, three client quotes, five questions and a contact form. Saturated yellow paper, deep pine ink, a green second ink that sits slightly off register.",
 "fits": [
  "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"
 ],
 "categories": [
  "Agency and studio",
  "Shop"
 ],
 "tags": [
  "graphic design studio",
  "design studio",
  "branding agency",
  "risograph",
  "print room",
  "print shop",
  "portfolio",
  "posters",
  "two-colour",
  "yellow",
  "extruded type",
  "css scroll animations",
  "gsap",
  "scrolltrigger",
  "lenis",
  "single-file"
 ],
 "language": "en",
 "size_kb": 85,
 "photos": 12,
 "fonts": [
  "Schibsted Grotesk"
 ],
 "libraries": [],
 "browsers": "Chrome and Edge 108+, Safari 16+, Firefox 110+ (it uses container query units, cascade layers, small/dynamic viewport units).",
 "sections": [
  {
   "key": "navigation",
   "id": "nav",
   "heading": "",
   "about": "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"
  },
  {
   "key": "opening",
   "id": "opening",
   "heading": "perfect is not our type",
   "about": "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"
  },
  {
   "key": "work",
   "id": "work",
   "heading": "fresh off the drum",
   "about": "pinned horizontal row: a heading and five job cards with prints and a closing note with a button"
  },
  {
   "key": "method",
   "id": "method",
   "heading": "two inks, no excuses",
   "about": "heading, two ink discs, a photo and three printing rules"
  },
  {
   "key": "make",
   "id": "make",
   "heading": "what leaves the room",
   "about": "five discipline words in a justified column, each with a one-line note"
  },
  {
   "key": "process",
   "id": "process",
   "heading": "how a job goes to print",
   "about": "a held poster sheet that is printed in four passes beside four steps"
  },
  {
   "key": "print-room",
   "id": "print-room",
   "heading": "the print room is open",
   "about": "print room for hire: intro, a photo and a rates table"
  },
  {
   "key": "studio",
   "id": "studio",
   "heading": "seven people, one printer",
   "about": "four portrait proofs dealt onto a table, with a hiring line"
  },
  {
   "key": "voices",
   "id": "voices",
   "heading": "said over the proofs",
   "about": "three client quotes with name and business"
  },
  {
   "key": "faq",
   "id": "faq",
   "heading": "questions we get a lot",
   "about": "a giant question mark beside five questions (native details)"
  },
  {
   "key": "contact",
   "id": "contact",
   "heading": "say something imperfect",
   "about": "heading, email, phone, address and print room hours beside a three-field form"
  },
  {
   "key": "footer",
   "id": "footer",
   "heading": "",
   "about": "footer: studio line, six links, copyright with the Design: 8B credit and a giant extruded wordmark"
  }
 ],
 "placeholders": [
  "og-image",
  "favicon",
  "email",
  "phone",
  "form"
 ],
 "lighthouse": null,
 "license": {
  "code": "MIT",
  "photos": "Unsplash License",
  "fonts": "SIL Open Font License 1.1"
 },
 "get": {
  "degit": "npx degit 8bsite/graphic-design-studio-website-template my-site",
  "curl": [
   "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"
  ],
  "agent_prompt": "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."
 },
 "links": {
  "page": "https://8b.com/templates/misprint/",
  "md": "https://8b.com/templates/misprint.md",
  "json": "https://8b.com/templates/misprint.json",
  "demo": "https://8b.com/templates/misprint/demo.html",
  "ghDemo": "https://8bsite.github.io/graphic-design-studio-website-template/",
  "repo": "https://github.com/8bsite/graphic-design-studio-website-template",
  "zip": "https://8b.com/templates/misprint/graphic-design-studio-website-template.zip",
  "use": "https://github.com/new?template_name=graphic-design-studio-website-template&template_owner=8bsite",
  "agents": "https://github.com/8bsite/graphic-design-studio-website-template/blob/main/AGENTS.md",
  "credits": "https://github.com/8bsite/graphic-design-studio-website-template/blob/main/CREDITS.md",
  "raw": {
   "index": "https://raw.githubusercontent.com/8bsite/graphic-design-studio-website-template/main/index.html",
   "agents": "https://raw.githubusercontent.com/8bsite/graphic-design-studio-website-template/main/AGENTS.md",
   "license": "https://raw.githubusercontent.com/8bsite/graphic-design-studio-website-template/main/LICENSE",
   "credits": "https://raw.githubusercontent.com/8bsite/graphic-design-studio-website-template/main/CREDITS.md"
  },
  "preview": "https://8b.com/templates/misprint/desktop.webp",
  "phone": "https://8b.com/templates/misprint/phone.webp",
  "clip": "https://8b.com/templates/misprint/scroll.mp4",
  "og": "https://8b.com/templates/misprint/og.jpg",
  "design_md": "https://8b.com/templates/misprint/DESIGN.md"
 },
 "github": {
  "repo": "8bsite/graphic-design-studio-website-template",
  "template_repository": true,
  "topics": [
   "html-template",
   "landing-page",
   "website-template",
   "graphic-design-studio",
   "design-studio",
   "risograph",
   "print-studio",
   "portfolio-website",
   "agents-md",
   "gsap",
   "scrolltrigger",
   "scroll-animation",
   "lenis",
   "no-dependencies",
   "css-scroll-driven-animations",
   "single-file",
   "cursor-ai",
   "mit-license",
   "vibe-coding",
   "claude-code"
  ]
 },
 "made_by": {
  "name": "8B",
  "url": "https://8b.com/"
 }
}