Typography
as the interface.

All new UI starts light. Dark is built only on explicit request, and even then light stays canonical. The accent is a solid vermillion — never a glow, never a gradient.

Loaded via Bunny Fonts — self-hosted-friendly, no tracking. Headlines carry aggressive negative tracking (-0.06em → -0.04em); giant serif numbers act as a design element. Never Inter / Roboto / Space Grotesk for headlines — those are AI-slop markers.

• Radius 0 global — * { border-radius:0 !important }. Sharp, intentional edges.
• No shadows, no glow, no gradients.
• Noise texture: SVG fractalNoise ~1.5% opacity (this page uses it).
• Animated underlines (scale-x 100→110, 150ms) instead of glows.
• Square markers & status dots — never circles.
• Icons: SVG only, never emoji.

Reading container ~max-w-5xl; full-width on wide monitors (max-width caps leave ugly white gutters). Asymmetric editorial grids — 7/5 or 8/4 — with left-aligned heroes and magazine-style numbered sections.

Section rhythm py-20 → 28 → 40. Mobile-first, progressive font scaling, tables overflow-x-auto, collapsible nav. This very document is an 5/7 grid.

Text-only uppercase buttons with animated underline. Bordered uppercase badges. Sharp h-1 progress. Square status dots. Bordered inputs with a 2px accent focus ring.

UI composes as atoms → molecules → organisms; each page assembles organisms plus a meta object. Semantic utility classes map to theme vars — zero hardcoded hex in components (hardcoded color is an AI-slop tell).

⌘K / Ctrl+K and / open it. Fuzzy search with debounce, ↑↓ navigate, ⏎ select, esc close. Combine navigation + actions. Scrim + centered dialog, focus trap, scroll-lock.

Clicking an entity reference opens a right-side drawer with key details in place — do not redirect. Keep an explicit Open full button inside. One global component + a module-level store (stores/peek.js), not provide/inject.