First Section with Counter

Body text is set in Literata at the base size, designed for extended reading on screens. The measure is kept to 70ch for optimal reading flow. Notice how inline links are styled with weight rather than underlines, and strong text uses semibold weight while emphasized text remains italic.

Subsection Heading

H3 headings introduce subsections without numbering. They use the sans-serif stack at a slightly larger size than body text, creating clear hierarchy without overwhelming the page.

Minor Heading

H4 headings are the same size as body text but use sans-serif and semibold weight, useful for introducing smaller sections or labeling content.

Lists and Structure

Unordered lists use disc markers with comfortable spacing:

• First item in an unordered list
• Second item with more text to demonstrate how longer content wraps naturally within the list item structure
• Third item with a nested list:
  • Nested item one
  • Nested item two

Ordered lists use decimal numbering:

1. First numbered item
2. Second numbered item
3. Third numbered item

Blockquotes and Code

Blockquotes are styled with a left border and italic text. They stand apart from body text while maintaining the overall typographic rhythm of the page.

Inline code like const x = 42 uses the monospace font with a subtle background. Code blocks have syntax highlighting:

function greet(name: string): string {
  // This is a comment
  const greeting = `Hello, ${name}!`;
  return greeting;
}

Tables and Data

Tables use the sans-serif font at a smaller size for data density:

Property	Value	Description
font-size	16px	Base text size for comfortable reading
line-height	1.7	Relaxed leading for long-form content
max-width	70ch	Optimal measure for readability

Definition Lists

Forme

The locked type in its frame, ready for impression. The name of this design system.

Measure

The length of a line of text, typically expressed in characters. 60–75ch is optimal for body text.

Leading

The vertical space between lines of text, named for the lead strips used in letterpress.

---

Horizontal rules provide visual separation between major sections. They use a single pixel border in the standard border color.

Footnotes

Footnotes appear as superscript numbers1 that reveal content in a drawer at the bottom of the screen when clicked. This keeps readers in context while providing additional detail2.