/// Carbon v11 Design SystemIBM Carbon
IBM Carbon
Modular Theme for Hugo,
open source.
An offline-first Hugo static site engine implementing the IBM Carbon Design System v11. Built with fluid 16-column 2x Grid geometry, dynamic token-driven theming, client-side data analytics, and self-hosted IBM Plex typography.
/// Features & Capabilities
Architectural Modules & Components
/// Ecosystem
Connected Modules & Sections
Live Component Specimens & Theme Capabilities
The specimens below demonstrate interactive Carbon Design System components functioning inside Hugo Markdown content without external frameworks.
Interactive Accordions & Progressive Disclosure
Accordions collapse dense technical details into scannable lists, expanding smoothly upon user interaction:
light (based on IBM Carbon White) and dark (based on IBM Carbon Gray 100). The theme manager automatically tracks the operating system’s prefers-color-scheme, while individual sites can override --cds-* color tokens in their own hugo.yaml.
.csv-metadata.json descriptors inside a sandboxed Web Worker. Sorting, filtering, and pagination occur off the main browser thread to guarantee 60 FPS rendering.Contained Tabs & Multi-Panel Interfaces
Tabs organise related perspectives into a compact, switchable interface:
Interactive Tiles & Structured Affordances
Explore 75+ Shortcodes →
Inspect the complete catalog of Carbon shortcodes, parameter tables, and usage examples.
Expandable Tile Configuration Specimen
Summary Content: Core configuration parameters are set in
hugo.yaml.Expanded Detail: Additional module parameters—such as MapLibre GL coordinates, Web Worker buffer thresholds, and custom color themes—can be customized in site configurations.
Responsive Carbon Data Table
| Module Component | Architectural Layer | Status | Benchmark LCP | Security Standard |
|---|---|---|---|---|
| W3C CSVW Engine | Web Worker Pipeline | OPERATIONAL | 185 ms | W3C Standard |
| MapLibre GL Vector Maps | GPU Canvas Projection | OPERATIONAL | 210 ms | RFC 7946 GeoJSON |
| KaTeX IBM Plex Math | OpenType Glyph Layout | VERIFIED | 95 ms | ISO LaTeX |
| GNU PSPP Statistics | Statistical Web Worker | ACTIVE | 240 ms | POSIX Compliant |
| AES-256-GCM Vault | Web Cryptography API | ENCRYPTED | 120 ms | NIST SP 800-38D |
Mathematical Typesetting with IBM Plex Math
KaTeX formulas are rendered client-side using self-hosted IBM Plex Math OpenType fonts:
$$\oint_{\partial \Omega} \mathbf{F} \cdot d\mathbf{r} = \iint_{\Omega} (\nabla \times \mathbf{F}) \cdot d\mathbf{S}$$$$\mathcal{L} = \sqrt{\frac{1}{2\pi \sigma^2}} \exp\left( -\frac{(x - \mu)^2}{2\sigma^2} \right)$$Declarative Architecture Diagram
Hugo Carbon Theme Static Architecture
MERMAID
flowchart LR
Source["Markdown & Config\n(hugo.yaml + content/)"] --> Hugo["Hugo Extended Engine\n(Dart Sass + esbuild)"]
Theme["hugo-theme-carbon\n(layouts/ + assets/ + static/)"] --> Hugo
Hugo --> Output["Compiled Static Output\n(public/)"]
subgraph ClientBrowser ["Offline-First Client Runtime"]
Output --> DOM["Semantic HTML5 DOM\n(16-Column 2x Grid)"]
Output --> Worker["Web Worker Thread\n(W3C CSVW + PSPP)"]
Output --> Fonts["IBM Plex WOFF2 Fonts\n(Sans / Serif / Mono / Math)"]
end
classDef primary fill:#161616,stroke:#0f62fe,stroke-width:2px,color:#f4f4f4;
classDef worker fill:#1e1e1e,stroke:#8a3ffc,stroke-width:2px,color:#f4f4f4;
classDef font fill:#1b2a33,stroke:#009d9a,stroke-width:2px,color:#f4f4f4;
class Source,Theme,Hugo,Output,DOM primary;
class Worker worker;
class Fonts font;