When building a personal site, text is the primary interface. Getting typography, line-height, and contrast right creates an editorial experience that feels effortless.

Designing the Core Architecture

Building a clean typographic system requires balancing layout constraints with fluid readability.

Key Design Principles

Here are the core principles that guided the refactor:

• Streaming-safe block spacing: Margin block start handles flow without breaking streaming text.
• Semantic CSS variables: OKLCH color tokens power both light and dark modes seamlessly.
• Zero bloat: Standard CSS custom properties instead of complex utility class soup.

Implementation Checklist

1. Audit hardcoded color tokens across all pages.
2. Register --color-subtle and semantic theme variables in globals.css.
3. Replace inline style overrides with reusable typeset presets.

Markdown Elements & Syntax

Good typography handles rich formatting cleanly — from bold emphasis and italic nuances to inline code blocks like npm run dev.

Code Snippets

Here is a custom CodeBlock component with a filename header, syntax highlighting, and instant copy button:

export function formatDate(dateStr: string): string {
  return new Date(dateStr).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  })
}

Visual Assets & Media

Below is a custom ImageBlock component featuring an optional editorial caption:

"The details are not the details. They make the design." — Charles Eames

Ordered Steps for Content Flow

1. Parse MDX frontmatter using gray-matter.
2. Format raw timestamps with tabular-nums for precise alignment.
3. Render article bodies inside the .typeset-article wrapper.