Editorial Design System

A token-based design system built for reading — where type scale, rhythm, and color are the interface, not ornamentation.

Problem

Literary publishing requires a design system that serves reading first and brand second. Most CSS frameworks optimize for UI components — buttons, modals, navigation. A system for long-form editorial content needs to prioritize vertical rhythm, type hierarchy, and the relationship between the reading column and the surrounding page. Building without a UI framework forces every decision to be intentional rather than inherited.

Approach

A fully custom token system defined in a single tokens.css file — no utility class proliferation, no component library overhead. Every value is a named custom property; every component references tokens, never raw values. The system supports two visual registers (dark studio, manuscript paper) from the same token names.

Semantic color naming: tokens are named by role (--color-black, --color-white, --color-accent) not by value (#f5f1ea). This is what enables the domain-scoped palette inversion — components never need to know which register they're in.
Modular type scale: seven named sizes from --text-xs to --text-5xl, set in rem for accessibility. The scale is approximately 1.25× (major third) between steps, which produces comfortable visual hierarchy without excessive size jumps.
Spacing as a system: spacing tokens follow a 0.25rem (4px) base unit with steps at 0.25, 0.5, 0.75, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8 rem. Every component uses these tokens — no magic numbers in component CSS.
Motion tokens: --duration-fast (150ms), --duration-base (300ms), --duration-slow (500ms), --duration-lazy (800ms) + two easing curves. All transitions in the system pull from these values, ensuring consistent temporal feel across interactions.

Demo

Technical Detail

The single most important structural decision was separating the manuscript palette tokens (--paper, --ink, --brass, etc.) from the semantic tokens (--color-black, --color-white, etc.). The manuscript tokens are raw values defined once at :root. The semantic tokens are domain-scoped references to the raw values. This two-layer system means you can write var(--paper) directly in ryan-exclusive components (like the NotebookPanel) where you always want parchment — while shared components write var(--color-black) and get the right value for whatever domain they're rendering in.

Outcome

A design system that serves two fully differentiated brand identities from one stylesheet, with no framework dependency, no build-time token compilation, and complete control over every rendered value.

Zero UI framework dependencies
Two domain registers from one token system
7-step type scale in rem
12-step spacing system on a 4px base unit