Notes on Remix 3

Reading order · hierarchy · imagery

How it structures longform content

The page is a single centered column and nothing else. There is no sidebar, no card grid, no hero image. Each note in the list follows the same fixed order, so the eye learns the rhythm on the first entry and coasts through the rest.

The reading order

Every block runs the same script: a small-caps eyebrow, then an italic serif headline, then a plain deck, then a meta line reading DATE · N MIN READ, then the body, then a small-caps READ THE NOTE → link. A hairline rule closes the entry before the next one begins. The repetition is the navigation.

Hierarchy without weight

Contrast comes from style and size, not from heavy type or color. The display headline is a light italic serif at 300; the entry headlines are the same serif set upright at 500. Nothing is bold in the loud sense. The result reads calm even when the column is dense with text.

No images, on purpose

The page ships zero photographs or illustrations. That is the point of the demo: prove that a longform reading surface can hold attention on letterforms, spacing, and rhythm alone. Removing imagery also removes the layout problems images create, so the measure and the vertical rhythm stay perfectly even top to bottom.

Measured · desktop vs mobile

Desktop and mobile, side by side

The responsive strategy is unusually strict: the body text never shrinks. On a 390px phone the type stays at 18px, exactly as on desktop. Only the measure narrows, which drops the line from a comfortable reading length to a tight one. Everything else is the same document at a different width.

Holding 18px on a phone is a deliberate call. A 36-character line is short, but at that size each line is easy to fixate and the thumb-scroll cadence feels steady. It trades a slightly awkward measure for text that never asks the reader to zoom.

Tokens · type · colour

The design system

The whole thing runs on two typefaces, five colors, and one column. Here is the spec, pulled from the live page.

Display

Noto Serif, 300, italic. H1 clamps 34px–48px with −0.01em tracking. The signature move.

Entry head

Noto Serif, 500, upright, ~1.9rem. Same family, opposite posture.

Body

Source Sans 3, 400, 18px / 1.55. Size holds on mobile.

Meta

Source Sans 3, 600, 0.75rem, uppercase, 0.14em tracking, gray. Carries eyebrow, date, read-time and CTA.

Measure

~720px column, roughly 82 characters per line on desktop.

Rhythm

Generous vertical space; hairline rules between entries; no boxes or shadows.

• Paper#F9F9F9
• Ink#1A1A1A
• Body#333333
• Meta gray#6F6F6F
• Hairline#E3E3E0

Takeaways

What to steal

• Pair one family against itself

  Light italic serif for display, the same serif upright and heavier for entry heads. You get real contrast from one typeface and a page that feels authored, not assembled.

• Put all metadata in small-caps

  Eyebrow, date, read-time, and the read-more link share one gray letter-spaced style. It reads as a quiet system voice and never competes with the prose.

• Hold body size on mobile

  Let the measure narrow, not the type. Readers get consistent, zoom-free text at the cost of a shorter line, which is the right trade for a reading surface.

• Use hairlines, not boxes

  A single 1px rule in a near-paper gray separates entries with zero visual weight. No cards, no shadows, no chrome to maintain.

• Let the warm paper do the calming

  #F9F9F9 instead of pure white takes the glare off long reads, and a slim white header floats cleanly above it without a hard color break.

For commentary only

Visual reference

Captured from the live typography demo for study. The desktop view shows the wide 82-character measure and the italic display headline; the mobile view shows the same type holding 18px on a much shorter line.