---
version: alpha
name: "Home renovation template by 8B"
description: "A home renovation design-and-build site set on warm graph paper with cobalt plan lines and pencil notes. Free HTML template by 8B, MIT."
colors:
  primary: "#2446d0"
  secondary: "#c23d27"
  tertiary: "#cfb98f"
  neutral: "#e9dfcb"
  surface: "#fbf8f1"
  on-surface: "#2a2926"
  navy: "#1b2457"
  caption: "#48443d"
typography:
  headline-lg:
    fontFamily: Schibsted Grotesk
    fontSize: 72px
    fontWeight: 500
    lineHeight: 0.98
    letterSpacing: -0.035em
  headline-md:
    fontFamily: Schibsted Grotesk
    fontSize: 23px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.015em
  wordmark:
    fontFamily: Schibsted Grotesk
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.04em
  body-lg:
    fontFamily: Schibsted Grotesk
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Schibsted Grotesk
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0.005em
  button:
    fontFamily: Schibsted Grotesk
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.005em
  pencil-note:
    fontFamily: Playpen Sans
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0.04em
rounded:
  sm: 2px
  md: 3px
spacing:
  unit: 24px
  grid-fine: 24px
  grid-coarse: 120px
  page-width: 1180px
  page-gutter: 24px
  field-height: 48px
components:
  button-primary:
    backgroundColor: "{colors.navy}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 6px
    height: 44px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
  button-icon-tile:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    size: 32px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 5px
    height: 44px
  button-secondary-hover:
    backgroundColor: "{colors.navy}"
    textColor: "{colors.surface}"
  card-sheet:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 28px
  price-sheet-extend:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: 28px
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 11px
    height: 48px
  pencil-note:
    textColor: "{colors.caption}"
    typography: "{typography.pencil-note}"
---

# Squarefoot, a home renovation template

## Overview

Squarefoot is a one-page site for a design-and-build firm that does kitchens, extensions, lofts and bathrooms for owners of older houses. The one idea is stationery, not steel: the page is a sheet of warm graph paper, and every section is a physical object laid on it, such as a tracing sheet, a contact sheet, a floor plan, a price sheet, a diary, a letter or a manila folder. The feeling is calm, careful and a little handmade, a firm that sketches at your kitchen table. All names, prices and addresses in the demo are invented.

## Colors

- **Primary, cobalt (#2446d0):** plan lines, room borders and room titles, step numbers, the duotone tone laid over photos, the Extend price sheet, the footer field, focus rings and the hover fill of buttons.
- **Secondary, vermilion (#c23d27):** the Rebuild price sheet, the icon tile inside buttons, link underlines on hover, diary margin lines, snag ticks and strike lines, the Signed off stamp and the stamp box on the envelope.
- **Tertiary, manila (#cfb98f):** the Refresh price sheet, the questions folder and its tab, the envelope, the tape on diary photos and footer column titles.
- **Neutral, paper (#e9dfcb):** the page ground under the grid, and the base of the duotone photos.
- **Surface, warm white (#fbf8f1):** photo frames, cards, form fields, captions, and text on cobalt, vermilion and navy.
- **On-surface, warm black (#2a2926):** body text, the faint graph lines and borders.
- **Navy (#1b2457):** button bases, the letter section ground, the footer panel and the dim over the opening photo.
- **Caption (#48443d):** pencil notes, small captions and legends.

## Typography

Two families only. **Schibsted Grotesk** (400 to 600) carries headings, body, labels and buttons: a plain grotesque that stays out of the way of the paper objects. **Playpen Sans** (400 and 500) is the pencil hand, used only for short notes beside headings.

- Section headings (`headline-lg`) are weight 500, tightly tracked at -0.035em with a line height just under 1. The size is fluid, from 38px on phones up to 72px on wide screens (5.2vw between).
- Card and diary titles use `headline-md` at 23px, body is 17px at 1.55, captions are 14px.
- Buttons are 15px at weight 600. The nav wordmark is 20px at 600 and the footer wordmark is the same face at 600, tracked at -0.06em and scaled to the width of the panel.
- Pencil notes are uppercase Playpen Sans, mostly 15px with 0.04em tracking, usually in the caption colour (cobalt under project cards, vermilion on the stamp), often tilted a few degrees. Never use the hand for paragraphs.

## Layout

Content sits in a centred column of 1180px with a 24px gutter on each side (16px on phones). The body shows a two-level graph: a fine 24px grid and a heavier line every 120px, drawn in warm black at 5% and 11%. Sections are padded fluidly, roughly 80 to 150px top and bottom.

Compositions change per section, from a sticky contact sheet beside four steps to a 12-column floor plan of six rooms and three price sheets in a row.

At 860px and below, the nav collapses to a full-screen menu, two-column heads become one column, the floor plan becomes two columns with the large rooms spanning both, price sheets and reviews stack, the notebook pages stack, and some tilts are removed.

## Elevation & Depth

Depth is made by stacking paper, not by blur. Cards carry a hard offset shadow, 3px right and 3px down, in warm black at 16% with no blur. A softer long shadow (22px down, navy at 60%, with a negative spread) is used on the envelope front, the questions folder and the tracing sheet over the opening photo. Tilts, tape and white photo frames give the layering.

## Shapes

Corners are nearly square: 3px on buttons, sheets, fields and cards, 2px on tiles and checkboxes. The folder tab is the one rounded shape (12px on its top corners). Rooms are outlined in 3px cobalt rules. Photos sit in frames (4 by 5 for projects, 3 by 2 in the diary) and are a cobalt duotone until developed. The logo is four small square tiles with simple drawn marks, built in CSS and inline SVG, as are the paper, the plan lines, the envelope, the door arcs and the stamp.

## Components

- **button-primary:** a navy bar with a 32px vermilion icon tile at its left and a cobalt fill that wipes in from the tile on hover.
- **button-secondary:** a warm white bar with a thin border and the same icon tile; navy wipes in on hover.
- **card-sheet:** warm white, 1px border, offset shadow; used for the nav, review slips and the form.
- **price-sheet:** three sheets in manila, vermilion and cobalt, each tilted a little, with a large price and a dashed rule above the list of inclusions.
- **input-field:** 48px tall, warm white, thin border, 16px text; focus shows a 2px cobalt outline.
- **pencil-note:** the hand-written label, uppercase, caption colour, sometimes with a small drawn arrow.

## Motion

The page loads GSAP 3.13 with ScrollTrigger and Lenis 1.3 from jsDelivr. Lenis gives smooth scrolling. The idea: paper is laid out as you scroll, things settle with a small tilt, and lines are drawn rather than faded in.

- **Navigation:** the strip hides on scroll down and returns on scroll up.
- **Opening:** the photo fades in, the sheet drops in with a slight tilt and the lines of the small plan draw in one after another. A pale shaft of light drifts back and forth across the photo.
- **Method:** the contact sheet stays pinned while the camera zooms into each of four photos as its step is reached.
- **Rooms:** the six rooms start apart and slide together into one plan, snapping to whole 24px squares.
- **Pricing:** each price sheet drops in with a back ease and settles.
- **Projects:** on wide screens a track of five cards moves sideways while the section is pinned, and each card develops from cobalt duotone to full colour.
- **Diary, reviews:** photos and review slips snap into place, and a ruled line is drawn under four of the six diary entries.
- **Letter, snags, folder, footer:** the letter rises out of its envelope, snag items are struck through and ticked in turn before the stamp lands, the folder slides up and straightens, and four tiles fly in and lock into the logo mark.
- **Pencil notes** beside headings and the contact caption wipe in left to right.

With reduced motion, the entrance and scroll animations and Lenis are not started and the page reads in full, the project photos in full colour; the nav strip still hides on scroll down and the hover wipes still run. Keep the section ids and the `data-8b-section`, `data-8b-motion` and `data-dx` and `data-dy` attributes, because the scripts read them.

## Do's and Don'ts

- Do keep the three inks in their jobs: cobalt draws, navy signs, vermilion marks.
- Do keep corners at 2 to 3px and keep the hard offset shadow without blur.
- Do put short notes in Playpen Sans capitals, and never set body text in it.
- Do let sections be objects on the paper with a small tilt, and keep the graph visible.
- Do keep photos in the cobalt duotone until the motion develops them.
- Don't add rounded cards, soft glass, gradients or a dark theme.
- Don't introduce a third typeface or stock icons; the marks are drawn.
- Don't add accent colours beyond the palette, or invent prices, guarantees or reviews for a real firm.
- Don't remove the Design: 8B footer link unless the site owner asks.