Free fashion 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: outre.md, data: outre.json

About this fashion brand website template

Fashion brand website template: one free HTML file for a clothing label that sells a seasonal collection and runs a few stores, with four priced looks, five colour bands, a street photo notebook and three store cards. The look is white and ink. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

At a glance, October 2026. One 86 KB index.html with its CSS and JavaScript inside, 12 sections, 21 Unsplash photos credited in CREDITS.md, Host Grotesk and Schibsted Grotesk from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

Anyone looking at fashion designer website templates, or a clothing brand website template for a label with a few shops, needs the same things: a seasonal edit with prices, a lookbook feel, store addresses and a newsletter. This page carries all four. It leans editorial, closer to a designer's showcase than to a catalogue grid, so an outerwear maker, a knitwear label or a boutique can start here.

If you are working out how to make a clothing brand website, take this fashion brand website template for Claude Code, Cursor or Codex and give the agent the real facts first: name, season, products with prices, fabric claims, sizing, delivery, returns and store hours. The demo invents every one. The agent then replaces the name everywhere and updates each --len, the character count that sizes a large word. Vibe coding the rest is safe while the section ids and listed classes stay.

As an apparel website template it suits a label that sells a small seasonal edit and wants a loud, colour-led look. A label that sells limited drops and credits its artists is closer to the streetwear template. A catalogue of hundreds of products needs a shop platform behind it, because Add to bag here only counts clicks. If you would rather not touch code, 8B can design a site from a sentence.

Good for:

Fashion label, clothing brand or outerwear makerBoutique or concept store with a seasonal edit and a few shopsAccessories, footwear or sportswear brandAny product brand with a collection, a lookbook and store locations

Turn the fashion 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/fashion-brand-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/fashion-brand-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/fashion-brand-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/fashion-brand-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my label: name, city, season, products with prices and fabrics, sizing, delivery and returns terms, store addresses and hours, social profiles>. Replace first the label name, the four looks and prices, the colour descriptions, the stores and the FAQ. Update every --len to the new word's character count and edit outline copies with the visible ones. Keep the section ids and the classes AGENTS.md lists. Ask me for missing facts and never invent prices, policies, reviews, addresses or contacts.

In a terminal

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

Fashion brand website design prompt for any AI tool

Paste this into Claude Code, Codex, Cursor, Lovable, v0 or Bolt to build a fashion brand site from scratch, or hand it to a designer. It is this template's design as decisions, also saved as its DESIGN.md token sheet; with the template itself, the short prompt is enough.

Build a one page website for a clothing label that sells a small seasonal edit and runs a few stores. Sections in order: nav with a bag counter, opening with a giant two line title and one tall portrait photo, four priced looks with Add to bag, an index of rows that swap a tilted photo on hover, a short quote, a wide new arrivals photo, five full width colour bands, studio story with three facts, a notebook of six street photos, six FAQ entries, store list with a city in huge type per row, footer wordmark. Type: Schibsted Grotesk heavy uppercase for titles and the wordmark, Host Grotesk 15px for body text and labels. Colours: #ffffff background, #111111 text and black bands, #767676 muted grey, band colours #d92b1a, #f2b705 and #1f4fd6. Motion: one idea, a photo panel sliding down through the title and landing on a photo stack; everything else is gentle fades. Respect prefers-reduced-motion. Do not use purple gradients, three icon cards or a centered hero with two buttons. Copy is short and concrete. Ask me for prices, fabrics, sizing, delivery, returns, store addresses and hours, and never invent them; leave visible placeholders. One primary action, Shop the edit, repeated in the nav and after the colour bands. Check at 390 px width, tap targets of 44 px, visible keyboard focus and no console errors, and list every placeholder when done.

Fashion brand website design and motion

Palette

#ffffff page background, text on the black edit and footer, outline strokes on the lens copies#111111 text, buttons, nav badge, the black edit and footer sections, the menu sheet and the lit store row#767676 grey start of the statements that fill, the giant Colour word, inactive index rows, the brand row and hairlines in the FAQ and footer#555555 small body text, FAQ answers and the quote attribution#e6e6e6 hairlines: nav border, first-screen grid, studio facts and store dividers#f2f2f2 round icon buttons, FAQ section ground, photo placeholders and the start of the quote gradient#a6a6a6 small grey text on black: edit caption, footer legal line and the address of a lit store#d92b1a the first colour band, Signal red, with white text#f2b705 the second colour band, Marigold, with ink text#1f4fd6 the third colour band, Cobalt, with white text, and the ground behind the new arrivals photo#f4a3c4 the fourth colour band, Peony, with ink text#a9d8ec the fifth colour band, Glacier, with ink text

Fonts

Schibsted Grotesk: display and headings: heavy uppercase for the giant title, brand row and footer wordmark, semibold uppercase for statements, bold sentence case for the quote and subheads, semibold FAQ questions, medium uppercase index rows and store cities, and the extra bold logo
Host Grotesk: body text at 15px regular, small semibold uppercase labels with tracking, field labels and buttons

The first screen is a white field cut by four hairlines, with a giant two-line title, a tall portrait panel in front of it and corner captions. The edit and the footer are black bands between white and grey sections. Four looks sit in a row, two by two on phones. Index rows are staggered by indents of 26%, 2%, 14% and 6%. Colour bands run full width, and each store row is headed by its city in huge type.

The page itself is white and ink. Five season colours in --color-8 to --color-12 fill the palette bands, so recolouring is a variable edit. Type is heavy uppercase Schibsted Grotesk over small Host Grotesk text, and six street photos drift at different depths, a layered scroll effect.

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

Navigation
Fixed bar: logo mark and wordmark, three links, search, bag with a counter and a menu button; full-screen sheet with four links; hides on scroll down
Fearless Layers
Two screens: a giant two-line title with a portrait panel and corner captions, then a brand statement over a brand row and two stacked photo cards
Lenis smooths the scroll page-wide; on scroll the portrait panel slides down through the title as a lens that outlines each letter it crosses, then shrinks, tilts and lands on a stack of two photos while the statement fills from grey to ink.
Four looks built from one season of colour, made to swap, stack and wear every single day.
A statement and four looks with name, price and Add to bag, dealt from a pile behind a giant word
The four looks start as a tilted pile and deal out to their columns as you scroll while the giant Colour word rises, and Add to bag raises the nav counter.
Index
A category list of four rows with a tilted photo preview that follows the active row
As you scroll or point at a row it turns from grey to ink and wipes in a new tilted photo that follows it.
Voice
A customer quote beside a photo and a rotating burst
The photo slides up from a tilt into place, the quote fills from grey to ink word by word and the burst icon spins on a slow loop.
Just landed
A wide cobalt photo with a giant title and a shop arrow, with a short offer line below
The wide photo is cut into five vertical strips (three on phones) that slide into line as the title Just landed moves in from the right and fills from outline to solid white.
The season in five colours
Five full-width colour bands that stack like layers, each naming a colour, a garment type and what it is used for
The five colour bands stick to the screen edge one after another, and each shrinks and lets its name drift up as the next band covers it.
One cutting room in Antwerp, where surplus rolls become panels and panels become coats.
A photo of the cutting room beside a statement and three facts on hairlines
The photo slides up from a tilt into place, the heading fills from grey to ink and a hairline draws above each of the three facts.
Street Notebook
A heading and six street photos that float up from different depths around it
Six street photos rise from different depths with different scale and tilt while the heading thickens from weight 400 to 900.
Before you order
Five questions as native details beside a heading and a contact link
A hairline draws above each question on arrival, and the plus turns into a cross as an answer opens.
Come and try a stack on, or write to the cutting room
Three store cards (Antwerp, Lisbon, Seoul) and a message form
A black bar slides down the store list and lights each city in turn, turning that row white on black.
First look at every drop
Newsletter sign-up, three link columns, a hairline, a large wordmark, copyright with the Design: 8B credit
A hairline draws across above the giant footer wordmark.

Before you publish the fashion brand website site

Replace social preview image, favicon, phone number, contact form (sends nothing yet), email address and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Shop the edit button in the first screen, Shop new arrivals arrow and See every new piece link in the arrivals section lead to #collections now; point them to your shop, collection or new arrivals page.
Add to bag buttons on the four looks lead to a script adds one to the bag counter in the nav and shows Added to bag; nothing is stored now; point them to your cart or checkout (for example a Shopify, Snipcart or Stripe button per product).
Bag icon in the nav lead to #collections now; point them to your cart page.
Browse the index icon in the nav and the four index rows (Outerwear, Knitwear, Accessories, Archive sale) lead to #index and #collections now; point them to your category pages.
Delivery and returns link in the footer and Ask the cutting room link in the FAQ lead to #faq and #contact now; point them to your shipping and returns page, or keep.
Send message button in the contact form and Sign up button in the newsletter form lead to no submission; a script shows a thank-you line now; point them to your form service (Formspree, Netlify Forms) or your mailing list provider.
Instagram, TikTok and Pinterest links in the footer lead to the networks' home pages now; point them to your profile addresses.
The Add to bag button only counts clicks in the nav badge; there is no cart. Connect a real shop before publishing.
The lens effect on the first two screens rewrites clip paths on the outline copies on every scroll update, so it is the busiest script on the page; it is skipped with reduced motion.
The shutter strips in the arrivals section are copies of the photo, so the image loads once but is drawn five times (three on phones) while the effect is live.
The index preview photos have empty alt text, so the category photos are not announced; the rows carry the meaning.

Questions about this fashion brand website template

Can I use this clothing store website template for client sites?

Yes. It is one index.html under the MIT license, free for personal and client work. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, and there is no build step and no CMS. The 21 photos are Unsplash images, the two typefaces are under the Open Font License, and CREDITS.md lists both.

Do Add to bag and the forms work?

Not yet. Add to bag only raises the bag counter in the nav and shows Added to bag; there is no cart. The contact and newsletter forms check their fields, show a thank-you line and send nothing. Connect Shopify, Snipcart or a Stripe button per product, and Formspree, Netlify Forms or your mailing list provider, using AGENTS.md.

How do I give it to Claude Code, Cursor or Codex?

Put index.html and AGENTS.md in an empty folder with the curl lines from AGENTS.md, then tell the agent to read AGENTS.md before editing index.html. Give it the files, not the page address. To start from nothing, paste the fashion brand website design prompt below into Lovable or Bolt, or load the files straight into v0.

What breaks if I change the text?

The large words. Each takes its size from a --len equal to its character count, outline copies included. Keep the section ids, the data-8b-section and data-8b-motion attributes and the classes AGENTS.md lists. 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 get a site like this without editing code?

Yes, with 8B instead of this file. 8B's AI website builder designs a new site from a one-sentence description, in its own design, not this one. 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.

What happens on a phone, with reduced motion or with scripts off?

On a phone the nav links move into a full-screen menu of four links and the looks sit two to a row. With reduced motion on, entrance and scroll animations and smooth scrolling are off, while hover fills and the nav hiding on scroll keep running. Without JavaScript the phone menu cannot open and the forms reload the page.

Not a fashion brand website? More free templates