---
version: alpha
name: "Self storage template by 8B"
description: "A light grey page of pasted paper posters with one signal yellow, for a self storage facility with unit sizes, weekly prices and a reservation form. Free HTML template by 8B, MIT."
colors:
  primary: "#121212"
  secondary: "#ffd21a"
  neutral: "#ebebeb"
  surface: "#f8f8f7"
  on-surface: "#121212"
  caption: "#565656"
  ghost: "#848484"
  hairline: "#c6c6c6"
typography:
  headline-display:
    fontFamily: TikTok Sans
    fontSize: 136px
    fontWeight: 900
    lineHeight: 0.84
    letterSpacing: -0.005em
  headline-statement:
    fontFamily: Instrument Sans
    fontSize: 112px
    fontWeight: 500
    lineHeight: 0.94
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: Instrument Sans
    fontSize: 62px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.035em
  body-md:
    fontFamily: Instrument Sans
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: -0.003em
  caption:
    fontFamily: Instrument Sans
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.005em
  label-sm:
    fontFamily: Instrument Sans
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.05em
  button:
    fontFamily: Instrument Sans
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1
  note:
    fontFamily: Playpen Sans
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.3
rounded:
  none: 0px
  full: 999px
spacing:
  gutter: 44px
  section-padding: 130px
  column-gap: 20px
  unit-gap: 14px
  control-height: 48px
components:
  button-primary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "0 24px"
    height: "{spacing.control-height}"
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "0 22px"
    height: "{spacing.control-height}"
  nav-pill:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 4px
  poster:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: 40px
  unit-label:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: "12px 14px"
  price-mark:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.primary}"
    padding: "0 4px"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.none}"
    padding: "0 14px"
    height: "{spacing.control-height}"
---

## Overview

Elbowroom is a one-page site for a self storage facility, a unit rental business or a removals firm with a store. The one idea is a notice board in a warehouse office: pale grey walls, posters of creased paper pasted on, ovals drawn round the words that matter and one signal yellow taken from the unit doors. It is practical and calm, with prices by the week and a building specification instead of promises. Names, prices, addresses and the company number in the demo are invented.

## Colors

Seven tokens: three greys, an ink, a paper and one yellow.

- **Neutral (#ebebeb):** the page ground, a cool light grey.
- **Primary (#121212):** all text on light grounds, button and field outlines, the dashed outline of the nav pill, the dark extras panel and the dots of the giant Come by lettering.
- **Surface (#f8f8f7):** poster and sheet paper, the nav pill, form fields, the unit labels, and the text on the dark panel.
- **Caption (#565656):** secondary text: the hours note, the promise numbers and the line under the unit sizes.
- **Ghost (#848484):** the giant pale words behind the three promises; decorative only.
- **Secondary (#ffd21a):** signal yellow, the only saturated colour. It fills the main button, the price highlights, the last word of the manifesto, the specification heading band, the location dot and the FAQ marker when open, and it replaces the link underline on hover.
- **Hairline (#c6c6c6):** thin rules between the services on the dark panel, at 30% opacity.

## Typography

Three families with separate jobs.

- **Instrument Sans** (weights 400 to 600) carries nearly everything: 17px body text, 13px captions, 15px buttons, 16px fields, sentence case section headings at weight 500 with tight tracking, and at weight 500 in capitals the headline, the manifesto lines and the words of the extras list.
- **TikTok Sans** at weight 900 and 75% width gives the heavy condensed capitals for unit names, step names, door numbers, the promise ghost words and the footer wordmark, set with a line height of 0.84.
- **Playpen Sans** (weights 400 to 500) is the handwriting for short notes at 19px, tilted a few degrees beside the copy.
- Labels are 12px, weight 600, uppercase and tracked at 0.05em. Display sizes use `clamp()` up to the token values.
- Several display lines are sized from their character count through `--len`, so they fill the width: the ten manifesto lines, the three promise words, the Come by lettering and the footer wordmark.

## Layout

There is no centred wrapper. Content runs full width inside a gutter of `clamp(16px, 3.2vw, 44px)`, with roughly 60px to 170px of vertical padding per section, set with `clamp()`. The first poster sits on a twelve column grid with a 20px gap: captions across the top, the headline and oval brand word on the left, a stack of three heavy words on the right. The second poster justifies ten uppercase lines to its full width. The units are four equal faces with a 14px gap, and the specification is a label of six ruled rows beside a photo.

At 900px and below the opening grid becomes six columns and the heavy words sit in one row, the nav keeps only its pill, the four unit faces stack in one column, the FAQ and the contact grid become one column and the footer has two columns.

## Elevation & Depth

Depth is paper. Large posters carry a creased relief: an SVG noise texture multiplied over the paper at 70% opacity, plus a long soft drop shadow (`0 40px 60px -40px` in 45% ink). The specification label shares that relief. The move-in sheets and the reservation form are plain paper with the same drop shadow but no texture. The four light bars above the first poster glow with a white halo; nothing else has a shadow. The extras section is a flat dark panel with a faint corridor photo behind its text.

## Shapes

Pills are for controls: the nav and the buttons; the FAQ marker and the location dot are circles. Everything else is square: posters, sheets, photos, unit faces, labels and fields. The promises photo is clipped to a pill. Hand marks are drawn: ellipses round the brand word, a manifesto word and the five door numbers are SVG strokes; the light bars and the lettering's dots are CSS.

## Components

- **button-primary:** yellow pill, 1px ink outline, 48px high, 15px semibold label. On hover it turns ink with a paper label, and on devices with a hover the label rolls over like a block face.
- **button-secondary:** a dashed ink outline on a transparent ground; it fills yellow on hover.
- **nav-pill:** a paper pill with a dashed outline and three links; the only navigation on phones.
- **poster:** paper ground with the creased relief and the soft drop.
- **unit-label:** a paper plate with an ink border over the bottom of each unit photo: name, area, what fits and the price.
- **price-mark:** the price figure on a yellow highlight.
- **input-field:** 48px high, paper fill, 1px ink border, square corners, 16px text and a 13px semibold label above.

## Motion

The page loads no animation library. Scroll scenes are CSS scroll-driven animations (`animation-timeline` with named view timelines), written per section in `<style data-8b-part="scene:...">` blocks. A small inline motion kit measures distances into CSS variables, adds `is-in` to `data-8b-motion` elements as they near the viewport and smooths the mouse wheel on fine pointers only. A gate script in the head sets `data-8b-live` on the root only when the browser supports `animation-timeline` and the visitor has no reduced-motion preference; every scroll rule is scoped to it. The one idea is things being handled: a poster is flipped over, a block is turned, sheets are dealt and a drum is spun.

- **Navigation:** past 90px of scroll the four captions beside the pill slide up and fade out in turn; they return near the top and at the very bottom.
- **Opening:** on load the intro rises, the light bars flicker on, the poster is pasted in, and a glint and the brand oval loop. On scroll the first poster tips back over its bottom edge as the second swings down from its top edge, the manifesto lines slide in from alternate sides and the oval round "breathe" draws.
- **Promises:** the section pins and the panels travel sideways while the ghost words slide in.
- **Units:** the section pins for about two and a half screens while the four faces turn on a block, then open flat into a row.
- **Conditions and neighbours:** rows tip up with a short stagger, photos are revealed from the top down and the door ovals draw themselves.
- **Move in:** four sheets start as a tilted pile and are dealt into place while the wall pins.
- **Extras:** nine services spin past on a drum and unroll into a list.
- **Contact:** the dots of the giant lettering grow from dust into printed letters while the tilted letters settle into one line.

Without scroll-driven support (Firefox today) or with reduced motion, `data-8b-live` is not set: scenes are off, scrolling is the browser's own and every section shows its finished layout. The opening's load-in and light bar glints are CSS keyframes under `prefers-reduced-motion: no-preference`, so they still play in Firefox and stop with reduced motion. Hover transitions on buttons, links and FAQ markers remain.

## Do's and Don'ts

- Do keep yellow as the only saturated colour, and use it for actions, prices and hand marks only.
- Do keep unit faces and move-in sheets at four; the block and the wall are built for four, and the markup marks them with `data-8b-fixed`.
- Do update `--len` on any display line when its text changes.
- Do keep the gate script, `data-8b-section`, `data-8b-motion`, `data-8b-items` and the scene style blocks; build new motion as CSS scroll-driven animations scoped to `[data-8b-live]`.
- Don't add GSAP, Lenis or any other animation library.
- Don't round posters, photos or fields; keep corners square and pills for controls.
- Don't add gradients, glows beyond the light bars, purple, stock icons or icon cards.
- Don't put real-looking prices, hours, addresses or contact details on the page unless the owner supplied them.