§1 · Do

Eight rules.

1. Set type before colour. Hierarchy is built from size and weight, not from hue. When the typography is wrong, no colour decision will save it; when the typography is right, colour has less to do.
2. Use one accent per document. Terracotta for drop-caps and warnings, aegean for links and notes, wine for code — but pick one as the lead, and let the others be secondary. Documents that lead with three accents lead with none.
3. Keep the measure. 64ch is the default across every viewport. Margin notes, figures, and editor mockups may exceed it; the body prose may not.
4. Let whitespace do the work. Between a paragraph and its sibling, 1em is enough. Between a section and its sibling, --s-7 or --s-8 — not a rule, not a drop-shadow, not an icon.
5. Use old-style figures in prose, tabular figures in data. EB Garamond carries both; the token system sets font-feature-settings: "onum" by default. Tables override with "tnum".
6. Keep links flat. Aegean underline, no icon, no hover lift. A link that animates more than its colour is a link trying to be a button; a reading page has nothing to do with it.
7. Respect reduced motion. Every transition collapses to 0ms at the token layer when prefers-reduced-motion: reduce. If a pattern relies on motion to be understood, it is wrong, and must be made legible without it.
8. When in doubt, remove. The rule Nous cannot ever forget. If an element must justify its presence, it has already failed the test.

§2 · Don't

Eight anti-patterns.

1. Don't invent a new colour. There are ten in the palette. If the task needs an eleventh, the task is wrong — or the palette is, and the fix belongs in tokens.css, not in the page.
2. Don't set body text below 14px. The face degrades; the reader degrades sooner. Metadata may sit at 11px small-caps; running text may not.
3. Don't stack two accent colours on the same element. An aegean link inside a terracotta block-quote reads as neither, because the eye arbitrates between them rather than between their meanings.
4. Don't add icons to body text. The system has no icon set. Every icon that shows up in prose is borrowed, and carries its borrowing with it. Small caps and italics mark emphasis; they are sufficient.
5. Don't put a call-to-action inside a paragraph. A filled button in body text turns the paragraph into a landing page. Read Chapter I again; this is not that kind of system.
6. Don't mix Greek italic with Latin italic in one phrase. GFS Didot sets Greek upright. var(--ff-display) italic sets Latin italic. Mixing them produces a tonal mismatch the eye cannot ignore.
7. Don't set Chinese and English at the same font-size by default. CJK characters have a larger optical size; Nous sets CJK at 17 / 1.9 alongside Latin 18 / 1.62 for visual parity. The token system exposes --ff-cjk for this.
8. Don't animate for variety. Three durations, one direction per gesture, and a full stop at prefers-reduced-motion. A page that animates beyond this is telling the reader their attention is not worth keeping; and usually they agree.

§3 · Accessibility

A short audit.

§4 · CJK

中文排版的小注.

1. Use --ff-cjk for running Chinese prose, not --ff-serif. The default Latin serif stack falls back to Songti at the browser's pleasure — the result is legible but unloved. Nous provides var(--ff-cjk) = Noto Serif SC + Source Han Serif SC as the considered choice.
2. Set CJK body at 17 / 1.9, not 18 / 1.62. CJK characters occupy more optical space; matching the Latin scale produces visual density mismatch. The adjusted scale equalises them.
3. Let text-spacing: auto handle mixed text. Browsers now ship the CSS Text 4 spacing rules; they insert the correct gap between Latin and CJK without author intervention. Nous applies it at the body level on any element with mixed script content.

For punctuation: use full-width marks (，。：；"") in Chinese sentences; half-width marks only in mixed technical passages where a Latin word punctuation would read oddly otherwise. Do not swap arbitrarily.

§5 · Print

A reading system should print.

/* site.css · the entire @media print block */
@media print {
  .site-nav,
  .chapter-nav,
  .site-footer { display: none; }

  .chapter {
    max-width: none;
    padding: 0;
  }

  /* ink on white — printers save toner */
  body { background: white; }

  h1, h2, h3 { break-after: avoid-page; }
  p, blockquote { orphans: 3; widows: 3; }
}