SIG—16 Signature system

Folio

A long-form reading surface: sidenotes sit in the margin beside their marks and fold into the text on narrow screens, while a contents rail keeps your place.

Live — this one is real

Full widthNarrow column

Notes sit in the margin beside their marks and step down to avoid each other; in a narrow column each mark unfolds its note in place. The contents rail follows you and counts down the reading time.

A line is a decision

Every interface is drawn with lines before it is drawn with anything else. Long before colour, type or motion arrive, someone decides where one thing ends and the next begins — and that decision is almost always a line.Even a gap is a line of sorts: one drawn without ink, which the eye completes anyway.

The thinnest line a screen can draw is called a hairline. On paper it was the finest stroke a pen could hold without breaking; on a display it is a single device pixel, which is why the same design can look delicate on one screen and faint on another.On dense displays one CSS pixel spans several device pixels, so a 1px rule has quietly thickened. Drawing with hairlines is a wager that the reader will lean in.

The ruling pen

Draughtsmen once drew their finest lines with a ruling pen: two steel blades, a screw to set the gap between them, and a drop of ink held between the blades by surface tension.The screw was the whole instrument. A quarter turn changed the weight of every line after it, so it was set once and left alone. The pen could not improvise. It drew exactly the line it had been set to draw, again and again — which is precisely what a system asks of its components.

A system is a ruling pen: set once, trusted everywhere.

The discipline was in the setting. A drawing with three line weights reads as a drawing; a drawing with eleven reads as a mess, however carefully each line is made.Drafting standards settle on a handful of widths, each tied to a meaning: outlines, hidden edges, centre lines. Interfaces are no different, and the temptation to add a twelfth weight never goes away.

Ink and water

Sumi ink is soot and animal glue, pressed into a stick and ground against a stone with a little water.The grinding is slow on purpose: how long you grind, and how much water you allow, decides how dark the ink will be. The same stick gives a deep black or a pale grey. Nothing is added to make the lighter tone; something is withheld.Mizu means water. The quieter tones in this library are the same ink with more water in it, not new colours.

Tone by subtraction

A palette built this way has a useful property: every tone is related to every other, so nothing on the page argues. Muted text is ink with water in it. A faint rule is ink with more. The accent is the only thing allowed to be something else, which is why it appears so rarely.An accent that appears everywhere stops pointing at anything.

Margins

Book designers have long used the margin as a second voice: a place for glosses, references and asides that would interrupt the text if they lived inside it.Medieval manuscripts are full of marginalia — commentary, corrections, and the occasional knight fighting a snail. A sidenote is that second voice with good manners.Footnotes ask you to leave the page; sidenotes ask you to glance. It sits beside the sentence it belongs to, close enough to find and far enough away to ignore.Three notes this close together cannot all sit level with their marks, so each steps down just far enough to clear the one above.

Reading on a screen takes the margin away just when it would be most useful, so these notes fold into the text when there is no room and step back out when there is. The line that tracks your progress does the work a ribbon bookmark once did, without asking you to move it.

Usage

tsx

import { Folio, Sidenote } from "mizu-ui";

export function Example() {
  return (
    <Folio label="Field notes">
      <h2 id="usage-rivers">Rivers</h2>
      <p>
        Water finds the lowest path through any landscape
        <Sidenote>Unless it freezes first.</Sidenote> and keeps to it until
        something moves it.
      </p>
    </Folio>
  );
}

This code, running — no configuration beyond the data

Rivers

Water finds the lowest path through any landscapeUnless it freezes first. and keeps to it until something moves it.

Keyboard

Tab: Move between note marks and contents
EnterSpace: Unfold a note, or point to it in the margin

Source & setup

Add this component to your project with the shadcn CLI. The command copies its source and styles into your configured UI directory.

npx shadcn@latest add 0xuser64bit/mizu/folio

For npm imports, import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Requires React and Motion.

Inspect signature/Folio.tsx

Source is included in the npm package under src/signature/Folio.tsx.

Open full source ↗

Props

Prop	Type	Default	Description
label / children	string / ReactNode	—	The article's name and its prose: paragraphs, h2 and h3 headings, blockquotes, with Sidenotes inside the text.
contents	boolean	true	A contents rail from the headings that have an id, shown from 1040px wide.
Sidenote children	ReactNode	—	The note: phrasing content, numbered automatically in reading order.
--mizu-folio-offset / --mizu-folio-note	CSS length	—	Clearance for a sticky header (24px) and the margin note width (232px).

Accessibility

Folio is a labelled article; its contents rail is a named navigation whose current section is marked with aria-current, and choosing one moves focus to that heading. Each mark is a button named with its number; on narrow screens it reports whether its note is expanded. Notes keep their place in the reading order right after their mark, with the note role.

Motion

Notes that would collide step down beside each other and glide when the text reflows; on narrow screens a note unfolds beneath its line. The contents marker springs to the section in view, the progress line fills as you read, and choosing a mark whose note is already in the margin makes the note glow. Reduced motion keeps the layout and drops the travel.

Works alongside

Chronicle TrendChart Waveform Plane