Carbon Design System v11 Component Suite

The Hugo-Carbon Modular Platform implements official IBM Carbon Design System v11 components using @carbon/styles compiled via Dart Sass and official @carbon/web-components (<cds-*>) custom elements bundled via Hugo’s native asset pipeline (js.Build).

All components adhere strictly to:

• 16-Column 2x Grid Layout (8px mini-units, 4px baseline rhythm, 1440px max width boundary)
• Token-based Theming (--cds-* across White, Gray 10, Gray 90, Gray 100, and domain custom overrides)
• WCAG 2.1 / 2.2 AA Accessibility (full keyboard tab-stops, 2px focus rings, ARIA landmarks)
• Zero Runtime CDNs (100% self-hosted dependencies)

1. Full IBM Carbon Color Palette & Token Scales

The system implements the complete @carbon/colors 120-color specification across 12 families (10 grades from 10 to 100), plus the @carbon/charts 14-color categorical visualization palette. All colors are exposed as CSS custom properties in :root and structured in data/themes.yaml.

12 Carbon Color Families (Grades 10–100)

Data Visualization Categorical 14-Palette

2. Carbon Tag Suite (All 11 Color Families & Filter Tags)

Carbon tags label and categorize content with high visual legibility. All 11 Carbon color families, outline styles, and dismissable filter states are supported:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{{< tag type="blue" name="Blue" >}}
{{< tag type="cyan" name="Cyan" >}}
{{< tag type="teal" name="Teal" >}}
{{< tag type="green" name="Green" >}}
{{< tag type="purple" name="Purple" >}}
{{< tag type="magenta" name="Magenta" >}}
{{< tag type="red" name="Red" >}}
{{< tag type="gray" name="Gray" >}}
{{< tag type="cool-gray" name="Cool Gray" >}}
{{< tag type="warm-gray" name="Warm Gray" >}}
{{< tag type="high-contrast" name="High Contrast" >}}
{{< tag type="outline" name="Outline" >}}
{{< tag type="blue" name="Filter Tag" filter="true" >}}

3. Code Snippets & Standalone Copy Buttons

Formatted code snippet presentation supporting single-line, multi-line expandable, and inline executions with clipboard integration:

Single-Line Code Snippet

Multi-Line Expandable Code Snippet

Inline Code Snippet & Standalone Copy Button

Use data-carbon-theme='g100' to set high-contrast dark theme. Or copy the clone URL:

1
2
3
4
5
6

{{< code-snippet type="single" text="npm install @carbon/react" >}}
{{< code-snippet type="multi" expandable="true" >}}
...multi-line code...
{{< /code-snippet >}}
{{< code-snippet type="inline" text="inline-code" >}}
{{< copy-button text="https://example.com" >}}

4. Action Buttons, Button Sets & Sizing

Buttons express user actions with standardized Carbon weights, danger variants, responsive button groupings, and accessible keyboard focus states:

1
2
3
4
5

{{< button-set >}}
  {{< button kind="primary" icon="arrow-right" >}}Primary{{< /button >}}
  {{< button kind="secondary" >}}Secondary{{< /button >}}
  {{< button kind="danger--tertiary" >}}Danger Tertiary{{< /button >}}
{{< /button-set >}}

5. Hierarchical Tree View Navigation

The TreeView displays folder/file structures and nested taxonomies with keyboard navigation and expand/collapse states:

1
2
3
4
5

{{< tree-view label="File Directory" >}}
  {{< tree-node label="Folder" icon="folder" expanded="true" >}}
    {{< tree-node label="Child File" icon="file" leaf="true" >}}
  {{< /tree-node >}}
{{< /tree-view >}}

6. Carbon Tiles (Standard, Clickable, Expandable, Selectable)

Carbon tiles package content onto elevated surfaces:

<strong>Standard Tile</strong>
<p style="margin: 0.5rem 0 0; color: var(--cds-text-secondary); font-size: 0.8125rem;">Static content surface bounded by subtle 1px border.</p>

<strong>Clickable Tile</strong>
<p style="margin: 0.5rem 0 0; color: var(--cds-text-secondary); font-size: 0.8125rem;">Interactive hover elevation and active focus rings.</p>

<strong>Selectable Tile</strong>
<p style="margin: 0.5rem 0 0; color: var(--cds-text-secondary); font-size: 0.8125rem;">Click or press space to toggle selection state.</p>

1
2
3
4

{{< tile >}}Static Surface{{< /tile >}}
{{< clickable-tile href="..." >}}Clickable Card{{< /clickable-tile >}}
{{< tile type="selectable" selected="true" >}}Selectable Card{{< /tile >}}
{{< expandable-tile title="Details" >}}Summary<!-- more -->Full content{{< /expandable-tile >}}

Expressive Cards & Contextual Layering

For comprehensive specifications on nested layers and card variants, see the Carbon Layering System Guide:

Built with contextual <code>var(--cds-layer)</code>, adapting automatically to its parent container.

Decorated with an authoritative Carbon top accent stripe and status badge.

Features subtle elevation shadows (<code>--cds-shadow-01</code>) that lift on hover.

7. Skeletons & Shimmer Loading States

Skeletons provide smooth visual placeholders during asynchronous data fetching:

1
2
3
4
5
6

{{< skeleton type="text" width="80%" >}}
{{< skeleton type="heading" width="65%" >}}
{{< skeleton type="paragraph" count="3" >}}
{{< skeleton type="button" width="140px" >}}
{{< skeleton type="card" >}}
{{< skeleton type="table" >}}

8. Accordions & Disclosure Panels

9. Tabs & Contained Tab Panels

10. Progress Bars & Step Indicators

11. Contained Lists & Structured Lists

12. Notifications & Feedback Alerts

13. Form Controls, Content Switchers, Toggles & Tooltips

14. Carbon Pagination & Navigation

15. AI Chat & Generative AI Component Suite

Compliant with IBM Carbon for AI React component specifications (.cds--chat, .cds--chat-header, .cds--chat-messages, .cds--chat-composer).

16. Master Carbon React Component Shortcode Inventory