---
version: alpha
name: "Print shop template by 8B"
description: "A playful one-page print and copy shop site that looks like a layout app: paper white, ink black, five flat accents and selection handles. Free HTML template by 8B, MIT."
colors:
  primary: "#171513"
  on-surface: "#171513"
  surface: "#f7efe5"
  secondary: "#57514a"
  accent-yellow: "#ffc21f"
  accent-coral: "#ff6a3d"
  accent-violet: "#8682f7"
  accent-sky: "#a9dcf6"
  accent-lime: "#bdf35f"
typography:
  headline-display:
    fontFamily: Reddit Sans
    fontSize: 96px
    fontWeight: 900
    lineHeight: 0.94
    letterSpacing: -0.03em
  wordmark:
    fontFamily: Reddit Sans
    fontSize: 30px
    fontWeight: 900
    lineHeight: 0.94
    letterSpacing: -0.03em
  title-md:
    fontFamily: Reddit Sans
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.12
    letterSpacing: -0.015em
  body-lead:
    fontFamily: Reddit Sans
    fontSize: 25px
    fontWeight: 400
    lineHeight: 1.42
  body-md:
    fontFamily: Reddit Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Reddit Sans
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0.01em
  button-lg:
    fontFamily: Reddit Sans
    fontSize: 21px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.01em
  button-sm:
    fontFamily: Reddit Sans
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.1
rounded:
  none: 0px
spacing:
  rule: 1.5px
  margin-left: 44px
  margin-left-phone: 26px
  gutter: 44px
  gutter-phone: 16px
  section-pad: 150px
  section-pad-min: 80px
  handle: 22px
  button-height: 52px
components:
  button-primary:
    backgroundColor: "{colors.accent-yellow}"
    textColor: "{colors.primary}"
    typography: "{typography.button-lg}"
    rounded: "{rounded.none}"
    padding: 8px 14px 8px 22px
    height: 52px
  button-secondary:
    backgroundColor: "{colors.accent-yellow}"
    textColor: "{colors.primary}"
    typography: "{typography.button-sm}"
    rounded: "{rounded.none}"
    padding: 5px 16px 4px
    height: 34px
  wordmark-block:
    backgroundColor: "{colors.accent-coral}"
    textColor: "{colors.primary}"
    typography: "{typography.wordmark}"
    rounded: "{rounded.none}"
  tab-active:
    backgroundColor: "{colors.accent-yellow}"
    textColor: "{colors.primary}"
    typography: "{typography.title-md}"
    rounded: "{rounded.none}"
  badge-ready:
    backgroundColor: "{colors.accent-lime}"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: 3px 10px 2px
    height: 28px
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: 12px 14px
    height: 50px
---

## Overview

This is the design of a walk-in print and copy shop, and it borrows its look from the software its customers use: a layout app. Photos are cropped in front of you, boxes carry square selection handles, and a proof sheet shows its bleed, trim marks and colour bar. The page is paper white with ink-black rules and five flat accents: yellow, coral, violet, pale blue and lime. It is cheerful and exact, meant for a shop that quotes by job and likes showing the work. It is not a corporate print catalogue.

## Colors

- **Ink, `#171513` (primary, on-surface):** all text, every 1.5px border, the strip above the header, the finishing section and the footer ground.
- **Paper, `#f7efe5` (surface):** the page ground, the header bar, cards, the paper table, form fields, and the text on ink sections.
- **Muted, `#57514a` (secondary):** column heads, small notes, spec labels and FAQ answers.
- **Yellow, `#ffc21f`:** buttons, icon buttons, the margin stripe, selection handles, the active tab, the size marker, the FAQ plus box and the column heads in the footer.
- **Coral, `#ff6a3d`:** the wordmark blocks in the header and footer, the bleed line on the sample sheet, the link hover fill and the jobs heading highlight.
- **Violet, `#8682f7`:** the paper section ground and the safe-area line.
- **Sky, `#a9dcf6`:** the file checklist section ground and the FAQ heading highlight.
- **Lime, `#bdf35f`:** the recycled section ground, the Ready and Collected badges, and hover on tabs and FAQ rows.

Accents fill whole blocks or small chips; the only accent text is the yellow column heads on the ink footer. Body text is ink on paper, or paper on ink.

## Typography

Reddit Sans is the only family, loaded as one variable file for weights 400 to 900, with an Arial-metric fallback to limit layout shift. Section headings are 900 weight at a fluid 44px to 96px (6.2vw) with tight tracking of -0.03em and a line height of 0.94, which gives the blunt poster voice. Titles inside rows and cards are 700 weight at 20px to 26px. Leads run 19px to 25px at 400. Body copy is 18px (17px on phones) at a line height of 1.5. Labels and column heads are 14px at 600 weight. Buttons are 21px at 700 weight, or 15px at 600 for the small kind. Nothing is uppercase and nothing is italic.

## Layout

The body has a 44px left margin (26px on phones) holding a yellow stripe with an ink hairline beside it. A vertical label hangs in that margin under the header. Content has no maximum width; it fills the page between a fluid gutter of 16px to 44px. Sections take a vertical padding of 80px to 150px and split into two columns, a heading and lead on one side, a table, photo or form on the other. Rows are separated by 1.5px ink rules. At 900px and below, columns stack, the queue, the paper table and the job list restack into rows without column heads, and the header links move behind a Menu button into a full-screen overlay. The four job tabs stay in one row on phones.

## Elevation & Depth

There are no drop shadows. Depth comes from borders, flat colour fields that change from section to section, a sticky header that slides away and back, a sticky pinned stage in the poster section, and the proof frame in the opening, where paper and ink layers are multiplied over a photo and wipe away.

## Shapes

Every corner is square: buttons, cards, inputs, badges and photo crops. Most photos sit in ink-bordered boxes cropped to ratios such as 3:2, 4:5 or 5:4. The selection handle is a 22px yellow square with an ink border (16px on phones), set on the corners of a box that has a 1.5px ink outline. The proof sheet adds dashed coral and violet lines for bleed and safe area, and four corner trim marks.

## Components

- **button-primary:** yellow, ink 1.5px border, a label and a small ink square with a triangle cut out of it; at least 52px tall. On hover or focus, four small ink corner marks move outward from the edges.
- **button-secondary:** the same yellow and border at 34px tall, used for menu links and for the Quote buttons in the job panels.
- **wordmark-block:** the shop name on a coral block with ink rules, at the left of the header and in the footer.
- **tab-active:** the selected job tab turns yellow; hovering another tab turns it lime.
- **badge-ready:** a lime chip with an ink border for Ready, Collected and the paper weights, which take other fills.
- **card-surface:** a paper box with a 1.5px ink border, used for the queue, the table, the poster card, tiles, the FAQ list and the form.
- **input-field:** a paper box, 50px tall, with an ink border and square corners; focus turns it yellow.

## Motion

The page loads GSAP, ScrollTrigger and Lenis. Lenis smooths page scrolling (lerp 0.11). The one motion idea is editing: things are cropped, selected and stamped as if in a layout app. Three effects repeat across sections. Crop opens a photo from a 12 percent inset with a slight zoom out (1.05s). Select runs a coloured highlight across a heading and lets go (0.45s each way). Stamp drops a badge in from a larger size and a small tilt with a back ease (0.42s). All run once when the element reaches 88 percent of the viewport.

Per section:

- **Opening:** on load the heading block rises in and paper and ink layers wipe off the proof photo in turn; the tabs swap photo and specs.
- **Counter:** scrubbed, each row's bar fills in turn, then its Ready badge stamps.
- **Posters:** pinned for about two screens; the photo grows through seven sizes, handles follow the corners, a yellow marker steps along A6 to A0.
- **Finishing:** on wide screens pinned for about one and a half screens while four panels unfold from a zig-zag into a strip (72 degrees); on narrow screens they unfold vertically without pinning.
- **Preflight:** on wide screens pinned for about a screen and a third; the ticks draw one by one, each followed by the next mark on the sheet: bleed, trim marks, safe area, colour bar.
- **Contact:** the shop-front photo starts cropped and zoomed to 1.45 and its handles drag out to the full photo.
- **Header:** slides away on scroll down past 140px, returns on scroll up.

With reduced motion, Lenis, the three effects, the pinned scenes and the load-in animations are switched off and the page reads in full, with the poster photo at full size. Hover transitions and the header hiding on scroll still run.

## Do's and Don'ts

- Do keep every corner square and every border 1.5px ink.
- Do give each section one flat accent ground, and leave others paper.
- Do keep yellow for things you can press or drag, and the handles and size marker.
- Do set headings in 900 weight with tight tracking, never in light weights.
- Do keep stamps, selects and crops as the only entrance effects.
- Don't add rounded cards, soft shadows or gradients beyond the highlight sweeps.
- Don't add a second typeface or uppercase labels.
- Don't use an accent colour for body text.
- Don't pin more sections; the page is already long.
- Don't round or soften a photo's edges, and crop it to suit its box.