X · 24 / 26

X — Xerox

The photocopier as a printing press.

The style

A copy of a copy.

On 22 October 1938, in a room behind a beauty parlour in Astoria, Queens, Chester Carlson charged a zinc plate, pressed it against a glass slide inked with “10.-22.-38 ASTORIA”, dusted it with powder and lifted the words onto wax paper. He called it electrophotography. Haloid, a photo paper company in Rochester, renamed it xerography, then renamed itself Xerox, and in 1959 built the 914: the first office copier that took plain paper.

The copier made everyone a printer. By the mid-1970s there was a copy shop on every high street, and punk used it the way it was never meant to be used. Sniffin’ Glue came off a copier in 1976. Raymond Pettibon’s flyers for Black Flag were drawn to survive one. Bands pasted up a gig on a sheet of A4, copied a hundred and taped them to lamp posts.

A copier cannot hold a grey. Each pass pushes tones toward black or white, softens edges, then fuses them hard, and adds the dust on the drum. Copy the copy and it gets worse, faster. On a screen the style is black and white, heavy type with bitten edges, specks over pictures, state shown by inversion, and greys used only for what is allowed to fade.

In use

A band page and its flyer.

The Static Hours put their winter on one page. Pick a show and the flyer beside it is pasted up again with that date; say you’re going, join the waitlist, play the tape, or get on the mailing list. The flyer can go straight onto the copier below.

  • Black, white, and what survivesBody text is solid black. Grey is kept for things that may fade, the way a copier drops greys first.
  • The flyer is the pagePick a show and the flyer resets with its date, venue and support, so the site and the poster on the lamp post agree.
  • State without colourSelected is white on black, few left is dashed, sold out is solid, cancelled is struck through. The only colour is on the copier.
The Static Hours

4 shows this winter. Pick one for the flyer.

  • On sale
  • 9 tickets left
  • Sold out
  • Cancelled
  • On sale

The kit

Every part, every state.

The parts that band page is built from: black slabs on a faint second copy, fields of clean white stock, and state shown by inversion, weight, dashes and crossing out. The rows of states hold still for comparison; everything else works.

01Button

The grey shadow is a second copy. Pressing lines it up

02Text field

Clean edges: grit never goes where you type

03Select

Paper

04Switch, checkbox, radio

Output

05Slider

A square block on a black rail, nine stops

06Progress

Copying0 / 50
Solid toner on a grey track, no stripes

07Segments and tabs

Five dates this winter. One cancelled, one gone.

Chosen is inverted or carries a 6px bar

08List rows

Hover: a 6px bar. Chosen: white on black

09Card and loading

Fri14 Nov
Basement MangwonWith Paper Saints + Low TonerOn sale₩10,000
Loading is the copy warming up: grey bars that blink, not shimmer

10Toast

A black slip, six seconds, always with a way back

11Modal

Paper jam in tray 2

Open door B and pull the sheet straight out. Don’t tear it: a scrap left on the drum shows up on every copy after.

12Steps

  1. Write it, done
  2. 2Paste it up, now
  3. 3Copy it, to do
  4. 4Post it, to do
Done is solid, now is heavy, later is dashed

13Badges and avatars

On saleFew leftSold outCancelledAll ages
Mina KimBass, flyersMKJSALDP+37
Square heads, alternating, the way a copy would print them
Signature

Press copy. Then again.

A photocopier. Put the flyer, your own words or a picture on the glass and press Copy. Every copy is made from the one before, so each generation comes out darker and noisier, and the grey strip at the bottom dies first. Turn the darkness, open the lid, then download any generation.

Graycopy 914 · A4Gen -1 · 100% · D5
On the glass
Zoom
Lid open
Copies the newest copy.
Changing the original clears the tray.
Output tray-1 of 12 copies

The original. Six greys on the strip, from white to black. Press Copy, then copy the copy.

Tokens

The system, in numbers.

Nine colours with their contrast, what each generation does to a word, two typefaces, a spacing scale, four rule weights and three speeds. Copy them as custom properties, with the button, the inversion and the specks.

Colour
  • --paper #f6f6f3Copier paper, 80gsm. Every page and the glass
  • --white #ffffffFields and cards: fresh stock
  • --toner #111111Text, rules, fills. 17.4:1 on paper
  • --ink-2 #474747Secondary text, the darkest grey a copy keeps. 8.6:1
  • --grey-1 #8a8a8aGhosts and disabled fills, never text. 3.2:1
  • --grey-2 #cfcfcbSkeletons and the misfeed shadow
  • --plastic #d9d5ccThe copier’s body, on the machine only
  • --lcd #b9c7a4The copier’s display, with --lcd-ink #1d2a14 at 8.4:1
  • --start #2e9d58The one colour: Start. Toner on it is 5.5:1
Generations: one word, six passes
  • Gen 1 · blur 0.00px · ×1.00
  • Gen 2 · blur 0.35px · ×1.55
  • Gen 3 · blur 0.70px · ×2.10
  • Gen 4 · blur 1.05px · ×2.65
  • Gen 5 · blur 1.40px · ×3.20
  • Gen 6 · blur 1.75px · ×3.75
Type
  • Live tonightAnton · display
  • Live tonightCourier Prime 700, capitals · labels
  • Live tonightCourier Prime 700 · emphasis
  • Live tonightCourier Prime 400 · text
Space, in pixels
  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 48
  • 64
  • 96
Rules
  • Hairline · 1pxNever: it drops out
  • Rule · 2pxFields, rows, cards
  • Heavy · 3pxButtons, the flyer
  • Block · 6pxFocus bar, selected tab
Motion
  • Press80ms linearA button goes down onto its misfeed shadow
  • Scan900ms linearThe light bar crosses the glass, at one speed like the machine
  • Feed420ms expo outA copy slides into the tray, a toast in from the edge
  • ReducednoneCopies just appear. Nothing sweeps, nothing slides
/* X — Xerox, a GRAYNODE A–Z study */
:root {
  --paper: #f6f6f3;
  --white: #ffffff;
  --toner: #111111;
  --ink-2: #474747;   /* the lightest text you may set */
  --grey-1: #8a8a8a;  /* ghosts only, never text */
  --grey-2: #cfcfcb;
  --plastic: #d9d5cc;
  --lcd: #b9c7a4;
  --lcd-ink: #1d2a14;
  --start: #2e9d58;   /* the only colour, on Start */

  --font-display: 'Anton', Impact, sans-serif;
  --font-text: 'Courier Prime', 'Courier New', monospace;

  --rule: 2px;
  --heavy: 3px;
  --misfeed: 4px 4px 0 var(--grey-2);
  --press: 80ms linear;
  --scan: 900ms linear;
}

/* Black slab with a faint second copy where the sheet slipped */
.button {
  min-height: 48px;
  padding: 0 22px;
  border: var(--heavy) solid var(--toner);
  background: var(--toner);
  color: var(--paper);
  font: 700 15px var(--font-text);
  text-transform: uppercase;
  box-shadow: var(--misfeed);
  transition: transform var(--press), box-shadow var(--press);
}
.button:hover { background: var(--paper); color: var(--toner); }
.button:active { transform: translate(4px, 4px); box-shadow: none; }

/* State by inversion: selected is white on black */
[aria-selected='true'], [aria-pressed='true'] {
  background: var(--toner);
  color: var(--paper);
}

/* Toner edges, for headings and pictures only */
.rough { filter: url(#xr-rough); }
/* <filter id="xr-rough">
     <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2"/>
     <feDisplacementMap in="SourceGraphic" scale="3"/>
     <feComponentTransfer><feFuncA type="discrete" tableValues="0 0 1 1"/>
     </feComponentTransfer>
   </filter> */

/* Specks: the drum's dust, over pictures and empty paper */
.specks {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.07 0 0 0 0 0.07 14 0 0 0 -9.6'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23s)'/%3E%3C/svg%3E");
}

Do

  • Design in black and white first. A copy takes everything else away anyway.
  • Keep text solid black and at least 15px. Greys and hairlines are the first to go.
  • Show state with inversion, weight and crossing out, not colour.
  • Put the grit in pictures and headings, never in the fields people type into.

Don’t

  • Grey type, third generation

    Light grey small print looks refined on a screen and is gone after one copy. On the page it fails contrast before anyone copies it.

  • Specks over small print

    Toner noise is a picture’s texture. Over 11px text it turns letters into guesses.

  • Rough edges on the controls

    A field drawn with ragged toner edges stops looking like somewhere to type. Keep controls clean and let the flyer be rough.

In the wild

Where the style shows up outside this page.

  1. Xerox 914

    Xerox · 1959The first plain-paper office copier: the machine the look is named for.

  2. Sniffin’ Glue

    Mark Perry · 1976Punk news typed, scrawled and photocopied in a hurry.

  3. God Save the Queen

    Jamie Reid · 1977Ransom-note letters pasted over a portrait, copied until it was rough.

  4. Black Flag flyers

    Raymond Pettibon · late 1970s–1980sPen drawings and captions copied cheap and pasted round Los Angeles.