Free streetwear brand 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: scrawl.md, data: scrawl.json

About this streetwear brand website template

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.

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

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

Good for:

Streetwear or clothing label with limited dropsScreen-print studio or merch brandArtist collective or illustrator shopSkate or music label selling apparel

Turn the streetwear brand 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/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

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my clothing or merch label: what I make, how prints are chosen and credited, my artists, release days, next drops, shipping and returns, studio and contacts>. 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.

In a terminal

npx degit 8bsite/streetwear-brand-website-template my-site

Streetwear brand website design and motion

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.

Every value of this streetwear brand 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 streetwear brand website page

Navigation
Top bar: wordmark, four links, search and bag icons, Join the crew button; phone menu sheet
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
First screen: the headline "Sketch to stitch" with intro and two buttons, then a pinned sideways strip of four photo steps
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
Heading, intro and button above a collage of six sticker portraits with taped name and print captions
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
A hoodie photo with four numbered details: hood, cords, shoulder, pocket
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
A charity splash: heading, line, nominate link, two sticker photos and a note
Each photo lands over-scaled and settles once, and the paper note swings to its resting tilt as it crosses the screen.
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
A yellow highlighter sweeps from row to row down the list as you scroll through it.
Ask us anything
Heading splash with an email link beside five native details questions
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
A giant "Say hi" over five taped strips (address, hours, email, phone, doodle address) and a shop photo
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
Wordmark, tagline, five links, three social links, copyright with the Design: 8B credit

Before you publish the streetwear brand website site

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

Questions about this streetwear brand website template

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

Not a streetwear brand website? More free templates