---
version: alpha
name: "Pottery studio template by 8B"
description: "One-page pottery studio in pale grey and black with a visible four-column grid, huge tight type and four glaze colours that take over the glazes section's ground in turn. Free HTML template by 8B, MIT."
colors:
  primary: "#0f0f10"
  secondary: "#656869"
  tertiary: "#1d42cf"
  neutral: "#f1f2f2"
  surface: "#ffffff"
  on-surface: "#0f0f10"
  glaze-iron-red: "#b9361a"
  glaze-celadon: "#a9c4b7"
  glaze-tenmoku: "#2a1c15"
typography:
  headline-hero:
    fontFamily: TikTok Sans
    fontSize: 140px
    fontWeight: 760
    lineHeight: 0.9
    letterSpacing: -0.055em
  headline-display:
    fontFamily: TikTok Sans
    fontSize: 104px
    fontWeight: 760
    lineHeight: 0.9
    letterSpacing: -0.055em
  headline-md:
    fontFamily: TikTok Sans
    fontSize: 48px
    fontWeight: 720
    lineHeight: 0.95
    letterSpacing: -0.045em
  statement:
    fontFamily: TikTok Sans
    fontSize: 28px
    fontWeight: 420
    lineHeight: 1.32
    letterSpacing: -0.015em
  body-md:
    fontFamily: TikTok Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: TikTok Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
  label-caps:
    fontFamily: TikTok Sans
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.04em
  button:
    fontFamily: TikTok Sans
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1
  wordmark:
    fontFamily: TikTok Sans
    fontSize: 22px
    fontWeight: 780
    lineHeight: 1
    letterSpacing: -0.06em
  field:
    fontFamily: TikTok Sans
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  none: 0px
  sm: 10px
  full: 999px
spacing:
  gutter: 32px
  section: 168px
  nav-height: 72px
  button-height: 44px
  field-height: 48px
  card-padding: 10px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 24px
    height: 44px
  button-primary-hover:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.surface}"
  button-outline:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.full}"
    padding: 16px
    height: 34px
  button-light:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 24px
    height: 44px
  nav-bar:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    typography: "{typography.label-caps}"
    height: 72px
  card-venue:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.none}"
    padding: 10px
  glaze-row-cobalt:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.surface}"
    typography: "{typography.headline-display}"
  input-field:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.field}"
    rounded: "{rounded.none}"
    height: 48px
---

# Pottery studio template by 8B

## Overview

A one-page site for a pottery studio that makes tableware to order, teaches classes and sells a few pieces. The idea is a pale, quiet gallery wall with the grid left showing: four columns and five hairlines run over the whole page, huge tight type hangs on them, and the studio's four glazes act as colour fields that take over the ground of their section one after another. It is for makers who have several things to sell, restaurants to win, classes to fill and a shelf of pieces, and want them to read as one calm, confident studio.

## Colors

Mostly pale grey and near-black, with four colours that belong to glazes (cobalt also marks small details).

- **Primary (#0f0f10):** text, black buttons, the top rules of the class and benefit lists, the footer and phone menu ground, and the ink on the celadon glaze.
- **Secondary (#656869):** captions and small descriptions under headings, steps, prices and pieces.
- **Tertiary (#1d42cf):** the cobalt: plus marks, the fill that rises through buttons on hover, the form status line, the field focus ring and the cobalt glaze ground.
- **Neutral (#f1f2f2):** the page ground, the nav bar, the about screen and the frame colour behind photos.
- **Surface (#ffffff):** venue cards, button labels on black, footer text and the ink on the cobalt, iron red and tenmoku glazes.
- **Glaze iron red (#b9361a):** the second plus mark colour, the iron red glaze ground and the backing of the small about photo.
- **Glaze celadon (#a9c4b7):** the pale green-grey of the celadon glaze, used only there.
- **Glaze tenmoku (#2a1c15):** the dark brown of the tenmoku glaze, the commissions section ground behind its photos and the loading colour of photo frames.

The grid lines are the primary colour at 9% opacity.

## Typography

One typeface, TikTok Sans, a variable font from weight 400 to 800 and width 100 to 112 percent. Headings use weight 720 to 780 at the widest setting and are tracked tight, from -0.045em to -0.06em, with line height at or below 0.95, so they sit as dense slabs, mostly in sentence case (the hero reads "Pottery Studio"). The nav logo and the footer wordmark are lowercase. Intro statements sit at weight 420 and 20 to 28px. Body is 16px at 400, captions 14px in secondary grey, and labels 12px uppercase semibold tracked at 0.04em. Sizes use clamp: the hero heading runs from 60px to 140px, section headings from about 36px to 108px (the contact heading up to 140px), card titles from 20px to 48px. Glaze names and the footer wordmark are sized from their `--len` value, the character count of the word, so a longer word shrinks to fit.

## Layout

The page is full width with a gutter of 16 to 32px and no maximum width. Everything sits on four equal columns; five fixed vertical hairlines mark them. A 72px bar (60px on phones) places three plus-marked links around a centred lowercase logo and a Contact us button. Section heads put the heading across two or three columns and a short lead in the last column. Text blocks often start on column three, pulled slightly left, which gives the staggered look. Sections take 88 to 168px of vertical padding. Classes, benefits and questions are ruled rows. Below 760px the grid collapses: headings take the full width, two-column lists become one, the shop goes to two columns, and the bar shrinks to the logo and a menu button that opens a full-screen black overlay with seven links.

## Elevation & Depth

There are no shadows. Depth comes from layering: a full-bleed photo that stays fixed behind the commissions text, the about screen sliding over the opening and pushing it back to 93% size under a 50% dark layer, white cards on grey, and glaze fields that change the whole ground. Two soft dark gradients exist only to keep type readable: down from the top of the opening photo, and across the commissions photo from the left.

## Shapes

Photos, venue cards and sections have square corners. Buttons and the round menu button are pills (999px); on hover the round menu button squares off to a 10px radius and fills black. Plus marks are typed characters, not icons. Form fields are underlined, not boxed. Photos are cropped to fill their frames, mostly 3:4, 4:5, 4:3 or 16:10, with near-square frames on the venue cards and the about photo.

## Components

- **button-primary:** black pill, 44px high, white label. On hover four vertical stripes of cobalt rise through it from the bottom in a short stagger.
- **button-outline:** the small Contact us pill, 34px, black outline, uppercase 12px label; its stripes fill black.
- **button-light:** white pill used over photos, with black stripes on hover.
- **nav-bar:** pale grey bar with a hairline underneath; it hides on a scroll down.
- **card-venue:** white card with 10px padding around a photo, a title and a place line.
- **glaze-row:** a full-height row in one glaze colour with a huge name, a note, a finish line and a tall photo.
- **input-field:** 48px high, underline only, 17px text, a cobalt focus ring.

## Motion

The page loads GSAP 3.13 with ScrollTrigger and SplitText, and Lenis 1.3 for smooth scrolling (lerp 0.085), all from jsDelivr. The motion idea: things are cut, pinned, slid, and then the ground changes colour.

- **Opening:** on load the heading lines and the photo rise in over about a second, and the photo drifts sideways, nine seconds each way, while it is on screen. On scroll the screen holds for about 70% of a viewport (56% on phones) while the photo splits into four strips along the grid lines, each rising to full screen. The about screen then slides over, and its statement darkens word by word.
- **Commissions:** the second and third full-screen photos open from the café and hotel cards as they scroll up.
- **Process:** the section pins and the six steps slide sideways while a rule fills; each step photo scales from 72% to full size as it arrives.
- **Glazes:** the section's ground and ink blend into each glaze colour as its row crosses mid-screen.
- **Classes, membership, questions:** blocks rise into view once, staggered by 0.07 seconds; plus marks rotate from -180 degrees to rest as they scroll in.
- **Makers:** three portraits start in one fanned stack and deal out; names fade in after.
- **Shop:** a pale washed-out layer wipes off each photo as it crosses mid-screen.
- **Contact:** the heading's four words slide in from their grid columns.

The bar hides after a downward scroll past 140px and returns on an upward one. With reduced motion the entrance and scroll animations and smooth scrolling are switched off and the page reads as a plain stack: steps in a grid, glaze rows as coloured bands, the first photo behind the commissions text. Button fills and the bar hiding keep working. Without JavaScript the menu overlay cannot open.

## Do's and Don'ts

- Do keep the four columns and five hairlines; two scenes read them.
- Do keep one typeface at the widest setting for headings, tight and in sentence case.
- Do let glaze colours own the colour: add a new glaze as a new row with its own ground and ink.
- Do keep cobalt for small marks and hover fills.
- Do keep square corners on photos and cards, and pills only on buttons.
- Don't add shadows, rounded cards, icon sets or a second display face.
- Don't add a fifth plain accent colour outside the glaze grounds.
- Don't hide the grid lines or cut the grid to three columns.
- Don't add other scroll effects on top of the ones the sections already use.