Content-first proof

This page contains zero framework classes. Every element below is plain semantic HTML styled entirely by the framework's base stylesheet and design tokens.

Second-level heading

A paragraph of body text. It uses the UI font at the base size with normal leading. Links take the accent color. Here is some inline code in the middle of a sentence.

Third-level heading

Third-level headings still use the brand font at a slightly smaller scale.

Fourth-level heading

Fourth-level headings drop to the base text size.

Fifth-level heading

Fifth-level headings are smaller still.

Sixth-level heading

Sixth-level headings use uppercase tracking.

Lists

• Unordered list item one
• Unordered list item two
  • Nested unordered item
  • Another nested item
• Unordered list item three

1. Ordered list item one
2. Ordered list item two
   1. Nested ordered item
   2. Another nested item
3. Ordered list item three

Blockquote

A blockquote with an accent left border. It should feel like a callout without any extra classes.

Code

Inline code uses the mono font with a bordered chip. Block code uses a pre element:

function greet(name) {
  return "Hello, " + name;
}
console.log(greet("world"));

Table

Definition list

Term one

The definition of term one with enough text to show line-height and color.

Term two

A shorter definition.

Figure

Links

A standard link uses the accent color and transitions on hover. No underlines by default.