Blog & Article Design

Overview

Professional design system for blog posts, articles, and long-form content pages. Based on patterns from Stripe, Vercel, Tailwind, and Linear documentation. Provides specific typography scales, spacing rules, code block styling, and visual hierarchy guidelines optimized for readability on both dark and light themes.

Instructions

When designing or improving a blog/article page, follow these steps in order.

Step 1: Set the content container

The single most important decision is content width. Optimal reading length is 60-70 characters per line.

Container width: max-w-2xl (672px) for prose-heavy articles
                 max-w-3xl (768px) if content includes wide code blocks or tables
Centering:       mx-auto
Horizontal pad:  px-6 (24px on each side)