IBM Carbon v11 Color Architecture
The system delivers canonical IBM Carbon tokens built around IBM Blue 60 interactive controls, accessible neutral scale layers, and clear functional support colors. Sites can further customize their palette per domain in hugo.yaml.
IBM Blue 60
PRIMARYThe canonical interactive primary anchor for buttons, links, active states, and focused navigation affordances.
Support Tokens
FUNCTIONALStatus colors communicating positive confirmations, operational warnings, and analytical thresholds.
Data & Analytics
CATEGORICALCategorical data visualization tokens for chart series, GeoJSON vector layers, and status matrices.
Standard IBM Carbon Neutral Foundations
Typography & The IBM Plex Scale
All typography is powered by the complete, locally served IBM Plex font family—specifically designed to capture IBM’s spirit of engineered precision and humanistic craftsmanship.
IBM Plex Sans
A grotesque sans-serif with engineered clarity, ideal for UI controls, navigation, and display headers.
IBM Plex Serif
A contemporary transitional serif crafted for high readability in extended essays and academic articles.
IBM Plex Mono
Monospaced clarity for technical specs, personal data schemas, timestamps, and LaTeX expressions.
Hierarchy & Scale Tokens
.cds--type-display-01.cds--type-heading-05.cds--type-heading-04.cds--type-body-long-01.cds--type-captionIBM Design Philosophy & 2x Grid
Rooted in the mid-century corporate design renaissance initiated by Thomas J. Watson Jr., Eliot Noyes, and Paul Rand, our implementation adheres to fundamental tenets of clarity, mathematical structure, and functional honesty.
The 2x Grid
Strict 16-column mathematical layout structured on 8px mini-units and 4px baseline vertical rhythm, bounded within a 1440px max viewport frame.
Honesty in Materials
Zero skeuomorphism or artificial embellishment. Digital surfaces are rendered with high-contrast planes, crisp 1px borders, and clear semantic affordances.
Accessibility Default
Uncompromising commitment to WCAG 2.1 AA/AAA compliance, full keyboard tab-stop navigation, visible focus indicators, and semantic ARIA landmark structures.
Interactive Component Catalog
Live Carbon component building blocks styled with the new theme tokens.
Skeletons & Shimmer Loading States
Low-fidelity shimmer UI placeholders rendering content silhouettes before asynchronous data loads.
Buttons
Tags & Badges
Accordions
- 100% of vendor scripts, stylesheets, mathematical rendering engines (KaTeX), vector tiles, and IBM Plex typefaces are permanently self-hosted locally under static/.
- Parses machine-readable CSVW datasets with schema type-coercion, client-side FlexSearch filtering, column sorting, and pagination.
Tabs & Contained Panels
Progress Bars & Step Indicators
- TokensStep 1
- ComponentsStep 2
- DeployStep 3
Contained & Structured Lists
- hub.example.com Main Production Portal & OverviewActive
- docs.example.com Technical Documentation & GuidesActive
| Feature | Standard |
|---|---|
| Typography | IBM Plex Sans / Serif / Mono |
| Layout Grid | 16-Column 2x Grid (8px Mini-units) |
Form Controls, Switchers & Toggles
Notifications & Alerts
Token Implementation & Code Guidelines
Direct reference for utilizing the CSS custom properties in SCSS and HTML templates.
/* CSS Variable Usage Examples */
/* 1. Primary Interactive Elements */
.my-primary-btn {
background-color: var(--cds-interactive-01); /* Sage Green #69a280 */
color: var(--cds-text-inverse);
outline-color: var(--cds-focus);
}
/* 2. Tripartite Accents */
.my-khaki-badge {
background-color: var(--cds-tag-background-warm-gray);
color: var(--cds-tag-color-warm-gray);
border: 1px solid var(--cds-tag-border-warm-gray);
}
.my-denim-card {
background-color: var(--cds-tag-background-blue);
color: var(--cds-tag-color-blue);
border-left: 3px solid var(--cds-color-jeans);
}
/* 3. Standard IBM Surfaces */
.my-container {
background-color: var(--cds-layer-01);
border: 1px solid var(--cds-border-subtle-00);
color: var(--cds-text-primary);
}