This page provides an exhaustive, live reference catalogue of every typographic scale, content element, inline style, figure, callout, table, quote, and annotation rendered by the Hugo-Carbon Modular Engine.

1. Heading Hierarchy & Type Scales

The typographic hierarchy follows the mathematical IBM Carbon v11 Type Scale powered by self-hosted IBM Plex Sans, IBM Plex Serif, and IBM Plex Mono.

Display / Heading 01 (# Heading 1)

Used for primary page titles, display headings, and major content landmarks (42px / 2.625rem, light/regular weight).

Heading 02 (## Heading 2)

Used for primary section breaks and major thematic divisions (32px / 2rem, regular/semi-bold weight).

Heading 03 (### Heading 3)

Used for sub-sections and component category headers (24px / 1.5rem, semi-bold weight).

Heading 04 (#### Heading 4)

Used for subsection subsections and card titles (20px / 1.25rem, semi-bold weight).

Heading 05 (##### Heading 5)

Used for minor group titles and widget headers (16px / 1rem, semi-bold weight).

Heading 06 (###### Heading 6)

Used for metadata headers, captions, and micro-labels (14px / 0.875rem, uppercase bold with letter-spacing).

2. Body Text, Lead Paragraphs & Captions

Lead Paragraph (`.cds--type-body-long-02`): Designed for article introductory paragraphs and executive summaries. It provides higher visual presence and fluid scannability before descending into technical body prose.

Standard body copy (.cds--type-body-long-01) is optimized for extended reading comfort at 16px / 1rem with a 1.5 line-height multiplier. The IBM Carbon spatial grid ensures that paragraphs maintain optimal line lengths (between 50 and 75 characters per line) regardless of viewport dimensions.

Compact Body Copy (`.cds--type-body-short-01`): Used for dense UI containers, modal dialogs, and table descriptions where vertical compactness is critical.

Caption Text (`.cds--type-caption`): Rendered at 12px (0.75rem) for timestamps, legal disclaimers, and contextual assistance.

3. Inline Text Formatting & Annotations

The engine supports all standard and extended CommonMark inline formatting:

• Bold text (**bold** or __bold__): Emphasizes critical terms with font-weight: 600.
• *Italic text (*italic* or _italic_)**: Applied for foreign terms, publication titles, or conceptual emphasis.
• Bold and Italic (***bold italic***): Combined strong emphasis.
• Inline Code (code): Formatted in self-hosted IBM Plex Mono with subtle background padding: const token = "cds--interactive-01";.
• Strikethrough text (~~deleted~~): Indicates superseded or deprecated specifications.
• Underlined text (<u>underline</u>): For explicit textual underbars.
• Highlighted / Marked text (<mark>highlight</mark>): For analytical search matches and highlighted text blocks.
• Chemical formulas and subscripts: H₂O, CO₂, and x_i,j using <sub>subscript</sub>.
• Mathematical powers and superscripts: E = mc², 2⁶⁴, and ISO 8601¹ using <sup>superscript</sup>.
• Keyboard Shortcuts (<kbd>): Press Ctrl + K or / to trigger the universal search modal.

4. Blockquotes & Pullquotes

Standard Blockquote

Good design is a lot like clear thinking made visual. The IBM Carbon Design System unites rigorous grid mechanics with intentional typographic clarity.

— Design Systems Manifesto

Nested Analytical Blockquote

Political institutions and digital architectures share a foundational premise: rules must be transparent, verifiable, and resilient under stress.

When systems lack explicit constraints, ambiguity fills the void, resulting in fragmentation and technical debt.

— Institutional Governance Review, 2026

5. Inline Carbon Callouts & Notifications

Four distinct callout styles communicate critical notices, warnings, and architectural directives:

6. Images, Figures & Captions

Standard Markdown Image with Caption

Figure 1.1: Scalable vector icon demonstrating pixel-aligned SVG geometry under Carbon Design Language v11.

Structured Hugo Figure Shortcode (

)

7. Lists & Hierarchies

Unordered Bullet Lists (3 Nested Levels)

• Level 1: Platform Foundation
  • Level 2: Design Token Scale
    • Level 3: Interactive Colors (--cds-interactive-01)
    • Level 3: Background Layers (--cds-layer-01, --cds-layer-02)
    • Level 3: Typography Scales (--cds-font-sans, --cds-font-mono)
  • Level 2: 2x Grid System
    • Level 3: 16-Column Layout
    • Level 3: Fluid Breakpoints (sm, md, lg, xlg, max)
• Level 1: Multi-Subdomain Routing
  • Level 2: Subdomain Isolation (cesar, blog, apps, carbon)

Ordered Numeric Lists (3 Nested Levels)

1. Compilation Phase
   1. Clean destination directory (public/<env>)
   2. Parse YAML configurations and language dictionaries
   3. Render Markdown through Goldmark engine
2. Asset Pipeline Phase
   1. Transpile SCSS to minified CSS via Hugo Pipes
   2. Bundle self-hosted WebAssembly and Web Worker modules
3. Verification Phase
   1. Run scripts/verify-dependencies.py
   2. Execute scripts/test_public_html.py

Interactive Checklists / Task Lists

• Implement UK English (en-GB) localization across all environments
• Configure minimalist 404 error page without sidebars
• Create 3-level hierarchical custom left sidebar engine
• Implement social network badges (Facebook, LinkedIn, Twitter/X, Instagram, Chess.com, Bluesky)
• Deploy multi-subdomain target matrix to Cloudflare Pages

Definition Lists (<dl>)

Carbon 2x Grid

A fluid 16-column layout system with an 8px mini-unit spatial cadence governing all typography, margins, and component alignments.

Cascading Configuration

Hugo's mechanism allowing parent section `_index.md` files to propagate layout and parameter rules to all nested descendants.

8. Data Tables & Status Matrices

Responsive Carbon Data Table

9. Footnotes & Citations

The static engine parses footnotes into interactive superscripts with automated bidirectional back-links:

The IBM Carbon 2x Grid is predicated on an 8-pixel mini-unit spatial cadence¹, ensuring typographic baselines and container boundaries align geometrically across all viewport sizes².

10. Horizontal Rules & Thematic Dividers

Standard thematic break:

Tagged section divider:

Footnote References