Evidence Layer
Colophon
Diligence applied to the site itself.
Every design choice on this site has a rationale. This colophon documents the typography, color system, design rules, and the things we chose not to use.
Principles demonstrated
Diligence — every choice is earned, not borrowed. The rationale lives here, not in a Figma comment.
Typography and Why
Cormorant Garamond
Declaration voice--font-serif
Authoritative serif with historical weight. Not academic, not corporate — declarative. Used for headings, titles, the oath text, and pull quotes. The formal register that says: this matters.
License: SIL OFL 1.1 · Self-hosted WOFF2 · No CDN
DM Sans
Reading voice--font-sans
Geometric sans with warmth. Optimized for reading at 15.5px. Clean and distinct from the serif — the two fonts never compete. Used for all body text, labels, and navigation.
License: SIL OFL 1.1 · Self-hosted WOFF2 · No CDN
JetBrains Mono
Structure voice--font-mono
Governance speaks in mono. Machine-readable, human-verifiable. Used for SHA-256 hashes, decision IDs, metadata labels, version numbers, and technical values. Marks anything that should be treated with precision.
License: SIL OFL 1.1 · Self-hosted WOFF2 · No CDN
Color System and Semantic Reasoning
Two semantic accent colors (copper = practitioner, teal = governance), four text tiers, and a warm dark palette built for single-light-source reading.
Base background
Near-black with warmth. Not pure black — the warmth prevents the cold void that pure #000000 creates.
Card/elevated background
Slightly warmer than base. Creates depth hierarchy without stark contrast.
Headings, primary text
Warm white. Not #FFFFFF — cold white reads as digital artifact on dark warm backgrounds.
Body text
9.1:1 against base. AAA contrast. Warm enough to read as text, not UI chrome.
Secondary text, nav
De-emphasized but still AA. Used for supporting text that should recede without disappearing.
Labels, metadata only
3.0:1 — AA large only. Used exclusively where size compensates for contrast. Never body copy.
Human / practitioner
Warm copper. Semantic: everything the human practitioner owns, does, or declares. Identity color.
AI / governance / covenant
Cool teal. Semantic: everything the AI collaborator commits to, governance structures, and pqdx standard.
Structural dividers
Near-invisible at 6% opacity. Creates structure without drawing attention — scaffolding, not design element.
The Ten Design Rules
Every design decision on this site traces to one of ten rules established in the design specification. Each rule names the UX law it applies and how it is implemented here.
Typography leads meaning.
Von Restorff Effect / Serial Position
Cormorant Garamond declares; DM Sans delivers. The distinction is never blurred — headings never appear in the body font, body text never appears in the serif. The contrast between the two voices is the meaning.
Four-tier text hierarchy — never skip a tier.
Progressive Disclosure / Visual Hierarchy
Heading (F0EAE2) → Body (B8B0A8) → Dim (7F7872) → Muted (625D56). Skipping creates false emphasis. Every element must earn its contrast level relative to what surrounds it.
Two semantic accent colors, not decorative.
Color Semantics / Dual-Coding Theory
Forge Copper (#D4845A) signals the human practitioner — identity, action, ownership. Muted Teal (#5BA8A0) signals the AI and governance — covenant, principles, structure. Color communicates role, not decoration.
Dark-only, not dark-mode.
Context of Use / Editorial Stance
This site has no light mode. The warm lamplight palette (Charred Neutral backgrounds, Warm Linen text) is the editorial environment the content was designed for. Offering a light toggle would treat the design as preference rather than intent.
No privacy tax on the reader.
Privacy by Design
No cookies, no cookie banner, no client-side analytics, no Google Fonts CDN. Every tracking surface was eliminated by architecture, not consent management. The reader should never have to click through anything to read.
Copper rules are sectional markers.
Gestalt: Closure + Proximity
The 2px horizontal rule drawn in copper (#D4845A) means "here begins a named section." It is used exactly once per section heading. The rule creates visual containment without a box or background — implicit structure made visible.
Interactive elements must declare themselves.
Affordance Theory (Gibson/Norman)
Every interactive element has a hover state, a focus ring, and a cursor change. No interactions are hidden. The principle card grid, the illustration canvases, the export menus — all announce themselves before the user commits to a click.
Export is a capability, not a call to action.
Progressive Disclosure / Content Primacy
Export menus are accessible but unobtrusive. The manifesto is the primary object on every page. Export is a quiet capability for those who need it — it does not compete for attention with the content itself.
Measure before motion.
Inclusive Design Principles
prefers-reduced-motion is respected across every animation on the site before any animation was added to the design. All motion is progressive enhancement, never load-bearing for comprehension.
Font size carries the hierarchy of ideas.
Information Architecture / Visual Weight
36px for page declarations. 22–26px for section headings. 15.5px for reading. 13px for metadata and labels. 11–12px for technical mono values. The scale is not aesthetic — it is a map of the content's importance structure.
Accessibility
WCAG 2.1 AA site-wide, with AAA on all primary body text and headings. All primary text exceeds 8:1. Per-element contrast ratios and full compliance documentation are on the Accessibility page.
Performance
95+
Performance
95+
Accessibility
95+
Best Practices
95+
SEO
- ·No tracking scripts — zero third-party JavaScript on page load
- ·Self-hosted fonts — WOFF2, no Google Fonts CDN request
- ·Static export — all pages pre-rendered at build time
- ·Cloudflare CDN — edge-served globally
What We Don’t Use (and Why)
No cookies
No cookie banner. The reader should never have to click through anything to read. Privacy by architecture.
No Google Fonts CDN
Every font request to Google sends the reader's IP address to Google's servers. We self-host all three typefaces as WOFF2 files.
No client-side analytics
Server-side analytics via Cloudflare only. No JavaScript injected to track the reader's behavior. What we can't measure without surveilling, we don't measure.
No JavaScript required for content
Progressive enhancement only. All manifesto content is server-rendered HTML. JavaScript adds interactivity but is never load-bearing for reading.
No AI-generated images
Every visual on this site is a hand-designed SVG or canvas animation with semantic meaning. The interactive illustrations encode the principles they illustrate. Nothing was generated from a prompt.
No SSR at runtime
Static export. No server process running when a visitor reads the page. No request→response latency. The manifesto is a document, not an application.