Editorial Design System
A token-based design system built for reading — where type scale, rhythm, and color are the interface, not ornamentation.
Building without a UI framework forces every decision to be intentional rather than inherited.
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.
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
The live token system — color palette, type scale, and spacing values as rendered on both domain registers.
Technical Detail
The single most important structural decision was separating the manuscript palette tokens (--paper, --ink, --brass) from the semantic tokens (--color-black, --color-white).
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.
Components never need to know which register they're 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.
- 0UI framework dependencies
- 2domain registers from one token system
- 7step type scale, set in rem
- 12step spacing system on a 4px base unit