---
name: Paste Theory
version: "1.0"
theme: off-grid-collage
kit: stacklift/paste-theory
colors:
  paper:      "#EFEDE8"               # --paper      : universal background
  paper-deep: "#E4E1D8"               # --paper-deep : rest-zone background (manifesto)
  ink:        "#181818"               # --ink        : text, buttons, sold-out sticker
  ink-soft:   "#4A4843"               # --ink-soft   : secondary text, captions
  ink-dim:    "#8C897F"               # --ink-dim    : labels, spec keys
  pink:       "#FF5CA8"               # --pink       : the shock — stickers, tape, underline
  pink-deep:  "#E63E8C"               # --pink-deep  : hover, handwritten accents, eyebrows
  white:      "#FBFAF7"               # --white      : photo frames, cards, notes
  line:       "rgba(24,24,24,0.12)"   # --line       : hairline separators
  shadow:     "rgba(24,24,24,0.18)"   # --shadow     : piece drop shadows
fonts:
  display: "Bebas Neue"
  body:    "Darker Grotesque"
  hand:    "Caveat"
placement:
  x:  "--x  : horizontal pose of a piece (% of board)"
  y:  "--y  : vertical pose of a piece (% of board)"
  w:  "--w  : piece width (% of board or px)"
  r:  "--r  : resting rotation (-6deg to +9deg)"
  sr: "--sr : extra rotation before settle (4-8deg)"
  d:  "--d  : settle stagger delay (0 to .5s)"
motion:
  settle-ease:     "cubic-bezier(.22,.61,.36,1)"
  settle-duration: ".7s"
  settle-stagger:  "~120ms between pieces"
full-kit: "https://www.stacklift.design/kit/paste-theory"
---

# Paste Theory — Design System

## §1 Identity

Paste Theory is the aesthetic of an independent streetwear label that lives on a
studio wall: black-and-white photographs taped and pinned into compositions, hot
pink stickers, handwritten notes, photocopy grain. The layout is deliberately
off-grid — every section is a *board*, a pinned composition, never a column or a
card grid. Photography is always grayscale; pink exists only in the UI layer.
No pure black. No gradients. No grid.

## §2 Color roles

`--paper` is the universal background — warm grey, never white. `--ink` carries
text and primary buttons. `--pink` is the shock: reserved for stickers, tape
accents, the hand-drawn underline and the signal pill — never for backgrounds or
body text. `--pink-deep` handles hover states and handwritten accents.
`--white` frames every photograph (photocopy margin) and surfaces cards.
`--paper-deep` marks the rest zone (manifesto) where the collage stops.

## §3 Typography

Bebas Neue (`--font-display`) for all headings, drop names, buttons and pills:
single weight, letter-spacing `.02em` to `.3em` depending on size, line-height
≤ .95. Darker Grotesque (`--font-body`) for body and specs: weights 500–700,
sizes ≥ 1.15rem (tall x-height demands generous sizing). Caveat (`--font-hand`)
is the annotation layer: captions, prices, margin notes — always slightly
rotated (−4° to −2°), weight 600.

## §4 The collage system

Each section is a `.board` (relative) holding `.piece` elements (absolute).
A piece's pose is six custom properties: `--x --y --w` (position/size),
`--r` (resting rotation), `--sr --d` (settle offset and stagger). Two motions
only, both in the collage grammar: **scroll-settle** — pieces drop into pose
when the board enters the viewport (reversible, dual IntersectionObserver with
hysteresis) — and **pick-up** — hover straightens a piece to 0° and lifts it
above the stack. Below 760px the boards collapse to a flowed stack with
softened rotations. Both motions are disabled under `prefers-reduced-motion`.

## §5 Components

`.photo` — white-framed grayscale photograph, optional `.is-copy` for blown-out
photocopy reprints. `.tape` / `.pin` — fasteners, positioned on the piece.
`.sticker` — round Bebas badge (`s-live` pink, `s-out` ink, `s-low` dashed).
`.note` — Caveat annotation. `.spec` — typed spec card (dt/dd). `.pill` —
hero badges. `.strip` — aligned heading band (rest grammar). `.menu` — index
overlay of taped notes. `.ds` — full-screen slide-up design-system view.
`.is-soon` — inert demo links, greyed, `aria-disabled`.

## §6 Agent instructions

1. Never place content on a visible grid; compose boards with rotated pieces.
2. Keep all photography grayscale (`filter:grayscale(1)`); pink is UI-only.
3. One sticker maximum per board; rotation range −9° to +9°, never more.
4. Headings are Bebas Neue uppercase; never letter-space the body face.
5. Annotations use Caveat 600 and must be rotated; never set them straight.
6. Preserve the rest grammar: heading strips and the manifesto stay aligned.
7. Drive placement only through `--x --y --w --r`; never hardcode transforms.
8. Respect `prefers-reduced-motion`: pieces render settled, no transitions.

> 💡 **Full implementation available** — This `design.md` ships with a complete
> HTML/CSS kit: demo page, all components, CSS tokens ready to use. No setup needed.
> → [www.stacklift.design/kit/paste-theory](https://www.stacklift.design/kit/paste-theory)