W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
IBM
IBM (International Business Machines) is the company behind the Carbon Design System — the open-source design system that backs IBM's enterprise software surfaces (Cloud, watsonx, Db2, MQ, Power, Z, Storage, the consulting practice, and ibm.com). Carbon is built on a four-theme model: "White" and "g10" are the light themes, "g90" and "g100" are the dark themes. The primary interactive color is Blue 60 (#0F62FE) across every theme; semantic tokens map to Red 60 (danger), Green 50 (success), and Yellow 30 (warning). Typography is the proprietary IBM Plex family — Plex Sans, Plex Serif, and Plex Mono — released open-source under the SIL Open Font License and already present in this catalogue.
1 palette 4 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/ibm/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/ibm/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
IBM
IBM (International Business Machines) is the company behind the Carbon Design System — the open-source design system that backs IBM's enterprise software surfaces (Cloud, watsonx, Db2, MQ, Power, Z, Storage, the consulting practice, and ibm.com). Carbon is built on a four-theme model: "White" and "g10" are the light themes, "g90" and "g100" are the dark themes. The primary interactive color is Blue 60 (#0F62FE) across every theme; semantic tokens map to Red 60 (danger), Green 50 (success), and Yellow 30 (warning). Typography is the proprietary IBM Plex family — Plex Sans, Plex Serif, and Plex Mono — released open-source under the SIL Open Font License and already present in this catalogue.
Tags: ibm, carbon, design-system, enterprise, role-based, dual-mode
Atoms
Palette
IBM Carbon · [email protected] · Apache-2.0
The IBM Carbon Design System color palette. Twelve scale families (gray, cool gray, warm gray, red, magenta, purple, blue, cyan, teal, green, yellow, orange) plus black and white. Each color family ships ten stops at 10..100 in factors of ten — 10 is the lightest, 100 the deepest. Light mode (Carbon "White" / "g10" themes) uses gray-10 for the page canvas; dark mode (Carbon "g90" / "g100" themes) uses gray-100 / gray-90. Blue 60 is the canonical primary interactive color across all themes.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
IBM Plex Sans ([email protected]) |
OFL-1.1 | sans-serif |
body |
IBM Plex Sans ([email protected]) |
OFL-1.1 | sans-serif |
serif |
IBM Plex Serif ([email protected]) |
OFL-1.1 | serif |
mono |
IBM Plex Mono ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
black |
Black | #000000 |
white |
White | #FFFFFF |
gray-10 |
Gray 10 | #F4F4F4 |
gray-20 |
Gray 20 | #E0E0E0 |
gray-30 |
Gray 30 | #C6C6C6 |
gray-40 |
Gray 40 | #A8A8A8 |
gray-50 |
Gray 50 | #8D8D8D |
gray-60 |
Gray 60 | #6F6F6F |
gray-70 |
Gray 70 | #525252 |
gray-80 |
Gray 80 | #393939 |
gray-90 |
Gray 90 | #262626 |
gray-100 |
Gray 100 | #161616 |
cool-gray-10 |
Cool Gray 10 | #F2F4F8 |
cool-gray-20 |
Cool Gray 20 | #DDE1E6 |
cool-gray-30 |
Cool Gray 30 | #C1C7CD |
cool-gray-40 |
Cool Gray 40 | #A2A9B0 |
cool-gray-50 |
Cool Gray 50 | #878D96 |
cool-gray-60 |
Cool Gray 60 | #697077 |
cool-gray-70 |
Cool Gray 70 | #4D5358 |
cool-gray-80 |
Cool Gray 80 | #343A3F |
cool-gray-90 |
Cool Gray 90 | #21272A |
cool-gray-100 |
Cool Gray 100 | #121619 |
warm-gray-10 |
Warm Gray 10 | #F7F3F2 |
warm-gray-20 |
Warm Gray 20 | #E5E0DF |
warm-gray-30 |
Warm Gray 30 | #CAC5C4 |
warm-gray-40 |
Warm Gray 40 | #ADA8A8 |
warm-gray-50 |
Warm Gray 50 | #8F8B8B |
warm-gray-60 |
Warm Gray 60 | #726E6E |
warm-gray-70 |
Warm Gray 70 | #565151 |
warm-gray-80 |
Warm Gray 80 | #3C3838 |
warm-gray-90 |
Warm Gray 90 | #272525 |
warm-gray-100 |
Warm Gray 100 | #171414 |
blue-10 |
Blue 10 | #EDF5FF |
blue-20 |
Blue 20 | #D0E2FF |
blue-30 |
Blue 30 | #A6C8FF |
blue-40 |
Blue 40 | #78A9FF |
blue-50 |
Blue 50 | #4589FF |
blue-60 |
Blue 60 | #0F62FE |
blue-70 |
Blue 70 | #0043CE |
blue-80 |
Blue 80 | #002D9C |
blue-90 |
Blue 90 | #001D6C |
blue-100 |
Blue 100 | #001141 |
red-10 |
Red 10 | #FFF1F1 |
red-20 |
Red 20 | #FFD7D9 |
red-30 |
Red 30 | #FFB3B8 |
red-40 |
Red 40 | #FF8389 |
red-50 |
Red 50 | #FA4D56 |
red-60 |
Red 60 | #DA1E28 |
red-70 |
Red 70 | #A2191F |
red-80 |
Red 80 | #750E13 |
red-90 |
Red 90 | #520408 |
red-100 |
Red 100 | #2D0709 |
magenta-10 |
Magenta 10 | #FFF0F7 |
magenta-20 |
Magenta 20 | #FFD6E8 |
magenta-30 |
Magenta 30 | #FFAFD2 |
magenta-40 |
Magenta 40 | #FF7EB6 |
magenta-50 |
Magenta 50 | #EE5396 |
magenta-60 |
Magenta 60 | #D02670 |
magenta-70 |
Magenta 70 | #9F1853 |
magenta-80 |
Magenta 80 | #740937 |
magenta-90 |
Magenta 90 | #510224 |
magenta-100 |
Magenta 100 | #2A0A18 |
purple-10 |
Purple 10 | #F6F2FF |
purple-20 |
Purple 20 | #E8DAFF |
purple-30 |
Purple 30 | #D4BBFF |
purple-40 |
Purple 40 | #BE95FF |
purple-50 |
Purple 50 | #A56EFF |
purple-60 |
Purple 60 | #8A3FFC |
purple-70 |
Purple 70 | #6929C4 |
purple-80 |
Purple 80 | #491D8B |
purple-90 |
Purple 90 | #31135E |
purple-100 |
Purple 100 | #1C0F30 |
cyan-10 |
Cyan 10 | #E5F6FF |
cyan-20 |
Cyan 20 | #BAE6FF |
cyan-30 |
Cyan 30 | #82CFFF |
cyan-40 |
Cyan 40 | #33B1FF |
cyan-50 |
Cyan 50 | #1192E8 |
cyan-60 |
Cyan 60 | #0072C3 |
cyan-70 |
Cyan 70 | #00539A |
cyan-80 |
Cyan 80 | #003A6D |
cyan-90 |
Cyan 90 | #012749 |
cyan-100 |
Cyan 100 | #061727 |
teal-10 |
Teal 10 | #D9FBFB |
teal-20 |
Teal 20 | #9EF0F0 |
teal-30 |
Teal 30 | #3DDBD9 |
teal-40 |
Teal 40 | #08BDBA |
teal-50 |
Teal 50 | #009D9A |
teal-60 |
Teal 60 | #007D79 |
teal-70 |
Teal 70 | #005D5D |
teal-80 |
Teal 80 | #004144 |
teal-90 |
Teal 90 | #022B30 |
teal-100 |
Teal 100 | #081A1C |
green-10 |
Green 10 | #DEFBE6 |
green-20 |
Green 20 | #A7F0BA |
green-30 |
Green 30 | #6FDC8C |
green-40 |
Green 40 | #42BE65 |
green-50 |
Green 50 | #24A148 |
green-60 |
Green 60 | #198038 |
green-70 |
Green 70 | #0E6027 |
green-80 |
Green 80 | #044317 |
green-90 |
Green 90 | #022D0D |
green-100 |
Green 100 | #071908 |
yellow-10 |
Yellow 10 | #FCF4D6 |
yellow-20 |
Yellow 20 | #FDDC69 |
yellow-30 |
Yellow 30 | #F1C21B |
yellow-40 |
Yellow 40 | #D2A106 |
yellow-50 |
Yellow 50 | #B28600 |
yellow-60 |
Yellow 60 | #8E6A00 |
yellow-70 |
Yellow 70 | #684E00 |
yellow-80 |
Yellow 80 | #483700 |
yellow-90 |
Yellow 90 | #302400 |
yellow-100 |
Yellow 100 | #1C1500 |
orange-10 |
Orange 10 | #FFF2E8 |
orange-20 |
Orange 20 | #FFD9BE |
orange-30 |
Orange 30 | #FFB784 |
orange-40 |
Orange 40 | #FF832B |
orange-50 |
Orange 50 | #EB6200 |
orange-60 |
Orange 60 | #BA4E00 |
orange-70 |
Orange 70 | #8A3800 |
orange-80 |
Orange 80 | #5E2900 |
orange-90 |
Orange 90 | #3E1A00 |
orange-100 |
Orange 100 | #231000 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
white |
#FFFFFF |
surface |
gray-10 |
#F4F4F4 |
surface-elevated |
white |
#FFFFFF |
text-primary |
gray-100 |
#161616 |
text-secondary |
gray-70 |
#525252 |
text-tertiary |
gray-60 |
#6F6F6F |
primary |
blue-60 |
#0F62FE |
primary-hover |
blue-70 |
#0043CE |
accent |
purple-60 |
#8A3FFC |
accent-hover |
purple-70 |
#6929C4 |
warning |
yellow-30 |
#F1C21B |
warning-hover |
yellow-40 |
#D2A106 |
error |
red-60 |
#DA1E28 |
success |
green-50 |
#24A148 |
border |
gray-30 |
#C6C6C6 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
gray-100 |
#161616 |
surface |
gray-90 |
#262626 |
surface-elevated |
gray-80 |
#393939 |
text-primary |
gray-10 |
#F4F4F4 |
text-secondary |
gray-30 |
#C6C6C6 |
text-tertiary |
gray-40 |
#A8A8A8 |
primary |
blue-60 |
#0F62FE |
primary-hover |
blue-50 |
#4589FF |
accent |
purple-50 |
#A56EFF |
accent-hover |
purple-40 |
#BE95FF |
warning |
yellow-30 |
#F1C21B |
warning-hover |
yellow-20 |
#FDDC69 |
error |
red-50 |
#FA4D56 |
success |
green-40 |
#42BE65 |
border |
gray-80 |
#393939 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
white |
#FFFFFF |
on-identity |
gray-100 |
#161616 |
primary |
blue-60 |
#0F62FE |
primary-hover |
blue-70 |
#0043CE |
accent |
blue-60 |
#0F62FE |
accent-hover |
blue-70 |
#0043CE |
mark |
blue-60 |
#0F62FE |
success |
green-50 |
#24A148 |
warning |
yellow-30 |
#F1C21B |
error |
red-60 |
#DA1E28 |
text-primary-light |
gray-100 |
#161616 |
text-primary-dark |
gray-10 |
#F4F4F4 |
background-light |
white |
#FFFFFF |
background-dark |
gray-100 |
#161616 |
surface-light |
gray-10 |
#F4F4F4 |
surface-dark |
gray-90 |
#262626 |
text-secondary-light |
gray-70 |
#525252 |
text-tertiary-light |
gray-60 |
#6F6F6F |
border-light |
gray-30 |
#C6C6C6 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (7)
colorChoice → roles.colors.primary
- allowed: blue-60, blue-70
- forbidden: red-60, green-50, purple-60, cyan-60, teal-60
Carbon's
interactive-01token resolves to Blue 60 (#0F62FE) on the White, g10, g90, and g100 themes; Blue 70 (#0043CE) is the documented active/pressed state on the light themes. The other chromatic 60-stops are reserved for tags, data-viz categories, and notification accents, not for the primary interactive role.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Carbon's published accessibility commitment targets WCAG 2.1 AA at minimum. Gray 100 (#161616) on white clears AA at ~19:1 and Gray 10 (#F4F4F4) on Gray 100 clears AA at ~17:1 — both the light and dark theme primary text/background pairs satisfy the documented floor.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, outlined, gradient-fill, on-busy-photo, tilted
IBM's brand-experience guidelines prohibit stretching, rotating, recoloring, outlining, or applying decorative treatments to the 8-bar IBM mark and wordmark. The mark renders in solid black or solid white only, on a clear space at least one bar-height on every side.
contextRestriction → roles.colors.error
- forbiddenContexts: confirmation, completion, data-viz-positive
- allowedContexts: error-state, destructive-action, validation-failure
Carbon's
support-errortoken resolves to Red 60 (#DA1E28). Reusing it for confirmation or positive data points inverts the established meaning Carbon-skinned IBM products rely on.
contextRestriction → roles.colors.success
- forbiddenContexts: error-state, destructive-action
- allowedContexts: confirmation, completion, data-viz-positive
Carbon's
support-successtoken resolves to Green 50 (#24A148) — the documented success/positive-state color across the White, g10, g90, and g100 themes. Using it for error states is incompatible with Carbon's semantic role contract.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.5
Carbon's productive and expressive type ramps both maintain at least a 1.5× ratio between heading and body. Plex Sans display at the same size as body destroys the hierarchy Carbon's components rely on for scannability.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Carbon publishes AA as its baseline conformance target across all four themes; consumers shipping IBM-branded surfaces must meet it.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 300, 400, 500, 600, 700
IBM Plex Sans ships in Thin, ExtraLight, Light (300), Regular (400), Text (450), Medium (500), SemiBold (600), and Bold (700). Carbon's documented type ramp anchors at Light, Regular, SemiBold, and Bold — heavier display cuts are not defined in Carbon's expressive heading scale.
💡 recommendation (1)
compositionConstraint → roles.colors.mark
- pairsWith: white, gray-10, gray-100
- doesNotPairWith: red-60, magenta-60, orange-60, yellow-30
The IBM 8-bar mark is calibrated to read as a solid block on white, near-white (Gray 10), or near-black (Gray 100). Placing Blue 60 — used as the brand-block fill on color treatments — adjacent to red-60, magenta-60, orange-60, or yellow-30 at equal weight produces chromatic vibration that conflicts with the institutional voice.
Provenance
- Source: https://carbondesignsystem.com/
- License:
Proprietary — All Rights Reserved (Carbon tokens Apache-2.0; Plex SIL OFL) - Attribution: The Carbon Design System is published by IBM Corp. under Apache-2.0 (see
carbon-design-system/carbon). IBM Plex is licensed under the SIL Open Font License. The IBM 8-bar mark, the IBM wordmark, and "IBM" are registered trademarks of International Business Machines Corporation. - Imported:
2026-05-19 - Notes: This brand atom reuses the existing
carbon@1palette atom rather than duplicating IBM-specific colors. Carbon is the authoritative published color system for the IBM brand on digital surfaces; the brand atom adds the IBM-specific typography references and the trademark / logo-usage rules Carbon does not itself encode. The g100 theme (dark mode) documented in the Carbon source uses gray-100 as the canvas and Blue 60 as the unchanged interactive color.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by IBM
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
IBM
A clear hierarchy in IBM's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
IBM Carbon
[email protected]font · heading
IBM Plex Sans
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
IBM Plex Sans
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · serif
IBM Plex Serif
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
IBM Plex Mono
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ blue-60 #0F62FE accent-hover
→ blue-70 #0043CE background-dark
→ gray-100 #161616 background-light
→ white #FFFFFF border-light
→ gray-30 #C6C6C6 error
→ red-60 #DA1E28 identity
→ white #FFFFFF mark
→ blue-60 #0F62FE on-identity
→ gray-100 #161616 primary
→ blue-60 #0F62FE primary-hover
→ blue-70 #0043CE success
→ green-50 #24A148 surface-dark
→ gray-90 #262626 surface-light
→ gray-10 #F4F4F4 text-primary-dark
→ gray-10 #F4F4F4 text-primary-light
→ gray-100 #161616 text-secondary-light
→ gray-70 #525252 text-tertiary-light
→ gray-60 #6F6F6F warning
→ yellow-30 #F1C21B Typography
code
→ mono IBM Plex Mono display
→ heading IBM Plex Sans prose
→ body IBM Plex Sans Palette mode mappings (from carbon)
Light mode (15 roles)
accent
→ purple-60 accent-hover
→ purple-70 background
→ white border
→ gray-30 error
→ red-60 primary
→ blue-60 primary-hover
→ blue-70 success
→ green-50 surface
→ gray-10 surface-elevated
→ white text-primary
→ gray-100 text-secondary
→ gray-70 text-tertiary
→ gray-60 warning
→ yellow-30 warning-hover
→ yellow-40 Dark mode (15 roles)
accent
→ purple-50 accent-hover
→ purple-40 background
→ gray-100 border
→ gray-80 error
→ red-50 primary
→ blue-60 primary-hover
→ blue-50 success
→ green-40 surface
→ gray-90 surface-elevated
→ gray-80 text-primary
→ gray-10 text-secondary
→ gray-30 text-tertiary
→ gray-40 warning
→ yellow-30 warning-hover
→ yellow-20 Rules (9 typed constraints)
error · 7 rules
colorChoice roles.colors.primary allowed blue-60, blue-70 forbidden red-60, green-50, purple-60, cyan-60, teal-60 Carbon's `interactive-01` token resolves to Blue 60 (#0F62FE) on the White, g10, g90, and g100 themes; Blue 70 (#0043CE) is the documented active/pressed state on the light themes. The other chromatic 60-stops are reserved for tags, data-viz categories, and notification accents, not for the primary interactive role.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Carbon's published accessibility commitment targets WCAG 2.1 AA at minimum. Gray 100 (#161616) on white clears AA at ~19:1 and Gray 10 (#F4F4F4) on Gray 100 clears AA at ~17:1 — both the light and dark theme primary text/background pairs satisfy the documented floor.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, outlined, gradient-fill, on-busy-photo, tilted IBM's brand-experience guidelines prohibit stretching, rotating, recoloring, outlining, or applying decorative treatments to the 8-bar IBM mark and wordmark. The mark renders in solid black or solid white only, on a clear space at least one bar-height on every side.
contextRestriction roles.colors.error forbiddenContexts confirmation, completion, data-viz-positive allowedContexts error-state, destructive-action, validation-failure Carbon's `support-error` token resolves to Red 60 (#DA1E28). Reusing it for confirmation or positive data points inverts the established meaning Carbon-skinned IBM products rely on.
contextRestriction roles.colors.success forbiddenContexts error-state, destructive-action allowedContexts confirmation, completion, data-viz-positive Carbon's `support-success` token resolves to Green 50 (#24A148) — the documented success/positive-state color across the White, g10, g90, and g100 themes. Using it for error states is incompatible with Carbon's semantic role contract.
fontPairing typography.display requires prose minSizeRatio 1.5 Carbon's productive and expressive type ramps both maintain at least a 1.5× ratio between heading and body. Plex Sans display at the same size as body destroys the hierarchy Carbon's components rely on for scannability.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Carbon publishes AA as its baseline conformance target across all four themes; consumers shipping IBM-branded surfaces must meet it.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 300, 400, 500, 600, 700 IBM Plex Sans ships in Thin, ExtraLight, Light (300), Regular (400), Text (450), Medium (500), SemiBold (600), and Bold (700). Carbon's documented type ramp anchors at Light, Regular, SemiBold, and Bold — heavier display cuts are not defined in Carbon's expressive heading scale.
recommendation · 1 rule
compositionConstraint roles.colors.mark pairsWith white, gray-10, gray-100 doesNotPairWith red-60, magenta-60, orange-60, yellow-30 The IBM 8-bar mark is calibrated to read as a solid block on white, near-white (Gray 10), or near-black (Gray 100). Placing Blue 60 — used as the brand-block fill on color treatments — adjacent to red-60, magenta-60, orange-60, or yellow-30 at equal weight produces chromatic vibration that conflicts with the institutional voice.
Provenance
- Source
- https://carbondesignsystem.com/
- License
Proprietary — All Rights Reserved (Carbon tokens Apache-2.0; Plex SIL OFL)- Attribution
- The Carbon Design System is published by IBM Corp. under Apache-2.0 (see `carbon-design-system/carbon`). IBM Plex is licensed under the SIL Open Font License. The IBM 8-bar mark, the IBM wordmark, and "IBM" are registered trademarks of International Business Machines Corporation.
- Imported
2026-05-19- Notes
- This brand atom reuses the existing `carbon@1` palette atom rather than duplicating IBM-specific colors. Carbon is the authoritative published color system for the IBM brand on digital surfaces; the brand atom adds the IBM-specific typography references and the trademark / logo-usage rules Carbon does not itself encode. The g100 theme (dark mode) documented in the Carbon source uses gray-100 as the canvas and Blue 60 as the unchanged interactive color.