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.