Tufte CSS

This page is both the showcase and the usage guide for tufte.css, inspired by Edward Tufte. Copy the CSS file next to any plain HTML document, link it in the head, and write normal semantic tags: h1, p, aside, figure, form, and table. The theme uses warm paper, near-black ink, quiet rules, embedded prose controls, and compact Gill Sans tables.

The default text width is intentionally narrow. The main page can be wider, but prose should stay readable. Links are simple underlined text. Important values can use mark, while ordinary emphasis should stay with i, em, b, and strong.

<link rel="stylesheet" href="tufte.css">

<main>
  <h1>Notebook Title</h1>
  <p>Plain prose with <b>strong data</b> and a note.</p>
  <aside>Side notes are just asides.</aside>
</main>

Headings

Headings are light, serif, and explicit. They should introduce real structure rather than decorate the page.

Third Level Heading

A third level heading works well for sections inside results, methods, or examples. The rhythm stays close to the source typography.

Fourth Level Heading

A fourth level heading is small enough for local notes, subsections, and table commentary.

Paragraphs

The style is designed for analytic writing. A paragraph can carry narrative, a number, and a source note without changing gears. The paper color is #fffff8, the text color is #111111, and quiet code surfaces use #f8f8f0.

A paragraph may also contain a star note^*. Put the explanation in the footer. This keeps the reading path clean while preserving provenance and caveats.

The visual furniture should be quieter than the evidence, and the evidence should be quieter than the reader's own conclusion.

Figures

Use ordinary figure and figcaption tags for charts. The CSS does not impose a chart library. Agents can paste in SVG, canvas, or an image produced by another tool.

A quiet chart surface: no frame, light rules, tabular labels, and one visible series.

Forms

Inline forms are preferred when the controls are small and can be part of a sentence. If you must use larger forms, here they are too:

Inline controls work inside prose. Observe the site for days with samples per day, recording as the primary signal.

Controls

Controls should feel like ink on the page. They use black strokes, paper-colored surfaces, compact labels, and the same serif voice as the surrounding text.

Tables

Tables use the Gill Sans treatment. Text columns stay left, numeric columns align right, and rules are barely there.

Example summary table for an analytic report.
Plot	Samples	Median lux	Moisture
north transect	42	2,430	11.2%
shade margin	38	1,880	40.2%
lower slope	31	2,070	22.1%
source	synthetic sample values

<table>
  <caption>Use captions for source and scope.</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Agent Notes

Use tags first.: Prefer main, section, p, aside, figure, form, and table before inventing component classes.
Use classes only for intent.: The stylesheet includes a few helpers, such as .wide, .quiet, .sans, .highlight, and compatibility classes like .narrative.
Keep the page sparse.: Avoid cards, gradients, heavy borders, and decorative panels. This theme is strongest when the writing, tables, and figures carry the meaning.