Typography

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

This is a standard paragraph with some bold text, italic text, and a link. The framework provides clean, readable typography optimized for technical content and articles.

Claude CSS uses system fonts for optimal performance and familiarity. The line height and spacing are carefully tuned for readability on screens of various sizes.

This is small text, useful for captions or footnotes.

This paragraph includes highlighted text and an abbr element.

Code Display

Inline code looks like const greeting = "Hello, world!";

// This is a code block
function factorial(n) {
  if (n <= 1) return 1;
  return n * factorial(n - 1);
}

const result = factorial(5); // 120

Lists

Unordered List

First item
Second item
Third item with a longer description that might wrap to multiple lines in some viewports
Fourth item

Ordered List

First step
Second step
Third step with additional explanation and details that might make this list item take up more space
Fourth step

Definition List

Term: Definition or explanation of the term.
Another Term: Another definition with more text to demonstrate how longer content is displayed in definition lists.

Blockquote

The best way to predict the future is to invent it.

— Alan Kay

Tables

Name	Type	Description
font-family	CSS variable	Sets the primary font family for body text
color-accent	CSS variable	Primary accent color used for links and highlights
spacing	CSS variable	Base spacing unit (1rem) for consistent layout
max-width	CSS variable	Maximum content width for optimal reading

12-Column Grid System

Claude CSS includes a responsive 12-column grid system. Below are some examples:

Two Equal Columns

Column 1

Column 2

Three Equal Columns

Column 1

Column 2

Column 3

Mixed Column Widths

Main Content (8/12)

Sidebar (4/12)

Four Equal Columns

Col 1

Col 2

Col 3

Col 4

Collapsible Content

Click to expand/collapse

This is collapsible content that can be toggled by clicking the summary element. It's useful for FAQs or additional information that doesn't need to be visible initially.

Claude CSS Framework