---
version: alpha
name: "Ceramic tile template by 8B"
description: "A bold, square-grid look for a tile maker or ceramics studio: thirteen saturated glazes on white and navy, hard rules, no rounded corners. Free HTML template by 8B, MIT."
colors:
  primary: "#0a1a35"
  secondary: "#b8144a"
  tertiary: "#ebb52a"
  surface: "#ffffff"
  on-surface: "#0a1a35"
  caption: "#0b4a66"
  claret: "#74152a"
  signal: "#c22a26"
  tangerine: "#ef6420"
  ochre: "#a6772b"
  fern: "#17853a"
  cobalt: "#0a4597"
  lido: "#0b9ad6"
  mist: "#a5c5c9"
  slate: "#7a96b4"
typography:
  headline-display:
    fontFamily: Pliant
    fontSize: 4.1rem
    fontWeight: 800
    lineHeight: 0.98
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Pliant
    fontSize: 3.6rem
    fontWeight: 800
    lineHeight: 1.02
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Pliant
    fontSize: 2rem
    fontWeight: 800
    lineHeight: 1.02
    letterSpacing: -0.02em
  price:
    fontFamily: Pliant
    fontSize: 1.6rem
    fontWeight: 800
    lineHeight: 1.1
  body-lg:
    fontFamily: Instrument Sans
    fontSize: 1.3125rem
    fontWeight: 500
    lineHeight: 1.45
  body-md:
    fontFamily: Instrument Sans
    fontSize: 1.0625rem
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Instrument Sans
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: 1.4
  label-md:
    fontFamily: Pliant
    fontSize: 0.8125rem
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.04em
  button:
    fontFamily: Pliant
    fontSize: 0.875rem
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.03em
rounded:
  none: 0px
spacing:
  section-y: 8rem
  gutter-x: 3.5rem
  nav-height: 4rem
  wall-gap: 2rem
  collage-gap: 10px
  floor-gap: 9px
  rule: 2px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 0.9rem 1.6rem
    height: 3.25rem
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.surface}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 0.9rem 1.6rem
    height: 3.25rem
  button-secondary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
  nav-link:
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
  option-chip:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: 0.7rem 1rem
  option-chip-selected:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: 0.7rem 0.85rem
    height: 3rem
  status-line:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    padding: 0.9rem 1rem
  project-caption:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.body-sm}"
    padding: 0.75rem 1rem
---

# Ceramic tile template by 8B

## Overview

A one-page site for a tile maker or ceramics studio that sells custom glazed tiles to homes, cafes and trade. The one idea is the tile itself: a square frame, a ring and a core, repeated until it becomes the whole page. Colour comes in saturated glazes on a white ground, framed by a deep navy, and nothing is rounded or soft. It is for a buyer who wants to compare colours, try a combination and see a price before asking for samples. The feeling is loud, exact and handmade: glaze names, spec rows and installed projects read like a studio catalogue.

## Colors

The ground is white and the ink is navy; thirteen glaze colours supply everything else.

- Navy `#0a1a35` (primary): body text, buttons, the 2px rules, the navy panels on the second screen and the contact form, and the Night glaze.
- Raspberry `#b8144a` (secondary): the main accent. Button hover fill, focus outline, list bullets, the logo mark's core, the top contact band.
- Marigold `#ebb52a` (tertiary): the designer's default core, the thank-you line, the right contact band, and the focus outline on navy.
- White `#ffffff` (surface): ground, the headline plate, tile rings, form fields and text on navy.
- Harbour `#0b4a66` (caption): secondary text such as pairing notes, spec labels, step numbers and footer lines.
- Claret, Signal, Tangerine, Ochre, Fern, Cobalt, Lido, Mist and Slate: glazes. Fern is the designer's default frame and the left contact band; Cobalt is the second colour of the patterns floor, the core of the fired tile in the making section and the bottom contact band; Mist also sits behind photos while they load.

Never use a glaze for body text. Pair a frame with a core from the pairing notes.

## Typography

Pliant carries everything that is a label or a heading: weights 700 to 800, stretched to 125% width, which makes headings wide and heavy. Labels, links and buttons are uppercase with 0.03 to 0.04em tracking; headings are tight at minus 0.02em. Instrument Sans (400 to 600) handles body text, the intro lines at weight 500 and the form fields.

Headings scale with the viewport: the section heading runs from 2rem on a phone to 3.6rem on a wide screen, and the first-screen heading reaches 4.1rem. Body text is 1.0625rem on a 1.6 line height. The designer's price uses the heading face at 1.6rem. Keep one display face and one text face.

## Layout

A fixed 4rem navigation bar (3.5rem under 480px) sits over full-width bands with a horizontal gutter of 1rem to 3.5rem and vertical section padding of 5rem to 8rem (9rem on the glaze wall). The first screen is a sticky field of tiles, 16 columns wide on a desktop, 12 under 1100px and 8 under 760px, with a white plate holding the headline over it. After that: a 7-column glaze wall (4 columns under 960px, 3 under 420px), a two-column designer with the preview beside the form, a 12-column project collage on a 10px gap that becomes 4 columns under 760px, a three-card size table and a navy contact panel. Under 1080px the links collapse into a full-screen menu; under 900px the designer stacks heading, preview and form.

## Elevation & Depth

There are no drop shadows. Depth comes from stacking and from outlines: the field of tiles is sticky behind a white plate, the navy second screen sits inside the frame the sorted tiles form, the navy contact panel inside four colour bands, and a pinned floor of tiles flips in 3D with a perspective of 1400px. Outlines are inset shadows: a 2px navy ring on option chips, step cards, the FAQ icon and the menu buttons, thickened to 6px on hover for the icons and permanently on the sample board.

## Shapes

Every corner is square. Tiles are nested squares: the frame fills the cell, the ring sits inset at about 18 percent and the core inside it, in variants that show a dot, a square or the full core. Rules are 2px navy lines between FAQ rows and above summaries. Photos are cropped square or 4:3 and 3:2 with no radius, and captions sit on white tabs in the lower corner of each project image.

## Components

- button-primary: navy fill, white uppercase label; on hover a square of Raspberry grows from the centre.
- button-secondary: white with a 3px navy border; on hover navy grows in and the label turns white.
- nav-link: small uppercase Pliant with a dashed underline.
- option-chip: inlay and size choices as outlined boxes; the selected one turns navy with a white label.
- input-field: white, square, 3rem high; navy panels give it contrast.
- status-line: a Marigold bar with navy text for the thank-you message.
- project-caption: a white tab with the venue, city and glazes.

## Motion

GSAP 3.13 with ScrollTrigger and Lenis 1.3 load from jsDelivr. The idea is that tiles move like ceramics on a workbench: they get poured, turned, slid and fitted. Smooth scrolling is softened with a lerp of 0.09.

- Load: the tile layers scale in with a short stagger and the headline rises a third of an em.
- Opening: scrubbed over one screen, tiles leave the middle, turn a quarter and travel to the edges as a giant frame; the rest shrink away, and the second screen scrolls up inside the frame. Two groups of three tiles slide round a two by two square on a 6.6s CSS loop, pause when off screen and shrink away early in the scroll.
- Effects bound by `data-8b-motion`: pour (ring scales from 0 in 0.55s, core in 0.45s with a slight overshoot) on glaze tiles, chips and footer tiles; step, a 0.7s left-to-right clip wipe, on four headings. Both run once at the top 92 or 88 percent of the viewport.
- Patterns: pinned for about two extra screens, 36 two-faced tiles flip in diagonal waves through four layouts.
- Making: pinned for about three extra screens, five step cards slide sideways beside a tile that goes from wet clay to fired colour.
- Samples, trade and contact: scrubbed board shuffle, nested squares sliding apart, four bands closing in.

With reduced motion, the Lenis scroll, the scenes, the pour and wipe effects and the load animations do not run, so the page reads in full. Hover fills and the navigation bar's hide-on-scroll still work.

## Do's and Don'ts

- Do keep every corner square and every rule 2px navy.
- Do build new tiles from three nested squares, coloured with `--a` and `--b`.
- Do pair a frame and a core from the thirteen glazes and keep text off glaze colours.
- Do use Raspberry as the hover fill of filled buttons and the focus outline (Marigold on navy panels).
- Do keep headings in the wide Pliant and body text in Instrument Sans.
- Don't add rounded cards, gradients, drop shadows or icon sets.
- Don't add a third typeface or lowercase labels.
- Don't pin a new section without a plain fallback layout.
- Don't swap the white ground for a tint; colour belongs to the tiles.