# Free streetwear brand website template > 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. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026. Streetwear brand website template: one free HTML file for a clothing label that sells limited drops and credits the artists behind them. It scrolls from a pinned sideways process strip through a crew wall, a hoodie close-up and a drop calendar to a contact poster, all in marker doodles on paper. AGENTS.md is included for Claude Code, Cursor and Codex. - Page: https://8b.com/templates/scrawl/ - Live demo: https://8b.com/templates/scrawl/demo.html - DESIGN.md (design tokens and motion rules): https://8b.com/templates/scrawl/DESIGN.md - Repository (GitHub template): https://github.com/8bsite/streetwear-brand-website-template - Download ZIP: https://8b.com/templates/scrawl/streetwear-brand-website-template.zip - Template name in the repository: SCRAWL - At a glance: One 82 KB index.html with its CSS and JavaScript inside, 9 sections, 14 Unsplash photos credited in CREDITS.md, Host Grotesk, Playpen Sans and Playwrite US Modern from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll loaded from jsDelivr. ## 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/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 ``` Then give the agent this prompt: ```text 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. ``` 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/streetwear-brand-website-template my-site`. ## About A clothing brand website template for a small label has to carry a story rather than a catalogue, and this one does: an open call, a crew vote, five dated drops, six credited crew portraits and a charity fund. It suits a screen-print studio, an artist collective, or a skate or music label that wants an apparel website template. Anyone asking how to make a clothing website gets a finished one-page scroll to start from. Vibe coding this clothing website template with Claude Code, Cursor or Codex goes fastest when you give the agent the label's own facts: what you make, how prints are picked, artist names, release days, shipping and returns, address, hours and contacts. The demo invents all of it, including the drop dates, the fund and the doodle pay. Keep the four-step strip and the four hoodie details with their pins as they are, and update the contact heading's length value when its words change. It fits a label that drops limited runs. As a fashion website template it has no product pages, sizes picker or checkout: the bag shows a fixed (0), so a full online shop needs more. A studio that prints for clients may prefer the [print shop](https://8b.com/templates/dotdrum/) template. The strip pins for about a screen and a half of scroll and the hoodie tour for three: long on a short phone. Owners who would rather not edit code can design a different site in 8B's builder. ## Design - Palette: #e6e6e2 (paper page ground and the translucent nav bar once scrolled), #121212 (text, buttons, outlines, rules and the grid lines), #2b48e0 (cobalt: phone menu sheet, the questions splash, step four number, focus outlines), #f8cc2e (yellow: button hover fill, the next drop row and its highlighter, the active hoodie item, step two number, hover blob behind nav icons), #f25c1f (orange: marker underlines, hoodie pins and rings, fund splash, step three number), #ffffff (taped strips, text on near-black buttons and on cobalt, the question cards), #d2d2cc (hoodie photo frame ground and the paper note in the fund section), #4a4a46 (secondary text: drop details, answers, contact labels, copyright line), #b9c3f3 (defined in the variables but not used by any rule in the shipped page) - Fonts: Playpen Sans (display face: heavy uppercase headings and the wordmark, bold uppercase small headings and step numbers), Host Grotesk (body text, labels, buttons, badges and drop details, in regular to semibold weights), Playwrite US Modern (handwritten script used once, for the small tilted line under the first headline) Off-white paper with a faint 64 px grid drawn over it. Most photos are tilted stickers with ragged edges, the hoodie photo sits in a rounded frame, and details sit on white taped strips. The first screen puts the headline and two buttons beside the start of a four-step strip. The crew wall is a collage on desktop and a grid on phones. The drop calendar is five ruled rows, the next one in yellow. Buttons fill with a yellow blob on hover, and the nav icons swell a blob behind them too. Headings are heavy uppercase in a rounded display face, body text is a plain grotesque, and a script face appears only for the small line under the first headline. ## Sections and motion - **Navigation** (navigation): top bar: wordmark, four links, search and bag icons, Join the crew button; phone menu sheet. Motion: The bar hides while you scroll down and returns on scroll up, and on phones a button slides in a full-screen menu sheet. - **Sketch to stitch** (process: sketch to stitch): first screen: the headline "Sketch to stitch" with intro and two buttons, then a pinned sideways strip of four photo steps. Motion: The stage pins and the strip slides sideways through four steps while a dashed marker line draws along it and each photo straightens as it reaches the middle. - **The crew draws it** (the crew wall): heading, intro and button above a collage of six sticker portraits with taped name and print captions. Motion: Six stickers start piled in the middle at odd angles and are dealt out to their places as the wall scrolls into view; the marker underline under the heading draws itself once when it comes into view. - **Made heavy** (made heavy: one hoodie up close): a hoodie photo with four numbered details: hood, cords, shoulder, pocket. Motion: The stage pins for three screens of scroll while the photo zooms and pans to each numbered detail in turn, a ring draws around it and its list item lights up. - **The brighter fund** (the brighter fund): a charity splash: heading, line, nominate link, two sticker photos and a note. Motion: Each photo lands over-scaled and settles once, and the paper note swings to its resting tilt as it crosses the screen. - **Drop calendar** (drop calendar): five dated drops in a list, the next one highlighted, each with a name, mood badge, piece count and a Remind me link. Motion: A yellow highlighter sweeps from row to row down the list as you scroll through it. - **Ask us anything** (questions): heading splash with an email link beside five native details questions. Motion: The heading splash lands with a slap and its marker arrow draws; the five questions are native details elements and open without JavaScript. - **Say hi** (studio and contact): a giant "Say hi" over five taped strips (address, hours, email, phone, doodle address) and a shop photo. Motion: On scroll the cropped Say hi heading shrinks to size while the taped strips swing in from both sides and the shop photo slides up and straightens. - **Footer** (footer): wordmark, tagline, five links, three social links, copyright with the Design: 8B credit ## Good for - streetwear or clothing label with limited drops - screen-print studio or merch brand - artist collective or illustrator shop - skate or music label selling apparel ## Questions **Is this a free clothing website template I can use for a client's label?** Yes. It is one index.html under the MIT license, so you can create a clothing website for free for your own label or a client's. There is no build step. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it. **Can I build a clothing website with a shop and checkout from it?** Not as shipped. The Bag (0) in the nav is fixed text, and the search icon only jumps to the hoodie section. Point both at your store and cart URLs, and send the Shop link to your shop. The page is a brand site: no product pages, no size picker, no payment. **Where does the Send a doodle button go, and is there a form?** It jumps to the contact section, which has no form: five taped strips hold the address, hours, two email addresses and a phone number. Point the button at your submission form or a mailto. To take artwork on the page, add a form service such as Formspree or Netlify Forms. **How do I give it to Claude Code or Cursor?** Put index.html and AGENTS.md in one folder, open it in the agent, and paste the prompt on this page. The agent reads AGENTS.md first, which lists what to keep, what to replace and which facts to ask you for. The curl lines on this page fetch both files. **What must I keep when I change the text?** Keep every id, the data-8b-section, data-8b-motion and data-8b-part attributes, and the classes AGENTS.md lists for the scripts. The process strip and the hoodie tour each hold four items, and each hoodie ring and pin pairs with its item by position; the item's data-x and data-y set where the photo zooms. Set the contact heading's len to its character count. **Can I get a site like this without editing code?** Not this exact template, but yes for a site. [8B's AI website builder](https://8b.com/) designs a new site from a sentence, in its own design, and designing and restyling are free. Pro at $9 a month billed yearly adds publishing with hosting and SSL, full HTML export and AI edits in chat. It also runs inside Claude and ChatGPT. ## Before publishing Replace: social preview image, favicon, email address, phone number and social media links, plus the invented demo facts (prices, dates, addresses). - Shop link in the nav, the phone menu and the footer lead to #heavy, the hoodie section now; point them to your shop URL, or keep #heavy. - Join the crew button in the nav and the phone menu lead to #crew now; point them to your sign-up, newsletter or community page. - See the drops button on the first screen lead to #drops now; point them to your shop or drop page, or keep #drops. - Meet the crew button on the first screen lead to #crew now; point them to keep #crew, or a page about your artists. - Search and Bag (0) icons in the nav lead to #heavy, the hoodie section now; point them to your shop and cart URLs; the bag count (0) is static text. - Send a doodle button in the crew wall lead to #contact now; point them to your submission form or a mailto to the address that takes artwork. - Nominate a club link in the fund section lead to a mailto to the fund address now; point them to your nomination form or the right address. - Remind me links in the five drop rows lead to #contact now; point them to a drop reminder or newsletter sign-up page. - Email link in the questions heading lead to a mailto to the main hello address (the same as the Write strip) now; point them to your support address or help page. - Instagram, TikTok and YouTube links in the footer lead to the networks' home pages now; point them to your profile URLs. - The nav bag shows a fixed (0) and the search icon only jumps to the hoodie section: there is no shop behind either. - The contact section has no form: doodles go to an email address, so connect a form if you want uploads on the page. - The process strip pins for about one and a half screen heights of scroll and the hoodie tour for three; on a landscape phone the sideways strip alone takes about seven. - GSAP, ScrollTrigger and Lenis load from jsDelivr at the end of the page; until they run, the first screen shows the four steps as a plain grid under the headline, and it switches to the sideways strip once the scene starts. ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).