Typography That Survives Dark Mode
Five hard rules: body ≥16px, weight ≥400 (300 banned), headings ≥600, line-height ≥1.5, readable ≥#94A3B8.
The Rules That Exist Because of Physics
Typography on dark mode is not an aesthetic preference. It is physics. Dark backgrounds have lower luminance than light backgrounds. Thin strokes — smaller sizes, lower weights, compressed leading — disappear against low-luminance backgrounds in a way they do not on white.
This is why Knox's CLAUDE.md contains five typography rules labeled non-negotiable. They are not style preferences. They are the minimum specifications for text that is actually readable on a dark surface.
AI violates these rules by default. The statistically common patterns it has learned include 14px body copy (the browser default before the designer touches it), weight 300 for "clean, minimal" aesthetics, and #64748b for secondary text. All of these are the wrong choices for dark mode. The constraint system — MASTER.md plus the explicit DO NOT list — is what prevents them.
The Five Hard Rules in Detail
Rule 1: Body text ≥ 16px. The 16px floor is not arbitrary — it is the browser's own body default for a reason. Text below 16px requires more focus to read, and that focus cost accumulates across a lesson of 2,000 words. Never reduce this on mobile. Never use text-sm for body copy.
Rule 2: font-weight 300 is BANNED. This is the one AI violates most often. Weight 300 is seductive: it looks "clean," "minimal," "modern" on white backgrounds. On dark backgrounds it is illegible at normal viewing distance. The minimum weight for anything a user must read is 400. No exceptions. No contextual overrides for "brief labels."
Rule 3: Headings ≥ 600 weight. The heading hierarchy collapses when headings use the same weight range as body text. An H2 at weight 500 on a dark background is visually indistinguishable from a body paragraph at weight 400. Weight 600 (semibold) is the minimum that creates the visual distinction the user uses to scan and navigate.
Rule 4: Line-height ≥ 1.5. Compressed leading makes reading tiring. The eye tracks from the end of one line to the beginning of the next using the white space between lines as a guide. When that space is too small (line-height 1.2), the eye frequently lands on the wrong line. The academy uses 1.625 (leading-relaxed) for all lesson prose. This is why lessons are readable even at 2,200 words.
Rule 5: Readable text ≥ #94A3B8. The brightness floor for any text the user must read is #94A3B8 (slate-400). Dimmer colors — slate-500 (#64748b), slate-600, slate-700 — are decorative only. They are used for data labels, timestamps, and metadata that the user glances at but does not need to read carefully. Never use them for body copy.
Font Weight × Dark Mode
The weight chart makes the physics visible. Weight 100–200 is invisible on dark backgrounds at normal viewing distance. Weight 300 is readable only under ideal conditions — high-resolution displays, large sizes, high attention. Weight 400 is the dark mode floor. Weight 600–700 is correct for headings. Weight 700–800 is for display text, numbers, and CTAs.
The context column shows the correct weight for each text role. The heading roles (H1, H2, H3) all require minimum 600. Body copy requires 400. Mono labels require 700 because small text (10–11px) requires extra weight to be legible — the inverse of the light-mode intuition.
How These Rules Interact With the Academy
This lesson is itself an example. The text you are reading uses Inter at 400 weight, at 16px, with line-height 1.625. The section headings use Inter at 600 weight. The lesson number in the diagram header is JetBrains Mono at 700 weight, 12px.
The academy's MASTER.md encodes all five rules explicitly. AI working on new academy components reads: "Body >= 16px always. No font-weight 300 anywhere. Headings >= 600. Readable text >= #94A3B8." These are the exact values from CLAUDE.md, now codified at the project level.
When an AI generates a component for the academy and tries to use weight 300 — which it will, because that pattern is statistically common in its training — the MASTER.md and the explicit DO NOT list in the prompt prevent the violation.
The same pattern applies to rewiredminds.io: dark mode only, Inter body, weight 400 minimum, headings at 600. The typography rules are shared across all dark-mode properties in the ecosystem because the physics is the same on every dark background.
Typography that survives dark mode is not creative — it is precise. Five rules, five numbers, all measurable in DevTools. The AI can be constrained to produce exactly these values. The MASTER.md is the instruction set that makes it happen.