just you here

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 woven inline.

Type

Structure is Atkinson Hyperlegible, by the Braille Institute.

Hamburgevons 0O 1lI 5S 8B

Words are Georgia.

The five boxing wizards jump quickly, 1234567890.

Asides are Georgia italic, for whatever whispers.

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

Code and the x-ray are monospace.

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

Rhythm

One unit governs the page, 1.75rem, 28 pixels. Everything vertical is a multiple of it, halves allowed, and borders subtract their own width from adjacent padding. The masthead is four units, and the wire hangs one unit under the nameplate, which centers the nameplate on it exactly. Toggle ⌗ blueprint to see it measured.

Components

  • Live cursor presence

    A human, now, abstractly. It banks into turns, leaves a wake of evaporating ink, and teleports rather than streak across your view.

  • The wire presence

    The flock is the census, one bird per reader, seeded by the page. The species are the wire birds of the reader's own region, told from the clock's timezone, which never leaves the machine. Doves sit still, sparrows hop, wagtails pump their tails, and a pigeon flexes the wire more than a finch. Come close and a bird startles; leave and they all scatter. The field note under the masthead holds the field guide and picks the region.

  • The room, from above presence

    Every reader on this page as one wandering dot, mapped into a small box. The dashed border means live: whoever is here is drawing it.

  • Occupancy chip presence

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

  • Wordmark identity

    Eleven squares wave on hover, staggered by sibling-index().

  • Camera Rochester

    The shutter depresses, the flash fires. Press and hold.

  • 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.
  • One left edge. Marks and dates are marginalia: they hang in the margin, and the text never steps aside for them. Where there is no margin, they step back into the line or bow out.
  • The organizing principle leads. Names first for projects, dates first for archives.
  • 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.
  • State never changes font weight. Weight is hierarchy; state is color.
  • Reduced motion turns all of it off.
  • The old customs are kept, and not all of them are on this page. View source.