Skip to content

Sheet 06

How it's made

How this site is made. It's also the rulebook for anything else that carries my name, so it's written down here where I can't pretend I forgot.

AInks

  • Paper

    --paper

    The page. Off-white, not warm

  • Ink

    --ink

    Text and line work

  • Night

    --night

    The black box: code, cards that matter

  • Blue

    --blue

    Links, hover, the main plate

  • Vermilion

    --vermilion

    Pen marks. One at a time

  • Marigold

    --marigold

    Highlighter, the dot in the mark

A.2Dusk

The black box

Shell #1b1c1d, panel #242526, line #34363a.

Periwinkle to electric blue to almost black. It ends every page, and it's the one place a spot color gets to be big.

BType

Sans · Inter

Aa

Headlines, body text and interface. The optical size axis tightens it up at big sizes.

Serif · Fraunces

Aa

The second voice. Post titles, quotes, and one italic word in a headline.

Mono · IBM Plex Mono

Aa

Code, labels, dates, numbers. Uppercase with wide tracking when it's an annotation.

A serif word is for emphasis, and a pen mark is for the one word that matters.

CMarks

The mark
Mark at 16px
Wordmark
Samip Poudel

DDrawings

Hover the grid to see the lines boil.

ERules

  1. 01Paper and ink first. Spot colors are for small moments. The only big color is the dusk gradient at the end of a page.
  2. 02Headlines are Inter, set tight. One word may switch to Fraunces italic. Post titles are Fraunces.
  3. 03Every drawing has two plates: ink lines and a flat color shape, printed a little off register.
  4. 04Things that matter go in a card: a shell with a small gutter around an inner panel. The most important one is dark.
  5. 05Labels, dates and numbers are small mono capitals, like annotations on a drawing.
  6. 06One hand-drawn moment per view, at most. A pen underline, a note in the margin.
  7. 07Things move the way a hand does: a quick start, a slow finish. Nothing bounces. Nothing loops unless you're touching it.
  8. 08Every page is a sheet in a set, with a number and a title block.

FBuilt with

Next.js, React, Tailwind CSS and MDX. Code is highlighted with Shiki in the Vesper theme, math with KaTeX, live code runs in Sandpack and things move with Motion. Social cards are drawn on the fly with the same title block you see at the bottom of every page.