---
version: alpha
name: "Stationery shop template by 8B"
description: "One-page stationery shop in white, ink-black and a single lilac, set in two weights of a clean sans, with a subscription and workshops. Free HTML template by 8B, MIT."
colors:
  primary: "#151515"
  secondary: "#6b6b6b"
  tertiary: "#d7a6e5"
  neutral: "#f3f3f3"
  surface: "#ffffff"
  on-surface: "#151515"
  accent-lilac: "#d7a6e5"
  ink-raised: "#242424"
  hairline: "#e2e2e2"
  caption-on-ink: "#a8a8a8"
typography:
  headline-lg:
    fontFamily: Stack Sans Headline
    fontSize: 74px
    fontWeight: 500
    lineHeight: 0.98
    letterSpacing: -0.045em
  headline-md:
    fontFamily: Stack Sans Headline
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.12
    letterSpacing: -0.03em
  wordmark:
    fontFamily: Stack Sans Headline
    fontSize: 25px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.05em
  menu-link:
    fontFamily: Stack Sans Headline
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.04em
  body-lg:
    fontFamily: Stack Sans Text
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: -0.01em
  body-md:
    fontFamily: Stack Sans Text
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
  label-caps:
    fontFamily: Stack Sans Text
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.06em
  nav-link:
    fontFamily: Stack Sans Text
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.01em
  button:
    fontFamily: Stack Sans Text
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.01em
rounded:
  none: 0px
  xs: 6px
  sm: 8px
  md: 16px
  lg: 28px
spacing:
  gutter: 20px
  nav-height: 64px
  tile-gap: 12px
  panel-padding: 64px
  section-padding: 168px
  button-height: 40px
  field-height: 48px
components:
  button-primary:
    backgroundColor: "{colors.accent-lilac}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 14px
    height: 40px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
  button-dark:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 14px
    height: 40px
  nav-pill:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.secondary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.sm}"
    padding: 14px
  card-surface:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 32px
  panel-ink:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 64px
  tier-card:
    backgroundColor: "{colors.ink-raised}"
    textColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: 32px
  tier-card-lead:
    backgroundColor: "{colors.accent-lilac}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 32px
  badge-most-chosen:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.xs}"
    padding: 9px
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 14px
    height: 48px
---

# Stationery shop template by 8B

## Overview

An independent stationer's one-page site: shelves to browse, a drawer of papers to touch, four new arrivals, a letterpress service, a monthly parcel and Thursday workshops. The idea is a quiet white shop interior with a few solid blocks of colour: a lilac opening panel, ink-black panels for the paper library, the subscription and the footer. One accent colour and one clean sans in two weights keep it calm, so the photographs of paper, pens and presses carry the warmth.

## Colors

The page is white with near-black ink and a single lilac accent.

- **Primary (#151515):** text, the three ink panels, the fill that wipes across buttons on hover, and the Desk tier's button.
- **Secondary (#6b6b6b):** leads, notes, makers' places, answers, and shelf titles before they become current.
- **Tertiary / accent-lilac (#d7a6e5):** the only accent: the opening panel, button fills, the Most chosen mark, the Desk tier, the thank-you line, the offset address copy, and focus rings on dark panels.
- **Neutral (#f3f3f3):** quiet grey surfaces: the nav pill, the paper tab list, the evening cards, the enquiry form, alternate maker tiles, the printing step cards and the question icons.
- **Surface (#ffffff):** the page ground, text on ink panels, the selected paper tab and the form fields.
- **Ink-raised (#242424):** the three tier cards inside the subscription panel and the paper photo frame.
- **Hairline (#e2e2e2):** rules above shelf rows, card footers, question rows and maker tile borders.
- **Caption-on-ink (#a8a8a8):** muted text on ink panels: leads, spec labels, tier descriptions and footer labels.

## Typography

Two faces from one family. **Stack Sans Headline** at weight 500 sets everything large: the opening statement, section headings, prices, tab names, the wordmark and the full-screen menu links. Tracking is tight and negative (-0.03em to -0.05em) and line height is close to solid, so headings sit as dense blocks. **Stack Sans Text** sets the rest: body at 400, buttons, field labels and small labels at 500. Small labels are 13px, uppercase, tracked at 0.06em. Headings use clamp: from 36px on phones to 74px on wide screens, and card titles from 22px to 30px. The address heading and footer wordmark are fitted to the screen width from their `--len` value (the character count of the line), so they can reach far larger sizes.

## Layout

The page runs full width with a gutter of 16 to 20px and no maximum width. A fixed 64px bar holds the wordmark, a grey pill of six links and a lilac button; below 1024px the pill is replaced by a menu button that opens a full-screen ink overlay with seven links. The opening is one rounded lilac panel at least one screen tall. Section heads sit on a 12-column grid: heading across seven columns on the left, a small lead across four on the right. The shelves, new arrivals and questions pair a sticky column (plate, heading or heading and phone link) with a scrolling list. Makers run five columns, then three at 1023px and two at 767px. Evenings, tiers and the visit section go to one column at 900px; the press steps and footer columns collapse at 767px. Sections take 96 to 168px of vertical padding.

## Elevation & Depth

There are no shadows. Depth comes from solid colour fields: rounded lilac and ink panels sitting on white, grey cards on white, white tabs on a grey list. Ink panels carry two faint 1px circle outlines at 9% white, partly off the right edge, like a paper watermark. In motion, shelf photos wipe over one another on a sticky plate and the tiers unfold with 3D perspective.

## Shapes

Corners come in three sizes: 8px on buttons, pills, tabs, fields, maker tiles and small photos; 16px on cards, photo frames and tier cards; 28px on the large panels. The badge uses 6px. The wordmark mark is a small rectangle with a lilac line. List bullets are 7px squares. Photos are cropped to fill 4:3, 4:5 or 16:10 frames. No fully rounded pills.

## Components

- **button-primary:** lilac fill, ink text, 40px high with a square arrow chip beside the label; on hover the ink fill wipes in from the left (about half a second) and the text turns white.
- **button-dark:** the same shape in ink with a white wipe; used where the ground is lilac (the opening link and the Desk tier). The form's submit button is the lilac version at 48px and full width.
- **nav-pill:** grey pill of six small links whose underline draws in on hover.
- **card-surface:** grey card, 16px corners. Evening cards hold a photo, a date line, a title, a sentence, a price and a Book a place link above a hairline.
- **panel-ink / tier-card:** the ink panel contains darker tier cards; the middle tier turns lilac and carries the Most chosen badge.
- **badge-most-chosen:** white label with a small lilac square, 12px uppercase, tracked at 0.06em.
- **input-field:** white field on the grey form, 48px high.

## Motion

The page loads GSAP 3.13 with ScrollTrigger and SplitText, and Lenis 1.3 for smooth scrolling (lerp 0.09), all from jsDelivr. The one motion idea: text writes in, rules draw, photos wipe and settle, panels unfold.

- **Opening:** on load the lilac panel, the statement and the story rise in about 0.9 seconds, staggered. The photo drifts down into place as it scrolls in.
- **Shelves:** each row, as it crosses 60% of the screen, darkens its title and wipes its photo up over the previous one while the photo shrinks from 120% to 100%. A rule draws above each row, and the heading's second half fades in word by word.
- **Paper library:** tabs switch the detail panel and cross-fade the photo (0.6 seconds); arrow, Home and End keys work.
- **New arrivals:** cards enter 150px aside and tilted 9 degrees from alternating sides, straightening by mid-screen while the photo zooms out; phones use 40%.
- **Printing:** the section pins and its intro and four steps slide sideways while each photo shifts back against the move.
- **Subscription:** the tiers start folded forward from their top edge and unfold in turn.
- **Evenings:** cards arrive as a staircase, each 130px lower than the last, and close into a row.
- **Questions and footer:** rules draw across; a row's plus turns into a minus when opened, and each name in the makers grid writes in word by word.
- **Visit:** a script adds a lilac copy of the address behind it; the two lines slide in from opposite sides and the copy settles and fades.

The navigation bar also hides after 24px of downward scrolling past 160px and returns on the way up, over 0.5 seconds. With reduced motion the entrance and scroll animations and smooth scrolling are switched off and the page reads as a plain stack: the printing steps sit in a grid and the tiers are open. The nav hiding and the hover fills keep running. In that mode, and without JavaScript, the shelves plate shows only its last photo and the titles stay grey.

## Do's and Don'ts

- Do keep lilac as the only accent; ink and grey do everything else.
- Do keep the two Stack Sans faces at weights 400 and 500 only.
- Do keep headings tight, in sentence case.
- Do give new large blocks 8, 16 or 28px corners, and keep list bullets as small squares.
- Do keep dark panels for the library, the subscription and the footer, with their faint circle outlines.
- Don't add shadows, gradients, drop caps or a third typeface.
- Don't add a second accent colour or recolour tier cards.
- Don't make hover fades; the fill wipes in from the left.