Das Carbon Design System ist IBMs Open-Source-Design-System, seit 2015 öffentlich entwickelt als digitale Form der IBM Design Language. Es verbindet die Schrift IBM Plex mit einem produktiven und einem expressiven Schriftsatz, das 16-spaltige 2x Grid, vier Themes von White bis Gray 100, Design Tokens wie layer-01 und Komponenten in @carbon/react und @carbon/web-components.

Carbon Design System

Details
Vollständiger Name

Carbon Design System — „the digital manifestation of the IBM Design Language“ (Carbon)

Auch bekannt als

Carbon, IBM Carbon

Kernkonzepte:

  • IBM Plex in zwei Schriftsätzen. IBM Plex Sans, Serif und Mono; der produktive Satz (Endung -01) für Produktoberflächen, der expressive (Endung -02) für redaktionelle Seiten (Typography).

  • Das 2x Grid. Ein 16-spaltiges Raster, auf dem Abstände und Komponentengrößen aufbauen.

  • Vier Themes und Ebenen-Tokens. White, Gray 10, Gray 90 und Gray 100; Tokens wie $background, $layer-01, $text-primary und $interactive schichten Flächen nach Ebene statt nach fester Farbe (Themes).

  • Hauptimplementierungen in React und Web Components. @carbon/react und @carbon/web-components, Klassen mit dem Präfix cds--; die DataTable und die UI Shell mit Kopfzeile und Seitennavigation sind typische Bausteine.

  • Carbon for AI. Eine Erweiterung mit dem AI Label, das erklärt, wie KI den Inhalt erzeugt hat (Carbon for AI).

    Wichtige Vertreter

    IBM. Die öffentliche Entwicklung begann am 10. Juni 2015 unter der Apache-2.0-Lizenz (Wikipedia); Version 10 folgte im März 2019, Version 11 im Jahr 2022 (Releases)

Wann verwenden:

  • Enterprise- und datenlastige Oberflächen bauen — Admin-Konsolen, Dashboards, Entwicklerwerkzeuge — mit dichten Daten. In unserem Prior-Test importierte jeder Lauf mit Anker für eine Team-Einstellungsseite @carbon/react und baute eine DataTable; fünf von sechs nannten ein Carbon-Theme.

  • Mit geschichteten Flächen-Tokens und dem dunklen Theme Gray 100 gestalten

  • KI-erzeugte Inhalte mit den Mustern von Carbon for AI kennzeichnen

Häufige Missverständnisse:

  • Nur „Carbon“ sagen. Das bloße Wort führte in unserem Test auf Sonnet und Opus zur Chemie und auf Haiku zu Googles Programmiersprache Carbon. „Carbon Design System“ legt es fest.

  • Code für Version 10 schreiben. Die Pakete carbon-components und carbon-components-react sind abgekündigt; Version 11 benannte Tokens um, setzt cds-- statt bx-- vor die Klassen und nutzt Sass-Module. Die Migration „will be a manual process“ (Migration FAQ).

Kritik:

  • Lücken, die beim App-Team bleiben. Grace Potmas Vergleich von Design-Systemen für OpenMRS („Style Guide & Design Systems Analysis“, 2020) notiert für das damalige Carbon eine Barrierefreiheitslücke im React-Dropdown („accessibility gap in React version of dropdown“) und dass Abstände weitgehend dem App-Entwickler überlassen blieben („mostly left to the app developer“).

Aktueller Stand:

  • Version 11, „Carbon Next“ angekündigt. Version 11 ist aktuell; die Assets von v10 wurden am 30. September 2024 abgekündigt. Eine Vorschau auf die nächste Hauptversion verspricht einen neuen visuellen Ausdruck, Layouts als Kern-Framework, „industry-standard token naming“ und KI-Bereitschaft mit Agent Skills (Carbon Next, August 2026). Der Prior bedient Version 11.

Beispiel: eine Seite, neu gestaltet im Stil von Carbon Design System
Was Claude Opus 5.5 allein aus dem Namen macht. Es bekam eine bestehende Seite und einen Prompt, der nur den Anker nannte: keine Beschreibung, keine Referenzbilder. Eine Session, keine Neuversuche. Alle Beispiele und der Prompt