Building editorial layouts that stay readable across themes
A two-column news template to stress-test typography tokens, links, and surfaces with WCAG AA contrast.
When a theme system generates colors and typography, editorial layouts are an easy place to spot problems: headings that overpower the page, body copy that feels cramped, or links that don’t read as interactive.
This template focuses on long-form reading. It uses strong hierarchy (H1–H4), generous line height, and clear link styling so you can evaluate readability at a glance.
Example link styling should remain distinct from body text and keep contrast on both background and surface tokens.
Section headline (H3)
Use a sidebar for related stories, topic filters, or subscription prompts. The combination of dense UI and long-form copy ensures your tokens work across multiple content densities.
Subsection headline (H4)
Small UI elements like badges, timestamps, and captions must stay readable without stealing attention from the article flow.