Overview
Typography System
A codified editorial toolkit for The Daily Spiral
These components standardize hierarchy while leaving room to riff with tone, pacing, and layout per post.
Post Themes
post-theme-paper
post-theme-smoke
post-theme-olive
Heading Scale
H1. Main Story Headline
H2. Section Headline
H3. Secondary Entry Point
H4. Detail Header
H5. Supporting Header
H6. Micro Header
Body System
Kicker Label
The lede sets rhythm quickly and should carry the emotional center of the section.
Body text targets readable line length and sustained flow for long-form reading. Keep paragraphs clean, let one idea sit per block, and use spacing to shape tempo.
- Use lists for practical takeaways.
- Reserve all-caps labels for metadata and context.
- Break up dense sections with callouts or figures.
Callout
When the thought needs a stage, give it one.
Callout caption / Voice shift marker
Sidebar
Citation
Design is choreography for attention.
Interview Notes, 2024
Citation format: Author, source, year, and optional URL when publishing.
Image + Caption
Full-Width Image
Use this when one image should dominate the full viewport width.
Two-Up Image Module
Desktop: 2 columns. Mobile: automatically collapses to 1 column.
Split Layouts
Variant A
Text Left, Image Right
Narrative-first two-column pattern for explanatory sections.
Variant B
Image Left, Text Right
Visual-first variant with identical responsive behavior.
Riff
Mixed Composition
How to layer the components without losing hierarchy
Start with a clear heading and lede. Drop in an image when concept density rises. Use a callout for pivot moments. Add sidebars only when they truly serve the reader.
