Folio Register — Wiki Reading View

The folio register applies to wiki page reading views. It is visually distinct from app chrome (terminal register).

Register rules

ElementRule
Page body textFraunces, 16px, 1.8 line-height, --color-folio-text (#e4ddd3), font-optical-sizing: auto
Page container background--color-folio-bg (#131412) — the visual signal of register switch
Wikilinks in body--color-folio-gold (#d4bc7a) with 40% gold bottom border
Page title (h1)Playfair Display (--font-display) — shared across registers
Code blocksSpace Mono on --color-surface — terminal register inside folio surface
Nav, breadcrumb, edit buttonTerminal register (Space Mono) — never changes

Implementation

web/src/components/organisms/WikiPageView.tsx

The outer wrapper gets .wiki-folio-page class only when NOT editing:

<div className={`page-content${editing ? '' : ' wiki-folio-page'}`}>

This means the folio background activates in reading mode and reverts to terminal background when the editor is open.

web/src/app/globals.css

.wiki-folio-page { background: var(--color-folio-bg); }

.prose {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-folio-text);
  font-optical-sizing: auto;
}

.prose a.wikilink {
  color: var(--color-folio-gold);
  border-bottom: 1px solid color-mix(in srgb, var(--color-folio-gold) 40%, transparent);
}
.prose a.wikilink:hover { background: var(--color-folio-gold-dim); }