# Free ceramic tile website template

> Free HTML ceramic tile website template with a live tile designer, glaze wall and trade specs. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.

Ceramic tile website template: one free HTML file for a tile maker or ceramics studio that sells custom glazed tiles to homes, cafes and trade. It has a glaze wall, a live tile designer with a price per square metre, trade specs and a sample box, in saturated colour. AGENTS.md lets Claude Code, Cursor or Codex adapt it.

- Page: https://8b.com/templates/inset/
- Live demo: https://8b.com/templates/inset/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/inset/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/ceramic-tile-website-template
- Download ZIP: https://8b.com/templates/inset/ceramic-tile-website-template.zip
- Template name in the repository: Inset
- At a glance: One 115 KB index.html with its CSS and JavaScript inside, 12 sections, 10 Unsplash photos credited in CREDITS.md, Instrument Sans and Pliant 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/ceramic-tile-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/ceramic-tile-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/ceramic-tile-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/ceramic-tile-website-template/main/CREDITS.md
```

Then give the agent this prompt:

```text
Read AGENTS.md, then edit index.html. Make this the site for <my tile or ceramics business: name, city, products, colour or size options with prices per square metre, how a piece is made, projects, sample and trade terms, showroom, how people enquire>. Replace first the brand name, the footer wordmark's len, the glaze names and pairing notes, prices, specs and contacts. Keep the section ids, the data-price, data-extra and data-core attributes and the counts AGENTS.md lists. Ask me for missing facts and never invent prices, specs, firing claims 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/ceramic-tile-website-template my-site`.

### Ceramic tile website design prompt for any AI tool

Use this to build a ceramic tile maker's site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It writes this template's design as decisions; with the template itself, the short prompt above is enough.

```text
Build a one-page website for a ceramic tile maker that sells custom glazed tiles to homes, cafes and trade, where the goal is a sample box or trade enquiry. Sections in order: navigation, opening field of tiles, glaze wall, floor patterns, a live tile designer with a price per square metre, how a tile is made, projects, samples, trade specs, FAQ, contact form, footer. Type: Pliant 700 to 800 at 125% width for headings, labels, buttons and prices, Instrument Sans for body text and form fields. Colours: #ffffff ground, #0a1a35 navy for text, rules and panels, #b8144a raspberry, #ebb52a marigold, #17853a fern and #0a4597 cobalt as glaze colours. Style: every tile is three nested CSS squares, square corners, 2px navy rules, buttons that fill from a growing centre square. Avoid a purple gradient, three identical icon cards and a centred hero with two buttons. One motion idea: the opening field of tiles shrinks away and a band of tiles turns into a giant frame as you scroll; respect prefers-reduced-motion. Copy is short and concrete. Ask me for glaze names, size prices, extras, trade terms, lead times, showroom address and contacts; never invent them, leave marked placeholders and list them. One primary action, Order a sample box, repeated in the nav, the designer and the contact form. Check at 390 px, tap targets 44 px, visible keyboard focus and no console errors.
```

## About

Tile web design comes down to showing colour and taking an enquiry, and this page does both for a pressed-tile maker, a ceramics workshop or a showroom with its own range. A tile website design like this lists the glazes, lets a visitor build a tile and see the price, then offers a sample box or a trade account. Makers of rugs, glass, wallpaper or paving who sell by colour and size can reuse the designer.

As a ceramic tile website template for Claude Code, Cursor or Codex, vibe coding needs the facts only the maker has: glaze names, the price per square metre for each size, inlay extras, trade terms, lead times and showroom details. It should rename the glazes in the wall, both swatch rows, the pairing notes and the captions together, update the footer wordmark's len, keep the data-price, data-extra and data-core attributes and invent no prices or specs. The Codex CLI reads AGENTS.md by itself, as [the Codex walkthrough](https://8b.com/templates/for-codex/) notes.

This is the right base when the product is one custom item with colour and size choices and buyers order samples first. A showroom that sells many ranges and fits them itself suits the [showroom-led tile shop](https://8b.com/templates/tegel/) template better, and a ceramics website template for tableware would need the tile drawings replaced. The weak spot is the designer: it changes the preview and the price shown, and nothing else. People who do not code can use 8B's builder instead.

## Design

- Palette: #ffffff (page ground, the headline plate, tile rings, text on the navy panels, form fields), #0a1a35 (body text, buttons and the outlined button's hover fill, the 2px rules, the navy panels, the Night glaze), #b8144a (Raspberry glaze, the filled button's hover fill, focus outline, list bullets, the logo mark's core, the top contact band), #74152a (Claret glaze), #c22a26 (Signal glaze), #ef6420 (Tangerine glaze), #ebb52a (Marigold glaze, the designer's default core, the thank-you line, the right contact band, focus outline on navy), #a6772b (Ochre glaze), #17853a (Fern glaze, the designer's default frame, the left contact band), #0b4a66 (Harbour glaze and the secondary text: pairing notes, spec labels, step numbers, layout descriptions, footer lines), #0a4597 (Cobalt glaze, the second colour of the patterns floor, the core of the fired tile, the bottom contact band), #0b9ad6 (Lido glaze), #a5c5c9 (Mist glaze and the backgrounds behind photos while they load), #7a96b4 (Slate glaze)
- Fonts: Pliant (headings, labels, buttons, links and the price in weights 700 to 800, stretched to 125% width; labels and buttons are uppercase with tracking), Instrument Sans (body text, intro lines and form fields in weights 400 to 600)

Below a sticky first-screen field of small tiles (16 columns on a desktop, 12 under 1100px, 8 under 760px) sit full-width bands: a 7-column glaze wall (4 under 960px, 3 under 420px), a 12-column collage of six project photos with captions on white tabs, and three size cards with spec rows. Navy panels hold the second screen and the contact form, which four colour bands frame.

It is a website with tiles in the literal sense: every tile is three nested squares drawn in CSS, so these html tiles need no images. Corners are square, rules are 2px navy lines and buttons fill on hover. The pinned floor flips [run on GSAP's ScrollTrigger](https://8b.com/templates/animated/).

## Sections and motion

- **Navigation** (navigation): fixed bar: logo with a tile mark, seven links, Sample box button and a menu button; full-screen menu with a colour square per link under 1080px; hides on scroll down
- **Square tiles, glazed by hand, laid by the thousand.** (opening): two screens: a field of square tiles under a headline plate with two buttons, then a navy core explaining that every tile is three squares, with a photo. Motion: On load the tiles pour in and the headline rises; scrolling the first screen shrinks many tiles away and sends a band of others, turned a quarter and in colour order, to the screen edges as a giant frame, while two groups of three tiles slide round a small square on a loop.
- **Thirteen glazes, fired to stay loud.** (glazes): a wall of thirteen glaze tiles with names and pairing notes, plus a note about the clay. Motion: The heading is revealed in a hard left-to-right wipe and each glaze tile pours in, ring then core, as it arrives.
- **One tile, four floors.** (patterns): a held screen where a 6 by 6 floor of tiles flips between four layouts while a list marks the current one. Motion: Pinned for about two screens of scroll: a 6 by 6 floor of two-faced tiles flips in diagonal waves through four layouts while the list marks the current one.
- **Design your own tile.** (maker): a tile designer: pick frame glaze, core glaze, inlay and size, see a 5 by 5 floor and a live price per square metre. Motion: Every choice updates the 5 by 5 preview floor, the one-line summary and the price per square metre; only the heading animates on scroll.
- **From wet clay to a loud floor.** (making): five making steps on a sideways track beside one tile that goes from clay to fired colour (held screen). Motion: Pinned for about three screens of scroll: five steps slide sideways while one tile goes from wet clay to dry, to chalky raw glaze, to fired colour.
- **Laid in kitchens, pools and cafés.** (projects): a collage of six installed projects with captions, among small coloured tile chips. Motion: The heading wipes in and the eight small tile chips between the photos pour in as they arrive.
- **Six tiles in a box, at your door in three days.** (samples): sample box offer with three facts, two actions and a photo, beside a sliding-puzzle board of eight tiles. Motion: Scrubbed with the scroll, the eight tiles of the sample board start scrambled and slide one square at a time into colour order.
- **For architects, builders and anyone ordering by the pallet.** (trade): trade offer text and three size cards with specs, each with a nested square drawing. Motion: The three squares start nested inside one another and slide apart over their own spec columns as the cards come into view.
- **Asked every week.** (faq): six questions and answers as native details, beside a heading and a contact link. Motion: The heading wipes in; questions open and close without JavaScript, and the plus sign turns into a minus.
- **Come and see them fired.** (contact): showroom details and a project enquiry form inside a frame of four colour bands. Motion: Four colour bands slide in from beyond the section's edges and settle into a frame around the navy contact panel.
- **Footer** (footer): a row of thirteen tiles, four link columns, a large wordmark, and a legal line with the Design: 8B credit. Motion: The row of thirteen tiles pours in as it arrives.

## Good for

- tile maker, ceramics studio or tile showroom
- custom product maker with colour or size options (rugs, glass, wallpaper, paving)
- interior materials supplier selling to homes and trade
- any craft brand that wants a bold colour grid and a simple configurator

## Questions

**Is there a free HTML website template for a tile maker?** Yes. This is one HTML file under the MIT licence with inline CSS and scripts, GSAP and Lenis loaded from jsDelivr, and ten Unsplash photos. It covers glazes, floor patterns, a designer, how a tile is made, projects, samples, trade specs, a FAQ and a contact form.

**Does the tile designer take orders?** No. It changes the preview floor, the one-line summary and the price shown, which is the size price plus the inlay extra, and it sends nothing. The Put it in a sample box button only jumps to the samples section. Connect your shop or an order form first.

**How do I give this template to Claude Code or Cursor?** Download index.html and AGENTS.md, which the repository lists as curl commands, and paste the short prompt above into Claude Code, Cursor or Codex. The agent reads AGENTS.md first, so it knows which attributes to keep. Starting without the template? Use the ceramic tile website design prompt below. The [comparison of agents and builders](https://8b.com/templates/vibe-coding/) covers these tools.

**What must stay when I rename glazes or change prices?** Keep the data-price attribute on each size and data-extra and data-core on each inlay, because the designer reads them. Rename each glaze in the wall, in the frame and core swatches, the pairing notes and the project captions together, and recolour through the CSS variables.

**Does the contact form send anything?** No. The form checks the required fields, shows the thank-you line and resets, so nothing leaves the page. Connect Formspree or Netlify Forms, or point it at your email, before publishing; AGENTS.md lists the steps for this form and for the designer.

**Can I get a site like this without editing code?** Yes, through [8B's AI website builder](https://8b.com/). You describe the site in a sentence and its engine designs a new one, not this template. 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.

## Before publishing

Replace: social preview image, favicon, contact form (sends nothing yet), phone number, email address and social media links, plus the invented demo facts (prices, dates, addresses).

- Sample box button in the nav lead to #samples now; point them to your sample order page or shop.
- Design your tile and Order samples buttons in the first screen lead to #maker and #samples now; point them to keep, or point to your configurator and sample shop.
- Put it in a sample box button under the tile designer, and Build your box in the samples section lead to #samples and #maker now; point them to your checkout or an order form that receives the chosen frame, core, inlay and size (the designer form posts nothing).
- Order the studio mix link and Ask for a trade account button lead to #contact now; point them to your order page or trade account form.
- Send to the studio button in the contact form lead to submits to the same page; nothing is sent, a script shows the thank-you line now; point them to your form service (Formspree, Netlify Forms) or your email.
- Instagram and Pinterest links in the footer lead to the networks' home pages now; point them to your profile addresses.
- Newsletter link in the footer lead to mailto: placeholder now; point them to your newsletter sign-up page.
- The form and the designer send nothing: the contact form posts to the same page and the designer form only changes the preview. Connect a form service or a shop before publishing.
- The patterns and making sections hold the screen for 310svh and 420svh; on short or landscape phone screens the stage is tight.
- The opening field is made of about two hundred small elements and sorts them with a script on every refresh; on slow phones the first scroll can feel heavier than the rest of the page.
- The decorative tile chips in the projects collage are hidden from screen readers; the captions carry the project facts.

## 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 121+ (it uses color-mix(), container query units, :has(), cascade layers, small/dynamic viewport units).