{ "slug": "scrawl", "name": "SCRAWL", "title": "Free streetwear brand website template", "description": "Free HTML streetwear website template for clothing labels and merch, with a drop calendar and a crew wall. AGENTS.md for Claude Code, or no code with 8B.", "kind": "One-page website for a streetwear or print-on-fabric label that sells limited drops and credits its artists", "summary": "A one-page site for a small streetwear label whose prints start as doodles sent in by its crew. It runs from a sideways four-step process strip through a crew wall, a hoodie tour, a charity fund, a drop calendar, a five-question FAQ and a contact poster. Off-white paper, near-black ink, cobalt, yellow and orange, with photos as tilted stickers and details on taped strips.", "fits": [ "streetwear or clothing label with limited drops", "screen-print studio or merch brand", "artist collective or illustrator shop", "skate or music label selling apparel" ], "categories": [ "Shop" ], "tags": [ "streetwear", "clothing brand", "fashion", "merch", "screen printing", "hoodie", "drop calendar", "community", "stickers", "playful", "bold", "gsap", "scrolltrigger", "lenis", "single-file" ], "language": "en", "size_kb": 82, "photos": 14, "fonts": [ "Host Grotesk", "Playpen Sans", "Playwrite US Modern" ], "libraries": [ "https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js", "https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js", "https://cdn.jsdelivr.net/npm/lenis@1.3.27/dist/lenis.min.js" ], "browsers": "Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).", "sections": [ { "key": "navigation", "id": "nav", "heading": "", "about": "top bar: wordmark, four links, search and bag icons, Join the crew button; phone menu sheet" }, { "key": "process: sketch to stitch", "id": "process", "heading": "Sketch to stitch", "about": "first screen: the headline \"Sketch to stitch\" with intro and two buttons, then a pinned sideways strip of four photo steps" }, { "key": "the crew wall", "id": "crew", "heading": "The crew draws it", "about": "heading, intro and button above a collage of six sticker portraits with taped name and print captions" }, { "key": "made heavy: one hoodie up close", "id": "heavy", "heading": "Made heavy", "about": "a hoodie photo with four numbered details: hood, cords, shoulder, pocket" }, { "key": "the brighter fund", "id": "fund", "heading": "The brighter fund", "about": "a charity splash: heading, line, nominate link, two sticker photos and a note" }, { "key": "drop calendar", "id": "drops", "heading": "Drop calendar", "about": "five dated drops in a list, the next one highlighted, each with a name, mood badge, piece count and a Remind me link" }, { "key": "questions", "id": "faq", "heading": "Ask us anything", "about": "heading splash with an email link beside five native details questions" }, { "key": "studio and contact", "id": "contact", "heading": "Say hi", "about": "a giant \"Say hi\" over five taped strips (address, hours, email, phone, doodle address) and a shop photo" }, { "key": "footer", "id": "footer", "heading": "", "about": "wordmark, tagline, five links, three social links, copyright with the Design: 8B credit" } ], "placeholders": [ "og-image", "favicon", "email", "phone", "social" ], "lighthouse": null, "license": { "code": "MIT", "photos": "Unsplash License", "fonts": "SIL Open Font License 1.1" }, "get": { "degit": "npx degit 8bsite/streetwear-brand-website-template my-site", "curl": [ "curl -LO https://raw.githubusercontent.com/8bsite/streetwear-brand-website-template/main/index.html", "curl -LO https://raw.githubusercontent.com/8bsite/streetwear-brand-website-template/main/AGENTS.md", "curl -LO https://raw.githubusercontent.com/8bsite/streetwear-brand-website-template/main/LICENSE", "curl -LO https://raw.githubusercontent.com/8bsite/streetwear-brand-website-template/main/CREDITS.md" ], "agent_prompt": "Read AGENTS.md, then edit index.html. Make this the site for . Replace the brand name, the five drops, the crew captions, the hoodie details and the contacts. Keep the section ids, the classes AGENTS.md lists, four steps and four hoodie details with their pins, and set the contact heading's len to its character count. Ask for missing facts; never invent dates, artists or contacts." }, "links": { "page": "https://8b.com/templates/scrawl/", "md": "https://8b.com/templates/scrawl.md", "json": "https://8b.com/templates/scrawl.json", "demo": "https://8b.com/templates/scrawl/demo.html", "ghDemo": "https://8bsite.github.io/streetwear-brand-website-template/", "repo": "https://github.com/8bsite/streetwear-brand-website-template", "zip": "https://8b.com/templates/scrawl/streetwear-brand-website-template.zip", "use": "https://github.com/new?template_name=streetwear-brand-website-template&template_owner=8bsite", "agents": "https://github.com/8bsite/streetwear-brand-website-template/blob/main/AGENTS.md", "credits": "https://github.com/8bsite/streetwear-brand-website-template/blob/main/CREDITS.md", "raw": { "index": "https://raw.githubusercontent.com/8bsite/streetwear-brand-website-template/main/index.html", "agents": "https://raw.githubusercontent.com/8bsite/streetwear-brand-website-template/main/AGENTS.md", "license": "https://raw.githubusercontent.com/8bsite/streetwear-brand-website-template/main/LICENSE", "credits": "https://raw.githubusercontent.com/8bsite/streetwear-brand-website-template/main/CREDITS.md" }, "preview": "https://8b.com/templates/scrawl/desktop.webp", "phone": "https://8b.com/templates/scrawl/phone.webp", "clip": "https://8b.com/templates/scrawl/scroll.mp4", "og": "https://8b.com/templates/scrawl/og.jpg", "design_md": "https://8b.com/templates/scrawl/DESIGN.md" }, "github": { "repo": "8bsite/streetwear-brand-website-template", "template_repository": true, "topics": [ "html-template", "landing-page", "website-template", "website-templates", "streetwear", "clothing-brand", "fashion-website", "merch-store", "html5", "agents-md", "gsap", "scrolltrigger", "scroll-animation", "lenis", "single-file", "cursor-ai", "static-site", "mit-license", "vibe-coding", "claude-code" ] }, "made_by": { "name": "8B", "url": "https://8b.com/" } }