IBM DESIGN.md

Design System Inspiration of IBM

Overview

Visual Theme & Atmosphere

IBM is a long-running enterprise technology company whose public web experience connects cloud, AI, data, automation, and support information to a highly recognizable system language. Its current Korean public surfaces balance dense, practical product information with a restrained visual grammar: a white and light-gray field, near-black text, precise blue actions, and modestly rounded controls. The brand’s expressive layer comes principally from IBM Plex, a corporate typeface that IBM positions alongside its name and logo, while Carbon supplies the reusable component and accessibility guidance behind many of those public patterns. IBM’s own history traces the company from the 1911 Computing-Tabulating-Recording merger through its 1924 IBM name; its current About material frames the company around AI, cloud, quantum, and sustainability. IBM history · IBM About

The July 2026 capture establishes a narrower, current implementation boundary. It covers one Korean marketing route and two public product routes; it does not represent an authenticated IBM application or every Carbon theme. The product routes repeatedly use IBM Plex Sans KR, full-height 48px primary actions, 4px control corners, flat surfaces, and tab/accordion structures. Carbon documentation is authoritative design-system context, but its catalog of variants is not automatically a claim about every observed IBM.com surface.

Key characteristics:

• White and Gray 10 (#f4f4f4) layers with Gray 100 (#161616) text
• IBM Blue (#0f62fe) for the captured primary action; #0062fe also appears as a public link/color treatment
• IBM Plex Sans KR is the loaded, visible family on the captured Korean marketing and public-product surfaces
• Small, explicit action typography: 14px / 400 / 18.0001px with 0.16px tracking
• A mixed corner treatment: content structures are often sharp, while captured primary actions and tabs use 4px

Primary tasks

• Find the IBM offering that covers cloud, AI, data or automation
• Read the detailed product information on an IBM product page
• Move between the related views of a product page
• Open a support topic to read what it covers

Brand Narrative

IBM’s own history places its origin in the 1911 creation of Computing-Tabulating-Recording Company from data-processing businesses; the company later became IBM. That long data-and-computing lineage helps explain a brand system that presents technical information as structured, durable, and internationally usable rather than fashion-led. The origins of IBM

The contemporary expression is held together by IBM Plex and Carbon. IBM calls Plex a corporate typeface and makes its source and OFL boundary available; Carbon provides the public component guidance that contextualizes buttons, tabs, and accordions. Current IBM About material presents the company’s work around AI, cloud, quantum computing, and sustainability. This reference keeps those first-party narrative facts separate from the limited set of computed values collected on Korean public routes. IBM Plex · IBM About

Principles

1. Make the action legible. Carbon treats a button label as the statement of the action. UI implication: use direct sentence-case action labels rather than vague promotional nouns.
2. Use typography as identity and information structure. IBM positions Plex as a core brand asset and uses Mono/Sans differently in its Developer guidance. UI implication: use the loaded KR Sans evidence for this public-web reference; reserve other official Plex families for surfaces where their use is actually established.
3. Keep component context intact. Carbon’s tab and accordion guidance makes their purpose and behavior explicit. UI implication: use tabs for related views and accordions for progressive disclosure; do not invent unobserved state variants.
4. Separate system guidance from surface fact. Carbon is IBM’s official system, but this packet observes a bounded public web slice. UI implication: never overwrite product/marketing evidence with a generic component catalog.

Personas

No first-party audience research suitable for named personas was collected in this packet. Do not invent demographic personas.

Public-product and support-information audiences may be added only with an IBM first-party research or product source.

Colors

Observed public marketing and product palette

• Primary action (#0f62fe): default background on the captured Cloud Support CTA; white text.
• Link / product accent (#0062fe): observed as text and border color on the marketing and Confluent routes. It is retained as a separate observed role, not silently collapsed into the CTA value.
• Canvas (#ffffff): observed public page background and light control surface.
• Foreground (#161616): repeated text and border color across all three captured routes.
• Muted text (#525252): repeated secondary text color across all three captured routes.
• Layer (#f4f4f4): repeated product tab/input/card-adjacent surface.
• Border (#c6c6c6): observed tab and card boundary color.

The capture also found route-local state colors such as #e8e8e8 on a tab hover and several darker blue CTA states. They are documented with selector and surface provenance in §4 rather than promoted as universal palette tokens.

Typography

Evidence classes

Official product-use. IBM’s Design Language calls IBM Plex its corporate typeface and lists Sans, Mono, Serif, and Condensed subfamilies. IBM Developer separately states that Plex Mono Light is its expressive primary face and Plex Sans supports informative text. These are official brand-system facts, not proof that every current IBM.com page loads every family. IBM Design Language · IBM Developer typography

Live computed surface-use. The supplied 2026-07-13 capture records IBM Plex Sans KR as loaded/high for 485 visible elements across marketing, Cloud Support, and Confluent. IBM Plex Sans is also loaded/high for 25 elements. Representative measured styles include a 53.6469px/300/62.7669px marketing leadspace, 16px/400/24px product body, 14px/400/18.0001px action text with 0.16px tracking, and a 12px/400/16px marketing badge with 0.32px tracking.

Official distributed asset and license. IBM describes Plex as open source and directs users to its GitHub release; its Design Language says the downloadable files contain the Open Font License. This supports the typeface’s distribution and license boundary, not a browser substitution. Typeface and license note

Declared-only in this capture. IBM Plex Mono, IBM Plex Serif, IBM Plex Sans Arabic, IBM Plex Sans Hebrew, and IBM Plex Sans JP had @font-face sources but no visible computed use in the three captured routes. Mono and Serif remain useful official family context, but are not machine UI-family tokens here.

System/unresolved. A marketing newsletter input computed to Helvetica, Arial, sans-serif; it is kept separate as marketing-form chrome and is not represented as IBM Plex. ibm_icons was loaded for two icon elements; it is not typography content.

Layout

The captured 1440px routes repeatedly expose 8, 12, 16, 24, 32, 48, and 64px spacing values. Treat these as observed rhythm candidates, not a complete responsive grid specification. Carbon’s 2x Grid is official system guidance, but the supplied artifact did not measure breakpoint-specific grid columns or a second viewport; those values remain outside this reference’s live-token scope.

For the observed public routes, use light-gray layering and clean rule boundaries before introducing shadow. Keep action controls at the measured 48px height where the public-product primary CTA pattern is appropriate. Do not infer an authenticated-product layout from the marketing or product-detail pages.

Responsive Behavior

No breakpoint comparison was collected in this packet. The public primary CTA, tabs, accordion header, and marketing field were measured only at the captured 1440×900 viewport. Preserve normal responsive accessibility requirements in an implementation, but do not claim IBM-specific mobile geometry, navigation collapse, or grid changes without a separate observation.

Elevation & Depth

The representative public components in the supplied bundle report box-shadow: none. The visible hierarchy comes from white and #f4f4f4 surfaces, text contrast, borders, and the accent action. Floating menus, dialogs, tooltips, and overlays were not captured; their elevation values are intentionally absent.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.flat: none

Motion & Easing

The supplied evidence records hover, pressed, focus, and tab-selected results but does not measure durations, curves, or reduced-motion behavior. Do not infer a motion scale from Carbon documentation or from static state values. Motion tokens may be added only after direct IBM-surface or official-token evidence.

Components

Public product primary action

Default — Cloud Support and Confluent

• Background: #0f62fe
• Text: #ffffff
• Border: 1px solid transparent
• Radius: 4px
• Padding: 14px 63px 14px 15px
• Height: 48px
• Font: 14px / 400 / IBM Plex Sans KR
• Use: Public product CTA; selectors surface-2::[data-omd-capture="4"] and surface-3::[data-omd-capture="16"].
• Hover: #095bf4 on Cloud Support and #0b5df8 on Confluent.
• Pressed: #0c56e7 on Cloud Support and #0953e5 on Confluent.
• Focus: 4px radius with dark-blue background and inset focus treatment; raw values are retained in .verification.md because the two routes differ.

Public product tabs

Contained tab — Confluent route

• Background: #f4f4f4
• Text: #161616
• Border: 1px solid #c6c6c6
• Radius: 4px
• Padding: 0px 16px
• Height: 48px
• Font: 16px / 400 / IBM Plex Sans KR
• Use: surface-3::[data-omd-capture="10"], a public Confluent tablist.
• Hover: #e8e8e8 background.
• Selected: transparent background with #ffffff text; the selected target panels were captured through the tab interaction.
• Pressed: observed by the collector; no universal pressed color is promoted because the evidence records route-local values only.

Public product accordion

Flush support accordion header — Cloud Support route

• Text: #161616
• Border: 1px solid #e0e0e0 on the item’s top edge
• Radius: 0px
• Padding: 0px 16px 0px 0px
• Height: 40px
• Font: 16px / 400 / IBM Plex Sans KR
• Use: surface-2::[data-omd-capture="5"], class cds--accordion__heading cmp-accordion__button.
• Focus: captured on the header.
• Pressed: captured on the header.

The bundle did not record an accordion-panel expansion interaction, so no expanded-panel spacing, icon rotation, disabled state, or generic modal/toast/form-error variant is asserted. Carbon’s accordion guidance describes the broader component separately.

Marketing-form boundary

Newsletter field — marketing only

• Background: #f4f4f4
• Text: #161616
• Border: 1px bottom edge #8d8d8d
• Radius: 0px
• Padding: 0px 16px
• Height: 48px
• Font: 14px / 400 / Helvetica, Arial, sans-serif
• Use: home::[data-omd-capture="23"]; a Marketo-classed field on the public marketing route.

This form field is not promoted into the IBM Plex product token set.

---

Verified: 2026-07-13 Tier 1 sources: IBM KR marketing, Cloud Support, Confluent, Carbon Button, Carbon Tabs, Carbon Accordion Tier 2 sources: getdesign IBM directory; Refero query attempted, but the built-in web tool refused the direct URL and no indexed Refero IBM result was used. Resolution note: The earlier universal 0px primary-button claim was rolled back: the supplied fresh public-product evidence measures 4px on the captured primary CTAs. Conflicts unresolved: none

Published component roster (39 published, one identified here)

Carbon publishes 39 components, read from its own component gallery at https://carbondesignsystem.com/components/overview/components/ on 2026-09-19. The gallery is a level below the overview page, which links to it and lists nothing itself.

Accordion, AI label, Breadcrumb, Button, Checkbox, Code snippet, Contained list, Content switcher, Data table, Date picker, Dropdown, File uploader, Form, Inline loading, Link, List, Loading, Menu, Menu buttons, Modal, Notification, Number input, Pagination, Popover, Progress bar, Progress indicator, Radio button, Search, Select, Slider, Structured list, Tabs, Tag, Text input, Tile, Toggle, Toggletip, Tooltip, Tree view

Carbon files patterns in a separate index and they are excluded; so are the doc pages that my sitemap sweep had flattened in alongside components. The gallery is the source, and anything it does not card is out by that fact.

One of the two entries is genuinely identified; the other is not

§4 records two stylings, and they do not have the same standing.

The accordion heading carries class cds--accordion__heading cmp-accordion__button in its capture. cds-- is Carbon's own class prefix, so that capture is bound by name to Carbon's published Accordion — this is real identity evidence, of the kind most references in this catalogue lack, and it means this reference measures one of the 39 above.

The search input is identified only by selector position on a documentation surface, with no cds-- or bx-- class recorded. It is not claimed as Carbon's published Search.

The remaining 38 carry no measured value here.

States

Do's and Don'ts

Do

• Use the measured IBM Plex Sans KR public-web family when implementing the captured Korean product patterns.
• Keep the captured primary CTA at 48px high with 4px radius and the observed asymmetric padding.
• Distinguish #0f62fe CTA backgrounds from the separately observed #0062fe link treatment.
• Keep tabs and accordion behavior tied to their documented public-product routes and selector provenance.
• Use Carbon documentation for system-level guidance while preserving the actual IBM.com surface boundary.

Don't

• Do not reintroduce a universal 0px-radius primary-button rule for the captured public-product routes.
• Do not render Helvetica marketing-form chrome as IBM Plex or promote it to the product type token.
• Do not turn declared-only Mono, Serif, or locale faces into visible-webfont claims.
• Do not invent expanded accordion, error, modal, toast, or dashboard states from the current capture.
• Do not apply the Korean public-web measurements as a substitute for an authenticated IBM product surface.

Voice & Tone

IBM’s public design guidance favors clear, action-led labels and systematic information architecture over decorative copy. Carbon’s button guidance asks labels to communicate the action and recommends sentence case; the IBM Developer typography guidance uses code-adjacent glyphs and disciplined type to make technical communication recognizable. For IBM-style public product copy, name the task or resource, use direct verbs, and let supporting text explain the technical context. Avoid invented security certifications, performance outcomes, or informal claims of transformation. Carbon Button guidance · IBM Developer typography

Agent Prompt Guide

Quick reference

• Product CTA: #0f62fe / #ffffff, 4px radius, 48px high, 14px / 400 IBM Plex Sans KR.
• Product body: IBM Plex Sans KR, 16px / 400 / 24px, #161616.
• Product tabs: #f4f4f4 surface, #161616 text, 1px #c6c6c6 border, 4px radius.
• Support accordion: sharp 40px header, top rule #e0e0e0, 16px / 400 IBM Plex Sans KR.

Boundary-aware prompt

• "Create a public-product CTA using the captured IBM pattern: #0f62fe background, white text, 4px radius, 48px height, 14px 63px 14px 15px padding, and IBM Plex Sans KR at 14px/400. Keep hover, pressed, and focus route-specific rather than inventing one global state value."