The pencil language

The whole site is a sketchbook: dark paper, structure drawn in faint white pencil, and a single ember colour for the one thing that matters on screen. That’s the entire visual system, and it’s small on purpose. A system that fits in a sentence is one you can keep to on every page, including the ones written months later.

Everything below is the detail behind that sentence: six colour tokens and one rule for the accent, four typefaces with one job each, and lines drawn by hand instead of by CSS.

Every colour on the site comes from six tokens. Tailwind turns each into utilities (text-accent, bg-background/90) and a CSS variable (var(--color-accent)), so components never hard-code a colour.

@theme static {
  --color-background: #0b0b0b; /* page background, floating islands */
  --color-foreground: #f5f3f1; /* primary text */
  --color-muted: #a0a0a0; /* secondary text, paragraphs */
  --color-heading: #a7a7a7; /* large display text */
  --color-ghost: #bdbdbd; /* faint decorative text, outlines */
  --color-accent: #d2633d; /* ember red accent: only for what matters (active state, the
                              thing being studied, key annotations); structure stays white pencil */
  --color-paper: #161514; /* the storyboard's sketchbook: its pages (craft/CaseBook); was cream, #e4ddd0 */

Five of them are greys, for paper, text and pencil. The sixth, ember, comes with a rule: it’s only for the active state, the thing being studied, or a key note. Structure (frames, dividers, rulers, boxes) stays white pencil at low opacity, however tempting it is to colour it.

The reason is easiest to see by breaking the rule. Find the page you’re on below, then spend the accent on everything that could want attention.

With ember everywhere, the box around the current page is still there, but it’s no longer the answer to anything. An accent only works while it’s rare.

Four typefaces sounds like a lot, but each has exactly one job, and none of them ever stands in for another.

The handwriting is split in two on purpose. Tropical Country is the signature: expressive, and hard to read in a small label. Caveat took over every handwritten note and label in the interface, so the notes stay readable and the signature stays special.

A CSS border is perfect, and a perfect rectangle reads as software. So every frame, divider, ruler and highlight here is an SVG path drawn to look like pencil: four separate strokes that overshoot the corners, each bowing a little, then traced a second time, lighter and looser, the way a quick sketch goes over its lines twice.

Turn the wobble and the overshoot to zero and switch off the second pass, and you’re back to a CSS border. Everything between that and a scribble is a setting. The site uses a wobble of 0.8 and an overshoot of 3 pixels: enough to read as drawn, not enough to look careless.

The switch that matters most is the last one. Randomness gives each sketch its character, but a sketch drawn with fresh randomness on every render changes every time anything re-renders. So every sketch is drawn from a seed, usually made from its own text, and comes out the same on every render, every visit.

A box is four calls to sketchLine, each starting and ending a little past its corner. The overshoot is random too, between 0.4 and 1.2 times the setting, so no two corners match.

export function sketchBox(random, { left, top, right, bottom }, wobble = 1, overshoot = 3) {
  const o = () => overshoot * (0.4 + random() * 0.8);
  return [
    sketchLine(random, left - o(), top, right + o(), top, wobble),
    sketchLine(random, right, top - o(), right, bottom + o(), wobble),
    sketchLine(random, right + o(), bottom, left - o(), bottom, wobble),
    sketchLine(random, left, bottom + o(), left, top - o(), wobble),
  ];
}

PencilBox puts it around any content. It measures the element, so the pencil is drawn at its real size and a stroke is always about a pixel wide, then draws the box twice from one seeded random generator.

const random = createRandom(seed);
const box = { left: -(pad.left ?? pad.x), top: -pad.y, right: size.width + (pad.right ?? pad.x), bottom: size.height + pad.y };
let lines = "";
if (hatch) {
  const slant = (box.bottom - box.top) * 0.5;
  for (let x = box.left - slant; x < box.right; x += HATCH_GAP) {
    lines += sketchLine(random, x, box.bottom + 2, x + slant, box.top - 2, 0.6);
  }
}
return { box, strokes: [...sketchBox(random, box, 0.8, 3), ...sketchBox(random, box, 1.1, 2)], hatch: lines };

The seed comes from seedFrom(text): the box around “The pencil language” is always the same box, and the box around any other title is always a different one.

• Make the system small enough to say in a sentence, so it survives every page you add later.
• Keep the accent rare: once everything is highlighted, nothing is.
• Hand-drawn doesn’t mean random: seed the randomness, so the sketch is part of the design, not noise.