Headings¶

The following headings demonstrate the typographic scale.

H1: Main Page Title¶

H2: Section Title¶

H3: Subsection Title¶

H4: Minor Heading¶

H5: Small Heading¶

H6: Tiny Heading¶

Paragraph Text¶

Standard Paragraph (16px) How vexingly quick daft zebras jump. This is standard paragraph text that should render at exactly 16px. The quick brown fox jumps over the lazy dog. Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

Small Text This is small text (13.33px). Useful for captions, footnotes, and secondary information.

Extra Small Text This is extra small text (11.11px). Use this for very fine print or disclaimers.

Inline Styles¶

• Bold: **Bold** or __Bold__
• Italic: *Italic* or _Italic_
• Bold Italic: ***Bold Italic***
• Strikethrough: ~~Strikethrough~~
• Inline Code: `Inline Code`
• Link: [Link](https://example.com)
• Superscript: ^^Superscript^^
• Subscript: ~~Subscript~~ (using tilde syntax if enabled, otherwise HTML ₎
• Highlight: ==Highlight==

Blockquotes¶

This is a blockquote. It is used for highlighting key takeaways or citations.

It can span multiple paragraphs.

Admonitions¶

Admonitions are used to call attention to important information.

Collapsible Details¶

Content Tabs¶

print("Hello from Python tab")

console.log("Hello from JS tab");

Task Lists¶

• Completed task
• Pending task
• Another pending task

Code Blocks¶

Python¶

def hello_world():
    """A simple function."""
    print("Hello, World!")
    return True

Bash¶

# Install dependencies
uv sync

# Run the bot
uv run tux start

JSON¶

{
  "name": "Tux",
  "version": "1.0.0",
  "active": true
}

Code Annotations¶

def connect_db():
    db = Database() # (1)
    db.connect()    # (2)
    return db

1. Initialize the database connection object.
2. Establish the actual connection to the server.

Color Palette Demo¶

Coming soon: Interactive color palette demonstration

Lists¶

Unordered¶

• Item One
• Item Two
  • Nested Item A
  • Nested Item B
• Item Three

Ordered¶

1. First Step
2. Second Step
   1. Sub-step A
   2. Sub-step B
3. Third Step

Tables¶

Horizontal Rule¶

(The line above is a horizontal rule)

Type Scale Diagnostic¶

This interactive tool measures the actual computed font sizes of elements on this page to verify they match our design system specifications.

Font Size Measurements¶

Environment Information¶