Design

The system this site is built from.

Palette

  • cotton #f6f1e5
  • ink #23201a
  • accent #b8420f
  • muted #6f6758
  • border #ddd4bf
  • card #efe8d6

The cotton has a tooth. Two frequencies of SVG turbulence, one for the surface grain and one for the pulp formation, are woven inline. No image files were harmed.

Type

Structure is Atkinson Hyperlegible, designed by the Braille Institute, for headings, the nameplate, navigation, and controls.

Hamburgevons 0O 1lI 5S 8B

Words are Georgia, for body text, descriptions, and this sentence's cousins.

The five boxing wizards jump quickly, 1234567890.

Asides are Georgia italic, for dates, tags, and whatever whispers.

Rochester NY, March 2017, a note in the margin.

Code and the x-ray are monospace, never decoration.

--lh: 1.75rem; skewY(-1.1deg); presence.js

Rhythm

One unit governs the page, 1.75rem, which is 28 pixels. Every line of text sits on it. Every margin and padding is a multiple of it, halves allowed. Where a rule crosses the flow, the border's own width is subtracted from the adjacent padding so the grid never drifts. Toggle ⌗ blueprint in the footer and the rows you see are this unit, measured against the real text.

Components

  • Live cursor presence

    A human, now, abstractly. It banks into its turns and leaves a wake of evaporating ink. Long jumps teleport instead of streaking across your view. Cursors only ever represent people.

  • The wire presence

    The flock is the census, one bird per reader present, you included, seeded by the page so every page keeps its own regulars. The six species are the Rock Pigeon, the House Sparrow, the Mourning Dove, the European Starling, the House Finch, and the Eastern Kingbird, all real wire birds of upstate New York. Each keeps its field habits; doves sit still, sparrows hop, kingbirds sit tall and scan the road, and a pigeon flexes the wire more than a finch. Bring your cursor close and a bird startles; a click that leaves the page scatters them all. They come back.

  • Occupancy chip presence

    Who is here, counted honestly. Your own tabs count as you, never as strangers.

  • Wordmark identity

    Eleven squares wave on hover, staggered by sibling-index(). The square that jumps the queue is a bug from the original CodePen, kept on purpose. Try it. This one works.

  • Camera Rochester

    A miniature of the camera-flash pen. The shutter depresses, the flash fires. Press and hold. Kodak country.

  • Favicon chrome

    Each tab wears its own color. The favicon dims when you step away and flashes when someone new arrives.

Patterns

  • Three voices with fixed roles. Bold sans names a thing, serif italic is metadata about it, serif roman describes it.
  • The organizing principle leads. Projects are named things, so the name comes first and the tag follows. Archives are chronological, so the date rail comes first and the title follows.
  • The wire under the masthead is the only rule on the page. Everything else is separated by rhythm alone.

Rules

  • At rest, one thing moves at most.
  • Motion is discovered, not broadcast. Hover the wordmark, press the camera, toggle the x-ray.
  • Accessibility is the default, never an option behind a toggle.
  • Everything decorative is recycled from my CodePens. No ornament without provenance.
  • State never changes font weight. Weight is hierarchy; state is color.
  • Reduced motion turns all of it off.
just you here