{ "schema": "brand-kit@2", "palette": { "paper": "#FFFFFF", "surface": "#F4F4F4", "ink": "#161616", "ink_muted": "#525252", "accent": "#0F62FE", "on_accent": "#FFFFFF", "accent_secondary": "#0043CE", "night": "#161616", "on_night": "#FFFFFF", "extras": [ { "name": "white", "hex": "#FFFFFF", "role": "Carbon White theme page ground ($background) and text on Blue 60 ($text-on-color)", "prov": "published", "source": "https://carbondesignsystem.com/elements/color/tokens/" }, { "name": "black", "hex": "#000000", "role": "Core color; positive 8-bar on light grounds", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "gray-10", "hex": "#F4F4F4", "role": "Gray 10: $layer-01 container and $field-01 input on the White theme; Gray 10 theme page ground", "prov": "published", "source": "https://carbondesignsystem.com/elements/color/tokens/" }, { "name": "gray-20", "hex": "#E0E0E0", "role": "Gray 20: $border-subtle-00 and $layer-selected-01", "prov": "published", "source": "https://carbondesignsystem.com/elements/color/tokens/" }, { "name": "gray-30", "hex": "#C6C6C6", "role": "Gray 30: $border-subtle-01, $layer-active-01 and $button-disabled", "prov": "published", "source": "https://carbondesignsystem.com/elements/color/tokens/" }, { "name": "gray-40", "hex": "#A8A8A8", "role": "Gray 40: $border-tile-02 and $layer-accent-active-01", "prov": "published", "source": "https://carbondesignsystem.com/elements/color/tokens/" }, { "name": "gray-50", "hex": "#8D8D8D", "role": "Gray 50: $border-strong-01 (input underline, 3:1 non-text contrast) and $text-on-color-disabled", "prov": "published", "source": "https://carbondesignsystem.com/elements/color/tokens/" }, { "name": "gray-60", "hex": "#6F6F6F", "role": "Gray 60: $text-helper (help and tertiary text)", "prov": "published", "source": "https://carbondesignsystem.com/elements/color/tokens/" }, { "name": "gray-70", "hex": "#525252", "role": "Gray 70: $text-secondary and $icon-secondary", "prov": "published", "source": "https://carbondesignsystem.com/elements/color/tokens/" }, { "name": "gray-80", "hex": "#393939", "role": "Gray 80: $button-secondary fill and $background-inverse", "prov": "published", "source": "https://carbondesignsystem.com/elements/color/tokens/" }, { "name": "gray-90", "hex": "#262626", "role": "Gray 90: Gray 90 theme page ground", "prov": "published", "source": "https://carbondesignsystem.com/elements/color/overview/" }, { "name": "gray-100", "hex": "#161616", "role": "Gray 100: $text-primary, $icon-primary, $border-inverse; Gray 100 theme page ground", "prov": "published", "source": "https://carbondesignsystem.com/elements/color/tokens/" }, { "name": "layer-hover", "hex": "#E8E8E8", "role": "$layer-hover-01 and $field-hover-01 (a half step between Gray 10 and Gray 20, outside the core steps)", "prov": "published", "source": "https://carbondesignsystem.com/elements/color/tokens/" }, { "name": "layer-selected-hover", "hex": "#D1D1D1", "role": "$layer-selected-hover-01", "prov": "published", "source": "https://carbondesignsystem.com/elements/color/tokens/" }, { "name": "inverse-hover", "hex": "#474747", "role": "$button-secondary-hover and $background-inverse-hover", "prov": "published", "source": "https://carbondesignsystem.com/elements/color/tokens/" }, { "name": "blue-10", "hex": "#EDF5FF", "role": "Blue 10", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "blue-20", "hex": "#D0E2FF", "role": "Blue 20: $highlight; a light ground for a Blue 70 or Gray 100 logo", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "blue-30", "hex": "#A6C8FF", "role": "Blue 30: $link-inverse-hover", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "blue-40", "hex": "#78A9FF", "role": "Blue 40: $link-inverse (links on dark grounds)", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "blue-50", "hex": "#4589FF", "role": "Blue 50", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "blue-60", "hex": "#0F62FE", "role": "Blue 60: the core action color ($button-primary, $link-primary, $focus, $interactive, $background-brand)", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "blue-60-hover", "hex": "#0050E6", "role": "$button-primary-hover (a half step, used for hover only)", "prov": "published", "source": "https://carbondesignsystem.com/elements/color/tokens/" }, { "name": "blue-70", "hex": "#0043CE", "role": "Blue 70: $link-primary-hover and $support-info", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "blue-80", "hex": "#002D9C", "role": "Blue 80: $button-primary-active", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "blue-90", "hex": "#001D6C", "role": "Blue 90", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "blue-100", "hex": "#001141", "role": "Blue 100", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "purple-60", "hex": "#8A3FFC", "role": "Purple 60: $link-visited", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "purple-40", "hex": "#BE95FF", "role": "Purple 40: $link-inverse-visited", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "purple-70", "hex": "#6929C4", "role": "Purple 70", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "magenta-60", "hex": "#D02670", "role": "Magenta 60: background for a white logo in the guide's examples", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "cyan-50", "hex": "#1192E8", "role": "Cyan 50", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "cyan-60", "hex": "#0072C3", "role": "Cyan 60", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "teal-50", "hex": "#009D9A", "role": "Teal 50", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "teal-60", "hex": "#007D79", "role": "Teal 60", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "green-50", "hex": "#24A148", "role": "Green 50: also Alert 50 and $support-success", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "green-60", "hex": "#198038", "role": "Green 60", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "red-60", "hex": "#DA1E28", "role": "Red 60: also Alert 60, $support-error and $text-error", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "alert-40", "hex": "#FF832B", "role": "Alert 40 (orange), alerts only", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "alert-30", "hex": "#F1C21B", "role": "Alert 30 (yellow): $support-warning, alerts only", "prov": "published", "source": "https://www.ibm.com/design/language/color" }, { "name": "cta-blue", "hex": "#0062FE", "role": "Text CTA color on c4d-text-cta and link-list CTAs (\"Explore all IBM products\", training CTAs); the site's link token, one step off Blue 60", "prov": "observed", "source": "https://www.ibm.com/", "date": "2026-10-29" }, { "name": "magenta-50", "hex": "#EE5396", "role": "End of the leadspace headline gradient (90deg from #0F62FE)", "prov": "observed", "source": "https://www.ibm.com/", "date": "2026-10-29" } ] }, "typography": { "display": { "family": "IBM Plex Sans", "weight": 300, "tracking": 0, "line_height": 1.17, "fallback_stack": "\"Helvetica Neue\", Arial, sans-serif", "google_fonts": "IBM+Plex+Sans:wght@300;400;600", "real": "IBM Plex Sans (IBM's own corporate typeface, SIL Open Font License)", "stand_in": false }, "body": { "family": "IBM Plex Sans", "weight": 400, "line_height": 1.5, "scale": 1, "fallback_stack": "\"Helvetica Neue\", Arial, sans-serif", "google_fonts": "IBM+Plex+Sans:wght@300;400;600", "real": "IBM Plex Sans", "stand_in": false }, "mono": { "family": "IBM Plex Mono", "weight": 400, "line_height": 1.43, "fallback_stack": "Menlo, Courier, monospace", "google_fonts": "IBM+Plex+Mono:wght@400", "real": "IBM Plex Mono", "stand_in": false }, "calibration": "No stand-in: IBM Plex is the real face, open-licensed (SIL OFL) and on Google Fonts, though IBM recommends its GitHub release as the most current. Weights as IBM uses them: Carbon's expressive display styles are Light 300 (fluid-display-01 54/64, -03 60/70, -04 92/102) with SemiBold 600 variants; body is Regular 400 (body-02 16/24); small headings are SemiBold 600 (heading-02 16/24). On the ibm.com homepage (observed 2026-10-29) the lead H1 renders at 53.6px/62.8px weight 300 at 1440 wide and 32.8px/41px weight 400 at 390 wide; section H2s 53.6px weight 300; the lead paragraph 20px/28px 400; case-study titles 28px/36px 400; stat figures and module labels 20px 600. Tracking is 0 on display and body except fluid-display-03/-04 (-0.64px) and the 12-14px utility styles (+0.16 to +0.32px). Plex is drawn to be set open, so never tighten it. Which font files ibm.com loads was not checked." }, "style": { "button_shape": "square", "motion": "Two Carbon styles: productive cubic-bezier(0.2, 0, 0.38, 0.9) for task UI, expressive cubic-bezier(0.4, 0.14, 0.3, 1) for occasional big moments; durations 70-700ms by token" }, "voice": { "tone": [ "Essential", "Confident", "Plain" ], "notes": [ "Two voices, scoped. The design-language voice (ibm.com/design/language) is a manifesto: short declaratives, arrows and equations ('Think → Guide', 'Stand for = Stand out', 'Here → There'), first person plural, modernist history. It speaks to IBMers and designers.", "The institutional homepage voice (ibm.com) is plainer: verb-first product lines ('Secure machine and agent identities with IBM Vault'), sentence case, one benefit with one sourced number, no wordplay. It speaks to buyers and practitioners.", "A landing page follows the homepage voice: a short sentence-case headline, one or two plain sentences, a verb-first action. Borrow the guide's voice only for brand or design moments.", "The guide's stated aim: every experience should save time or make time well spent (paraphrase).", "Carbon's content guidance asks for clear, concise, actionable UI copy based on IBM's standards (IBM Style), which are not public in full." ], "rules": [ { "id": "headline-case", "kind": "headline_case", "value": "sentence", "prov": "published", "source": "https://www.ibm.com/design/language/typography/type-basics" }, { "id": "no-all-caps", "kind": "guidance", "text": "Avoid all caps, especially in paragraphs; title case only for proper titles and product names", "prov": "published", "source": "https://www.ibm.com/design/language/typography/type-basics" }, { "id": "button-case", "kind": "guidance", "text": "Button labels in sentence case: first word and proper nouns capitalized", "prov": "published", "source": "https://carbondesignsystem.com/components/button/style/" }, { "id": "curly-quotes", "kind": "guidance", "text": "Use curly quotes and apostrophes, never straight quotes", "prov": "published", "source": "https://www.ibm.com/design/language/typography/type-basics" }, { "id": "em-dash", "kind": "guidance", "text": "Em dash for a strong break, en dash for number ranges (1945–1975), hyphen for compounds (check-in)", "prov": "published", "source": "https://www.ibm.com/design/language/typography/type-basics" }, { "id": "one-emphasis", "kind": "guidance", "text": "No 'belt and suspenders': one emphasis style at a time", "prov": "published", "source": "https://www.ibm.com/design/language/typography/type-basics" }, { "id": "no-hyperbole", "kind": "guidance", "text": "Avoid hyperbole, jargon and spin", "prov": "published", "source": "https://www.ibm.com/design/language/photography/tips-and-techniques" }, { "id": "verb-first", "kind": "guidance", "text": "Product lines and links start with a verb: Explore, Build, Connect, Secure, Learn how", "prov": "observed", "source": "https://www.ibm.com/us-en" }, { "id": "number-with-source", "kind": "guidance", "text": "A number appears only with its product, customer or report named beside it", "prov": "observed", "source": "https://www.ibm.com/us-en" }, { "id": "dates", "kind": "guidance", "text": "Dates on the homepage read day month year without commas: '10 November 2026, 12 PM ET', '3 Nov, 11 AM ET'", "prov": "observed", "source": "https://www.ibm.com/us-en" }, { "id": "trademarks", "kind": "guidance", "text": "Product names carry their marks on first use: IBM Bob™, IBM Z®, watsonx Orchestrate®, Terraform®", "prov": "observed", "source": "https://www.ibm.com/us-en" }, { "id": "spelling", "kind": "spelling", "value": "en-US", "prov": "published", "source": "https://www.ibm.com/design/language/typography/type-scale" } ], "approved": { "words": [ "Explore", "Learn how", "See how", "Discover", "Build", "Connect", "Secure", "Bring", "Manage, govern, secure", "watsonx (lowercase w)" ] }, "banned": [ "ALL CAPS paragraphs", "straight quotes", "hyphen or en dash in place of an em dash", "hyperbole and jargon" ] }, "spec": { "motion": [ { "name": "standard-productive", "easing": "cubic-bezier(0.2, 0, 0.38, 0.9)", "use": "Elements visible from start to end of a move (expanding tiles, sorting rows) in task UI; button states, dropdowns, data tables", "prov": "published", "source": "https://carbondesignsystem.com/elements/motion/overview/" }, { "name": "standard-expressive", "easing": "cubic-bezier(0.4, 0.14, 0.3, 1)", "use": "The same moves at significant moments: opening a page, the primary action, notifications", "prov": "published", "source": "https://carbondesignsystem.com/elements/motion/overview/" }, { "name": "entrance-productive", "easing": "cubic-bezier(0, 0, 0.38, 0.9)", "use": "Elements entering the view, productive", "prov": "published", "source": "https://carbondesignsystem.com/elements/motion/overview/" }, { "name": "entrance-expressive", "easing": "cubic-bezier(0, 0, 0.3, 1)", "use": "Elements entering the view, expressive", "prov": "published", "source": "https://carbondesignsystem.com/elements/motion/overview/" }, { "name": "exit-productive", "easing": "cubic-bezier(0.2, 0, 1, 0.9)", "use": "Elements leaving for good (closing a modal or toast), productive", "prov": "published", "source": "https://carbondesignsystem.com/elements/motion/overview/" }, { "name": "exit-expressive", "easing": "cubic-bezier(0.4, 0.14, 1, 1)", "use": "Elements leaving for good, expressive", "prov": "published", "source": "https://carbondesignsystem.com/elements/motion/overview/" }, { "name": "duration-fast-01", "duration_ms": 70, "use": "Micro-interactions such as button and toggle", "prov": "published", "source": "https://carbondesignsystem.com/elements/motion/overview/" }, { "name": "duration-fast-02", "duration_ms": 110, "use": "Micro-interactions such as fade", "prov": "published", "source": "https://carbondesignsystem.com/elements/motion/overview/" }, { "name": "duration-moderate-01", "duration_ms": 150, "use": "Small expansion, short-distance movement", "prov": "published", "source": "https://carbondesignsystem.com/elements/motion/overview/" }, { "name": "duration-moderate-02", "duration_ms": 240, "use": "Expansion, system communication, toast", "prov": "published", "source": "https://carbondesignsystem.com/elements/motion/overview/" }, { "name": "duration-slow-01", "duration_ms": 400, "use": "Large expansion, important system notifications", "prov": "published", "source": "https://carbondesignsystem.com/elements/motion/overview/" }, { "name": "duration-slow-02", "duration_ms": 700, "use": "Background dimming", "prov": "published", "source": "https://carbondesignsystem.com/elements/motion/overview/" } ], "icons": { "grid": "32×32 (drawn on a 32px pixel grid, 2px padding, scaled down linearly)", "stroke": "2px for UI icons; pictograms 0.72px (productive) or 1.44px (expressive)", "corner_radius": "2px, increased in multiples of two when the metaphor needs it", "angles": "45° for even anti-aliasing, otherwise 15° increments", "sizes": [ { "name": "s", "px": 16, "use": "Default in Carbon components; pairs with 14px Plex" }, { "name": "m", "px": 20, "use": "Pairs with 16px Plex; expressive button icon" }, { "name": "l", "px": 24, "use": "Larger UI icons" }, { "name": "xl", "px": 32, "use": "Largest UI icon artboard; the master grid" } ], "touch_target_px": 44, "prov": "published", "source": "https://www.ibm.com/design/language/iconography/ui-icons/design", "also": [ "https://carbondesignsystem.com/elements/icons/usage/", "https://www.ibm.com/design/language/iconography/pictograms/design" ] }, "signature": [ { "id": "light-plex-headline", "name": "Big, light, flush-left Plex", "where": "the lead headline of every page and section on ibm.com and in the guide", "spec": "IBM Plex Sans Light 300 at Carbon display sizes (fluid-display-01 54/64; ibm.com renders its H1 and section H2s at 53.6px/62.8px weight 300 at 1440 wide), sentence case, flush left, tracking 0, stacked into two or three short lines rather than one long one. Hierarchy comes from scale and weight contrast (Light headline over Regular body, SemiBold small labels), never from a second typeface", "once": "one per band", "prov": "published", "source": "https://carbondesignsystem.com/elements/typography/type-sets/", "also": [ "https://www.ibm.com/design/language/typography/type-basics", "https://www.ibm.com/us-en" ], "example": { "ground": "paper", "text": "The essentials to scale AI", "font": "display", "weight": 300 }, "dont_example": { "ground": "paper", "text": "THE ESSENTIALS TO SCALE AI", "font": "display", "weight": 600 }, "dont": "set headlines centered, in all caps, bold at display sizes, or tightly tracked; Plex is drawn to breathe" }, { "id": "carbon-blue-button", "name": "The Blue 60 button with the label left and the arrow right", "where": "primary calls to action on ibm.com (hero) and across Carbon", "spec": "Carbon publishes square corners; ibm.com renders them at 4px radius, and a landing page follows ibm.com (4px). Blue 60 #0F62FE fill, white Plex Sans Regular label (16px on ibm.com), 16px left padding and 64px right padding so the label hugs the left and an icon sits right; 48px tall for the expressive large size; hover #0050E6, active Blue 80 #002D9C, 2px Blue 60 focus border with a 1px white inset. Paired secondary is Gray 80 #393939 or a tertiary Blue 60 outline; in a group, primary sits on the outside", "once": "one primary per view", "prov": "published", "source": "https://carbondesignsystem.com/components/button/style/", "also": [ "https://carbondesignsystem.com/elements/color/tokens/", "https://www.ibm.com/us-en" ], "example": { "ground": "paper", "text": "Explore the event", "button": true }, "dont_example": { "ground": "paper", "text": "Explore the event", "button": true, "radius": 24 }, "dont": "round the corners, center the label, or color a button anything but the core blue (danger red is for destructive actions only)" }, { "id": "2x-grid", "name": "Everything on the 2x Grid", "where": "layout, type, icons, illustration and photo crops", "spec": "Divide by two: 16 columns at large widths (8 at medium, 4 at small), 8px mini unit, 16px box padding, 32px total gutter, margins fixed per breakpoint; type always aligns to the edge of the box padding. Spacing in mini-unit multiples (Carbon tokens 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 160px). Images and containers in 16:9, 4:3, 3:2, 2:1, 1:1 (Carbon adds 2:3), width measured to the columns", "once": "always", "prov": "published", "source": "https://www.ibm.com/design/language/2x-grid", "also": [ "https://carbondesignsystem.com/elements/2x-grid/overview/", "https://carbondesignsystem.com/elements/spacing/overview/" ], "dont": "divide from the canvas edge when using a margin, add gutters without redistributing, or place type on the padding" }, { "id": "8-bar-signoff", "name": "The 8-bar logo signs off", "where": "every official IBM communication: covers in print, the final frame in video", "spec": "Paul Rand's 8-bar logo (1972), positive or reversed version to match the ground, in core blue or gray colors with at least five steps between logo and background, clear space equal to its height. The rebus is for merchandise, badges and events, never the sign-off", "once": "once, at the end or on the cover", "prov": "published", "source": "https://www.ibm.com/design/language/ibm-logos/8-bar", "also": [ "https://www.ibm.com/design/language/ibm-logos/rebus" ], "dont": "put the logo in a shape, add a tagline, recolor the bars, use a gradient or drop shadow, or substitute the rebus" } ], "page": { "source": "https://www.ibm.com/", "date": "2026-10-29", "prov": "observed", "how": "Playwright, desktop Chrome UA, waitUntil load + 5s, at 1440x900 and 390x900; TrustArc banner removed; computed styles read through every shadow root (the page is Carbon for IBM.com web components, c4d-*), pixels sampled from screenshots where a value lives in a pseudo-element", "voice_scope": "The homepage speaks in the plain institutional product voice: sentence case, one-clause headings that name a product and an outcome (\"Build and modernize software faster with IBM Bob\"), numbers only where the customer supplied them (case-study stats). The guide's campaign/expressive voice is for brand and event moments (the TechXchange leadspace and its gradient headline). A landing page follows the homepage voice for structure, wayfinding and card copy, and may use the expressive voice only in its one leadspace headline.", "announcement": { "summary": "A full-width #F4F4F4 strip under the nav: one centered line, gradient bold lead-in, regular copy, blue launch icon. The whole strip is one link (opens in a new tab)", "ground": "#F4F4F4", "height": "64px at 1440 (y 49-113); 102px at 390 (y 49-151)", "desktop": "centered row: lead-in \"The future starts at Current\" IBM Plex Sans 20px/28px 600 filled with linear-gradient(90deg, #0F62FE, #8A3FFC) via background-clip text (x 308, w 253); 20px gap; copy 20px/28px 400 #161616 (x 581, w 513); 10px gap; 20px launch icon #0F62FE (x 1112)", "phone": "left-aligned at x 16, max 320px: lead-in 16px/22px 600 gradient on its own line, copy 16px/22px 400 #161616 on two lines below, launch icon 20px top-right at x 358, y 70", "prov": "observed" }, "nav": { "summary": "Carbon masthead: white 48px bar, 8-bar IBM logo at left, six text menu items, four 48px icon buttons at the right edge", "ground": "#FFFFFF, 1px #E0E0E0 bottom rule (y 48), total 49px", "height": "49px at both widths (48 + 1px rule)", "border": "1px #E0E0E0 bottom; a 1px #E0E0E0 vertical divider 24px tall at x 126 between the logo and the first menu item", "logo": { "variant": "8-bar IBM logo, solid black (#000000 SVG fill)", "px": "58x23 at x 34, y 13 (link box 126x48 with 32px side padding); phone 37x23 at x 66", "position": "top left" }, "links": { "count": 6, "labels": [ "Software", "Infrastructure", "Consulting", "Support", "Think", "Developer Tools" ], "chevrons": "Software, Infrastructure and Support carry a 20px chevron-down (#525252) and open mega menus; Consulting, Think and Developer Tools are plain links", "size": "16px/22px", "weight": 400, "color": "#525252", "padding": "13px 16px, each item 48px tall", "alignment": "left, starting x 142 right after the divider (Software 142, Infrastructure 266, Consulting 427, Support 535, Think 653, Developer Tools 724)" }, "actions": "no button. Four 48x48 icon buttons flush right, 20px #525252 icons: search (aria \"Open IBM search field\", x 1244), contact chat bubble (aria \"Contact\", x 1292), globe for locale (x 1342), user profile (aria \"User profile\", x 1392)", "sticky": "yes, the masthead is position fixed at top 0", "phone": "hamburger 48x48 at x 0 (aria \"Open navigation menu\", 20px icon), logo 37x23 at x 66, then search (x 242), globe (x 292) and profile (x 342) at the right. No contact icon and no CTA on phones. Menu items move into the hamburger panel" }, "hero": { "summary": "Carbon leadspace (expanded): left text column with a Light 300 gradient headline, a 20px lead and two side-by-side buttons; a 4:3 ambient video in the middle; a narrow Latest News list at the right", "desktop": "band y 113-721 (608px), padding 72px top, 32px bottom, 32px side margins. Three columns: text x 32-512 (480px, grid columns 1-5); video x 560-1232 (672x504, 4:3, columns 6-12); Latest News column box x 1248-1424 (176px) with 16px left padding, so its heading and links start at x 1264 and are 144px wide (heading y 185, 24px tall). Headline top y 185, same top as the video and the news heading. Lead paragraph at y 475 (text block bottom-anchored to the video: buttons end y 689, video ends y 689). Buttons at y 619, each 232x70 (two-line labels), 16px apart (x 32 and 280)", "phone": "order: headline, lead, primary button, secondary button, video. Headline y 183 at x 16, one line; lead y 288 (358px wide, 5 lines); buttons full width 358x48 at y 460 and 524 (16px gap); video 358x269 (4:3) at y 604; Latest News and its pager are not shown on phones. Band ends y 904", "at_rest": "the video is an ambient muted loop (Kaltura entry 1_e4ilojc3, 34s, \"Homepage - TechXchange 2026 - ambient leadspace - 4:3\"). The two screenshots catch different frames (glass doors on desktop, a lit stage on phone); for a static build use the poster frame (assets/hero-poster.jpg). Frames are animation only", "media": "4:3 video frame, 4px radius (measured border-radius 4px on the player), no border, no overlap with text. A 48x48 play/pause toggle sits in the bottom-right corner (x 1184, y 641): #161616 at 50% opacity holding a white 24px circle outline (1.5px stroke) with a small filled white play triangle centered inside it", "type": "headline \"IBM TechXchange 2026\" IBM Plex Sans 53.65px/62.77px weight 300 (Carbon expressive-heading-05), two lines at 480px, text filled with linear-gradient(90deg, #0F62FE, #EE5396) via background-clip:text; phone 32.8px/41px weight 400 one line, same gradient. Lead 20px/28px 400 #161616 (both widths)", "cta": "primary: #0F62FE fill, white 16px/22px 400 label, 20px arrow-right icon at the right, radius 4px, padding 12px 63px 12px 15px; secondary (tertiary in Carbon): transparent with 1px #0F62FE border and #0F62FE label, same size and arrow. Labels wrap to two lines at 1440 (152px text width, 232x70 boxes); one line, 48px tall, full width on phones", "proof": "Latest News column (x 1248, w 176): heading \"Latest News\" 16px/24px 600 #161616 at y 185; two items, each 193px tall with a 1px #E0E0E0 bottom rule: link text 16px/24px 400 #0F62FE clamped to 4 lines with an ellipsis, a 20px #0F62FE arrow 16px below. Under it four 32x32 pager buttons \"1 2 3 4\" (14px/18px, 0.16px tracking, #161616; the active one weight 600 with a 16x4px #0F62FE bar under it) at y 627", "headline_breaks": "measure 480px at 1440: \"IBM TechXchange / 2026\" (two lines, the year alone on line 2); one line at 390 (351px)" }, "sections": [ { "name": "Recommended for you", "summary": "A row of four bordered tiles, each a square artwork thumbnail plus a content-type label and one sentence", "ground": "#FFFFFF", "desktop": "heading y 785, x 16 (16px no-gutter column), 16px/24px 600 #161616. Tiles at y 841, 340x160, x 16 / 372 / 728 / 1084 (16px gaps), 64px below the hero", "phone": "heading at y 936; tiles stacked one per row, full width at x 16, thumbnail 97x97 at x 33, text from x 146 (211px wide); row pitch 158-176px", "anatomy": [ "Tile: 1px #C6C6C6 border, 4px radius (measured), white fill, 16px padding", "Thumbnail 92x92 (97 on phones), radius 2px, at the tile's top-left inside the padding", "Label 14px/18px 400 #525252, 0.16px tracking (\"Free trial\", \"Product\", \"Webinar | 3 Nov, 11 AM ET\"), 16px right of the thumbnail", "Sentence 14px/18px 400 #161616, 8px under the label, 3-4 lines at 198px", "20px #0F62FE arrow (or launch icon for an external link) in the bottom-right corner", "Hover: fill rgba(141,141,141,0.12) over 0.24s cubic-bezier(0.2,0,0.38,0.9) (animation only)" ], "components": "recommended_tile", "images": "four 1:1 TechXchange artworks: flat geometric blocks in blue, purple, magenta and black around a line pictogram (Bob, Integration, Webinar, IBM Z)" }, { "name": "Product announcements feature", "summary": "A large 16:9 TechXchange artwork with a grey caption card pinned to its lower right corner, and a six-link announcement list to its right", "ground": "#FFFFFF", "desktop": "band y 1065-1836. Image 1038x584 (16:9) at x 17, y 1114, square corners, inside a 1040x586 #F4F4F4 tile with a 1px #C6C6C6 border and 4px radius. Caption card 336x223 at x 719, y 1475, flush with the image's right and bottom edges. Link list x 1088-1408 (320px): heading y 1113, items from y 1153. Content ends near y 1717; the remaining ~119px to y 1836 is empty white space (section bottom padding)", "phone": "image switches to the 4:3 crop, 356x267 at x 17, y 1743; the caption card drops below it full width (356x223, y 2010); list heading y 2298, then six full-width 94px rows", "anatomy": [ "Caption card: #F4F4F4 fill, 1px #C6C6C6 top border, 4px top-left radius, 16px padding; eyebrow \"TechXchange 2026 News\" 14px/18px 400 #525252; heading 20px/28px 400 #161616, 3 lines at 273px; 20px #0F62FE arrow bottom-left", "List heading \"Explore the top product announcements\" 16px/24px 600 #161616", "Six link rows, each 93px plus a 1px #E0E0E0 bottom rule, white: link text 14px/18px 400, 0.16px tracking, #0F62FE, two to three lines; 20px #0F62FE icon right-aligned on the last line (launch icon for the first, external row; arrow for the rest)", "Link hover color #0043CE", "Caption card: eyebrow sits 8px above the heading (no paragraph margin between them)" ], "components": "feature_card, link_list_item", "images": "one composite: a keynote speaker photo set in a grid of flat blue, purple and black geometric blocks and line pictograms (16:9 desktop, 4:3 phone crop)" }, { "name": "The essentials to scale AI", "summary": "Split intro (Light 300 heading left, 22px paragraph and a text link right) over a 4x2 grid of pictogram cards", "ground": "#FFFFFF", "desktop": "band y 1900-2695. Heading x 32, w 672 (columns 1-8) 53.65px/62.77px 300, one line; intro x 736, w 672 (columns 9-16) 21.88px/30.64px 400, 5 lines; text CTA \"Explore all IBM products\" at y 2094 under the intro. Cards 332x208 at x 32 / 380 / 728 / 1076, rows y 2174 and 2398 (16px gaps both ways). Text CTA \"Save big on top products\" at x 48, y 2672. The whole card group measures 1376x434 (y 2173-2607): two 208px rows and a 16px gap, then 65px of white before the bottom text CTA", "phone": "heading 32.8px/41px 400, two lines at y 3029; intro 20px/28px at y 3143; CTA y 3408; cards stacked at x 16, 358 wide, 208-256px tall, 16px apart; the last CTA becomes a full-width 358x48 tertiary button (1px #0F62FE border, radius 4) at y 5577", "anatomy": [ "Card at rest: white, 1px #C6C6C6 border, 4px radius; title 16px/22.4px 400 #161616 at 16,16, 268px wide, two lines; 48px black line pictogram at 16px from the left and bottom (y +144); 20px #0F62FE arrow (or launch icon) bottom-right", "Card hover (animation only): fill #E8E8E8, border 1px #0F62FE, the title is replaced in place by the card's one-sentence description (16px, three lines); the pictogram and arrow stay", "Phone cards show both at once: pictogram 48px at x 32, title 16px/24px weight 600 at x 96 (162px wide), description 16px/24px 400 below it, arrow bottom-right", "Text CTA: 16px/16px 400 #0062FE plus a 20px arrow-right after the label; hover #0043CE", "Spacing inside the band: card group is exactly 434px tall; do not add padding inside the cards beyond 16px" ], "components": "pictogram_card, text_cta", "cards": [ "Create a streamhouse data architecture with IBM Confluent", "Build and modernize software faster with IBM Bob (external)", "Connect enterprise systems with IBM Integration", "Bring agents under control with IBM watsonx Orchestrate", "Maximize technology and AI value with IBM Apptio", "Secure machine and agent identities with IBM Vault (external)", "Secure your open source foundation with Lightwell", "Bring AI to your most important data with IBM Z" ], "images": "eight inline 48px line pictograms, #161616 strokes, no fill color (assets/essentials-pictogram-1..8.svg)" }, { "name": "Spotlight carousel", "summary": "A pale grey band holding a horizontally scrolling row of image-plus-text cards with colored type tags, and a 1/3 pager", "ground": "linear-gradient(0deg, rgba(244,244,244,0.4), #F4F4F4): #F4F4F4 at the top fading to 40% at the bottom", "desktop": "band x 16-1424, y 2759-3061 (302px), padding 24px 0. Heading \"Cybersecurity Month spotlight\" 20px/28px 600 #161616 at y 2783, x 32. Cards 496x162 at y 2827, x 32 / 544 / 1056 (+1568, 2080 off-screen), 16px gaps: two and three quarter cards visible, the third clipped at the band edge. Pager at y 3005: prev and next 32x32 icon buttons (x 1283, 1376) with \"1 / 3\" between them", "phone": "band y 5657, 326px; heading at x 16; cards 277x186 (about 1.3 visible); pager y 5927", "anatomy": [ "Card: white, 1px #C6C6C6 border, 4px radius; left a 160x160 square image, square corners; right panel 16px padding: heading 14px/20px 600 #161616 0.16px, description 14px/18px 400 #161616 clamped to 4 lines, 20px #0F62FE arrow in a 52x52 box at the bottom right", "Type tag over the image at 9,9: white pill 24px tall, 16px radius, 8px side padding, 1px border and 12px/16px 400 text (0.32px tracking) in one color per type: Report #8A3FFC, Webinar #0F62FE, News #198038", "Pager buttons: Carbon tertiary icon buttons, 32x32, radius 4, 1px border; disabled prev #C6C6C6, active next #0F62FE; \"1 / 3\" 14px #161616", "Card hover fill #E8E8E8 (animation only)", "The grey band starts at x 16, but the heading AND the first card both start at x 32 (16px inset inside the band)" ], "components": "spotlight_card, tag, carousel_button", "images": "five 1:1 flat illustrations (two reports, a webinar, two news): bright purple, blue or cyan grounds with simple isometric document, people or IBM-logo shapes" }, { "name": "Smarter impact powered by IBM", "summary": "Light 300 heading over four tall case-study cards: client logo, a 28px headline, and a grey statistic panel", "ground": "#FFFFFF", "desktop": "heading y 3125, x 32, 53.65px/62.77px 300, one line. Cards 332x402 at y 3283, x 32 / 380 / 728 / 1076, 16px gaps. The 95px between the heading's last line (ends y 3188) and the cards (y 3283) is empty white space", "phone": "heading 32.8px/41px 400, two lines at y 6015; cards stacked full width 358, 308-366px tall, at y 6161 / 6521 / 6903 / 7285", "anatomy": [ "Card: transparent fill, 1px #C6C6C6 border, 4px radius, whole card one link; hover animates the border (class animated-border) and fill over 0.24s (animation only)", "Top section padding 16px 16px 24px: client logo 96x48 (2:1, object-fit contain) at 16,16; headline 28px/36px 400 #161616 starting 72px from the card top, 4-5 lines at 298px", "Statistic panel pinned to the bottom: #F4F4F4, 330x108, 16px padding; figure 20px/28px 600 #525252 (\"↑2x\", \"100%\", \"~1 week\", \"86%\"); caption 16px/22px 400 #525252; 20px #0F62FE launch icon at the bottom right", "Statistic captions, verbatim: ↑2x \"increase in daily active users\"; 100% \"security compliance for high and critical vulnerabilities\"; ~1 week \"to deliver solution prototypes and demonstration environments\"; 86% \"of routine issues solved with AskIT\"" ], "components": "case_study_card", "images": "four client logos on white: Ferrari prancing horse shield, Skechers wordmark (SVG), CrushBank wordmark, IBM 8-bar logo in blue" }, { "name": "Training for what's next", "summary": "Heading in a narrow left column, three 4:3 photo items with a bold label, paragraph and text CTA to its right", "ground": "#FFFFFF", "desktop": "band y 3773-4237. Heading x 32, w 344 (columns 1-4, 32px right padding) 53.65px/62.77px 300, two lines, top-aligned with the photos. Items x 384 / 736 / 1088, 320 wide (32px gaps): photo 320x240, radius 4, at y 3773; label y 4045 (32px below the photo); paragraph y 4069; CTA y 4165", "phone": "heading 32.8px/41px 400 at y 7649, two lines; the three items sit in one row 254px wide at x 16 / 286 / 555 with 254x190 photos, overflowing to the right (scrolls sideways)", "anatomy": [ "Item label 16px/24px 600 #161616", "Paragraph 16px/24px 400 #161616, 288px measure, 3 lines", "Text CTA 16px #0062FE with a 20px arrow (internal) or launch icon (external) after the label; the third item stacks two CTAs 24px apart" ], "components": "content_item, text_cta", "images": "three candid 4:3 photos of people learning: a team at a sticky-note whiteboard, a student working on hardware at a lab bench, three students talking on a campus bench" }, { "name": "Stay connected", "summary": "Two halves: heading and 16:9 event photo left, the newsletter sign-up heading right", "ground": "#FFFFFF", "desktop": "band y 4301-4774. Left x 32, w 656: \"Stay connected\" 32px/40px 400 #161616, 32px below it the photo 656x369 (16:9), radius 4. Right x 752, w 656: \"What's New at IBM newsletter subscription\" 32px/40px 400 at x 768 with a 1px #E0E0E0 rule under it (624px). The Marketo form body rendered empty (0px tall) in our sessions, so its fields are not recorded", "phone": "stacked: heading y 8253, photo 358x201 (16:9) at y 8325, newsletter heading y 8558 (3 lines at 326px)", "anatomy": [ "Two 32px regular headings, not Light display", "Photo square-cropped to 16:9 with 4px radius, no caption" ], "components": "media_frame", "images": "one 16:9 event photo: an IBMer in a blazer talking with attendees in front of a blue light-dot wall" } ], "footer": { "summary": "Gray 100 (#161616) footer: white 8-bar logo left, four link groups in two columns of two, outlined locale button right, legal row under a hairline", "ground": "#161616", "anatomy": [ "Band y 4838-5471 (633px), padding 48px 0", "Logo: white 8-bar IBM logo 128x53 at x 32, y 4886 (the 157x65 SVG scaled to 128px wide)", "Link groups 320px wide at x 384 and x 736. Row 1 at y 4886: Discover (x 384), Connect (x 736). Row 2 at y 5122: Follow (x 384), About (x 736). DOM order: Discover, Follow, Connect, About", "Group heading 14px/20px 600 #F4F4F4, 0.16px tracking; links 14px/20px 400 #C6C6C6, first link 28px below the heading, 28px pitch, no underline", "Discover: Products, Consulting services, Industries, Case studies, Financing, Research", "Follow: LinkedIn, X, Instagram, YouTube, Podcasts", "Connect: Business partners, Documentation, Events, Newsletters, Support, IBM Community", "About: Overview, Careers, Investor relations, Leadership, Newsroom, Security, privacy and trust", "Locale selector at x 1088, y 4886: 320x48 button, transparent, 1px #FFFFFF border, 4px radius, padding 14px 12px 14px 15px, label \"United States — English\" 14px/18px white, 16px white globe icon at the right", "Legal row: 1px #393939 rule at y 5358 from x 368 (1056px wide); links 14px/20px 400 #C6C6C6 in three columns: x 384 \"Contact IBM\" (y 5375) over \"Privacy\" (y 5403); x 741 \"Terms of use\" over \"Accessibility\"; third column \"Cookie Preferences\" (TrustArc link, opens a modal)", "No copyright line, postal address or phone number on the homepage footer" ], "wayfinding": { "columns": "Discover: Products, Consulting services, Industries, Case studies, Financing, Research; Follow: LinkedIn, X, Instagram, YouTube, Podcasts; Connect: Business partners, Documentation, Events, Newsletters, Support, IBM Community; About: Overview, Careers, Investor relations, Leadership, Newsroom, Security, privacy and trust", "legal": "Contact IBM, Privacy, Terms of use, Accessibility, Cookie Preferences", "locale": "United States — English", "copyright": "none shown", "address": "none shown", "phone": "none shown" }, "phone": "logo 128x53 at x 16, y 8783 (157x65 SVG scaled to 128px wide); the four groups collapse to full-width 48px accordion rows in DOM order Discover, Follow, Connect, About (16px #F4F4F4 label, 16px chevron at x 358, 1px #525252 top rule each) from y 8898; locale button 358x48 at y 9139; legal links stacked at x 16 on a 28px pitch from y 9243: Contact IBM, Privacy, Terms of use, Accessibility, Cookie Preferences. Page ends y 9423" }, "dark_ground": { "secondary_button": "the locale button: transparent, 1px #FFFFFF border, 4px radius, white 14px label and icon", "link": "#C6C6C6, no underline, 14px/20px", "muted_text": "#C6C6C6 for links; headings #F4F4F4", "hairline": "#393939 (legal rule, desktop); #525252 (accordion rules, phone)", "logo_variant": "white 8-bar logo" } }, "bands": [ { "label": "Masthead: white 48px bar, 8-bar logo, six menu items, four icon buttons", "ground": "#FFFFFF", "content": "nav", "desktop": "49px incl. 1px #E0E0E0 rule; logo 58x23 at x 34; 1px #E0E0E0 divider at x 126; items from x 142 in 16px/22px 400 #525252; icons 48px boxes from x 1244", "phone": "hamburger, logo at x 66, search, globe, profile", "anatomy": [ "Menu labels in order: Software, Infrastructure, Consulting, Support, Think, Developer Tools (chevrons on Software, Infrastructure, Support)", "Utility icons in order: search, contact, locale globe, user profile (contact hidden on phones)", "Fixed to the top" ] }, { "label": "Announcement strip: #F4F4F4, one centered linked line with gradient lead-in", "ground": "#F4F4F4", "content": "announcement", "desktop": "64px; 20px/28px; lead-in 600 gradient #0F62FE to #8A3FFC, copy 400 #161616, launch icon #0F62FE", "phone": "102px, left aligned, 16px/22px, three lines, icon top-right", "anatomy": [ "Whole strip is the link; opens in a new tab", "No close button" ] }, { "label": "Leadspace: gradient Light headline + lead + two buttons, 4:3 ambient video, Latest News column", "ground": "#FFFFFF", "content": "hero", "desktop": "608px; text 480px at x 32, video 672x504 at x 560, news 176px at x 1248; tops aligned at y 185; buttons 232x70 at y 619", "phone": "headline, lead, two full-width 48px buttons, then the 358x269 video; no news column", "anatomy": [ "Headline 53.65px/62.77px Light 300 (32.8px/41px 400 on phones) with a #0F62FE to #EE5396 text gradient", "Lead 20px/28px 400 #161616", "Primary #0F62FE button and outlined tertiary button side by side, 16px apart, each with a 20px arrow", "Video toggle 48x48, #161616 at 50%, bottom right of the video", "Latest News: 2 links in #0F62FE with 1px #E0E0E0 rules, pager 1-4 with a 4px #0F62FE active bar" ] }, { "label": "Recommended for you: four bordered thumbnail tiles", "ground": "#FFFFFF", "content": "cards", "desktop": "heading 16px 600 at x 16; tiles 340x160 at y 841, 16px gaps", "phone": "tiles stacked full width", "anatomy": [ "1px #C6C6C6 border, 4px radius (measured), 16px padding", "92px square thumbnail, 2px radius", "Label 14px #525252, sentence 14px #161616, arrow bottom right" ] }, { "label": "Announcements feature: 16:9 artwork with a grey caption card, six-link list at right", "ground": "#FFFFFF", "content": "feature", "desktop": "image 1038x584 at x 17; caption card 336x223 flush bottom-right; list 320px at x 1088", "phone": "4:3 image, card below, list below", "anatomy": [ "Caption card #F4F4F4, 1px #C6C6C6 top border, eyebrow 14px #525252, heading 20px/28px", "List rows 94px with 1px #E0E0E0 rules, links 14px #0F62FE, arrow or launch icon at right" ] }, { "label": "Essentials: split intro over a 4x2 grid of pictogram cards", "ground": "#FFFFFF", "content": "cards", "desktop": "heading cols 1-8, intro cols 9-16; cards 332x208, 16px gaps", "phone": "stacked cards with pictogram left, bold title and description", "anatomy": [ "Card: white, 1px #C6C6C6, 4px radius, 16px title, 48px pictogram bottom-left, blue arrow bottom-right", "Hover swaps title for description on #E8E8E8 with a 1px #0F62FE border (animation only)", "Text CTAs 16px #0062FE with arrow" ] }, { "label": "Spotlight carousel: grey gradient band, image+text cards with colored tags", "ground": "#F4F4F4 fading to 40% at the bottom", "content": "carousel", "desktop": "302px band inset 16px; cards 496x162; 2.75 visible; pager 1 / 3 bottom right", "phone": "cards 277x186", "anatomy": [ "160px square image left, 16px-padded text right, 4px radius, 1px #C6C6C6", "Pill tags 24px, radius 16: Report #8A3FFC, Webinar #0F62FE, News #198038" ] }, { "label": "Case studies: four tall cards with logo, 28px headline, grey stat panel", "ground": "#FFFFFF", "content": "proof", "desktop": "332x402 cards, 16px gaps", "phone": "stacked full width", "anatomy": [ "Logo 96x48", "Headline 28px/36px 400", "Stat panel #F4F4F4: figure 20px 600 #525252, caption 16px #525252, launch icon" ] }, { "label": "Training: narrow heading column, three 4:3 photo items", "ground": "#FFFFFF", "content": "three-up", "desktop": "heading 344px at x 32; items 320 wide at x 384 / 736 / 1088", "phone": "items 254 wide in a sideways-scrolling row", "anatomy": [ "Photo 320x240, 4px radius", "Label 16px 600, paragraph 16px/24px, text CTA 16px #0062FE" ] }, { "label": "Stay connected: heading + 16:9 photo left, newsletter heading right", "ground": "#FFFFFF", "content": "form", "desktop": "two 656px halves, 32px/40px headings, photo 656x369 radius 4", "phone": "stacked", "anatomy": [ "Newsletter heading has a 1px #E0E0E0 rule under it", "Form fields did not render in our sessions" ] }, { "label": "Footer: #161616, white logo, four link groups, locale button, legal row", "ground": "#161616", "content": "footer", "desktop": "633px; groups at x 384 and 736 in two rows; locale 320x48 at x 1088; legal under a 1px #393939 rule", "phone": "accordions, stacked locale and legal", "anatomy": [ "Headings 14px 600 #F4F4F4; links 14px #C6C6C6 on a 28px pitch", "Legal: Contact IBM, Privacy, Terms of use, Accessibility, Cookie Preferences", "No copyright line" ] } ], "layout": { "container_max": 1440, "page_margin": { "desktop": 32, "phone": 16, "note": "most bands sit in a 1376px box (x 32-1408). Recommended, the announcements feature, the spotlight band and the Recommended heading use the no-gutter column at x 16 (1408px)" }, "nav_height": 49, "announcement_height": { "desktop": 64, "phone": 102 }, "section_gap": { "desktop": 64, "phone": 64, "note": "64px from the bottom of one band to the top of the next band's heading throughout (721 to 785, 1001 to 1065, 1836 to 1900, 2695 to 2759, 3061 to 3125, 3709 to 3773, 4237 to 4301, 4774 to 4838)" }, "hero_padding": { "top": 72, "bottom": 32 }, "columns": 16, "columns_phone": 4, "gutter": 32, "gutter_phone": 32, "card_gap": 16, "four_up": { "width": 332, "gap": 16, "xs": [ 32, 380, 728, 1076 ] }, "recommended_tiles": { "width": 340, "height": 160, "gap": 16, "xs": [ 16, 372, 728, 1084 ] }, "three_up_offset": { "heading_width": 344, "item_width": 320, "xs": [ 384, 736, 1088 ] }, "split_halves": { "width": 672, "xs": [ 32, 736 ] }, "hero_columns": { "text": [ 32, 480 ], "video": [ 560, 672 ], "news": [ 1248, 176 ] }, "prov": "observed", "source": "https://www.ibm.com/", "date": "2026-10-29" }, "type": [ { "role": "Leadspace headline (h1)", "face": "display", "size": { "desktop": 53.65, "phone": 32.8 }, "line_height": 1.17, "tracking_px": 0, "weight": 300, "prov": "observed", "source": "https://www.ibm.com/", "note": "53.65/62.77 at 1440 (Carbon expressive-heading-05, fluid); phone 32.8/41 weight 400. Filled with linear-gradient(90deg, #0F62FE, #EE5396)", "weight_phone": 400 }, { "role": "Section headline (h2)", "face": "display", "size": { "desktop": 53.65, "phone": 32.8 }, "line_height": 1.17, "tracking_px": 0, "weight": 300, "prov": "observed", "source": "https://www.ibm.com/", "note": "Same role as the h1 without the gradient: Essentials, Smarter impact, Training. #161616. Phone weight 400", "weight_phone": 400 }, { "role": "Section intro", "face": "body", "size": { "desktop": 21.88, "phone": 20 }, "line_height": 1.4, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.ibm.com/", "note": "21.88/30.64 at 1440, 20/28 on phones; #161616" }, { "role": "Hero lead", "face": "body", "size": { "desktop": 20, "phone": 20 }, "line_height": 1.4, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.ibm.com/", "note": "20/28 #161616" }, { "role": "Announcement line", "face": "body", "size": { "desktop": 20, "phone": 16 }, "line_height": 1.4, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.ibm.com/", "note": "20/28 (16/22 phone); lead-in is weight 600 with the #0F62FE to #8A3FFC gradient" }, { "role": "Case-study headline", "face": "body", "size": { "desktop": 28, "phone": 28 }, "line_height": 1.29, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.ibm.com/", "note": "28/36 #161616" }, { "role": "Form section heading", "face": "body", "size": { "desktop": 32, "phone": 32 }, "line_height": 1.25, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.ibm.com/", "note": "32/40 #161616: Stay connected, newsletter heading" }, { "role": "Band label heading", "face": "body", "size": { "desktop": 20, "phone": 20 }, "line_height": 1.4, "tracking_px": 0, "weight": 600, "prov": "observed", "source": "https://www.ibm.com/", "note": "20/28 600: spotlight heading; also the caption-card heading at weight 400" }, { "role": "Small heading", "face": "body", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.5, "tracking_px": 0, "weight": 600, "prov": "observed", "source": "https://www.ibm.com/", "note": "16/24 600 #161616: Recommended for you, Latest News, link-list heading, training item labels" }, { "role": "Card title", "face": "body", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.4, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.ibm.com/", "note": "16/22.4 400 on the essentials cards at rest; phones 16/24 weight 600 with the description 16/24 400 below", "weight_phone": 600 }, { "role": "Body", "face": "body", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.5, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.ibm.com/", "note": "16/24 #161616" }, { "role": "Nav link", "face": "body", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.375, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.ibm.com/", "note": "16/22 #525252" }, { "role": "Button label", "face": "body", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.375, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.ibm.com/", "note": "16/22, no tracking" }, { "role": "Text CTA", "face": "body", "size": { "desktop": 16, "phone": 16 }, "line_height": 1, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.ibm.com/", "note": "16/16 #0062FE plus a 20px icon; hover #0043CE" }, { "role": "Stat figure", "face": "body", "size": { "desktop": 20, "phone": 20 }, "line_height": 1.4, "tracking_px": 0, "weight": 600, "prov": "observed", "source": "https://www.ibm.com/", "note": "20/28 600 #525252; caption 16/22 400 #525252" }, { "role": "Card body small", "face": "body", "size": { "desktop": 14, "phone": 14 }, "line_height": 1.29, "tracking_px": 0.16, "weight": 400, "prov": "observed", "source": "https://www.ibm.com/", "note": "14/18 0.16px: tile sentences, labels (#525252), link-list items, spotlight descriptions" }, { "role": "Card heading small", "face": "body", "size": { "desktop": 14, "phone": 14 }, "line_height": 1.43, "tracking_px": 0.16, "weight": 600, "prov": "observed", "source": "https://www.ibm.com/", "note": "14/20 600: spotlight card headings, footer group headings (#F4F4F4)" }, { "role": "Footer link", "face": "body", "size": { "desktop": 14, "phone": 14 }, "line_height": 1.43, "tracking_px": 0.16, "weight": 400, "prov": "observed", "source": "https://www.ibm.com/", "note": "14/20 #C6C6C6" }, { "role": "Tag", "face": "body", "size": { "desktop": 12, "phone": 12 }, "line_height": 1.33, "tracking_px": 0.32, "weight": 400, "prov": "observed", "source": "https://www.ibm.com/", "note": "12/16, color matches the tag border" } ], "components": { "button_primary": { "fill": "#0F62FE", "text": "#FFFFFF", "radius": 4, "height": 48, "padding": "12px 63px 12px 15px (label left, 20px arrow absolutely placed 16px from the right)", "font_size": 16, "line_height": 22, "weight": 400, "icon": "20px arrow-right, 16px from the right edge", "states": { "hover": { "css": { "background-color": "#0050E6" }, "measured": { "fill": "#0050E6", "transition": "0.07s cubic-bezier(0, 0, 0.38, 0.9)" }, "prov": "observed", "source": "https://www.ibm.com/" } }, "anatomy": "Carbon primary button: flat #0F62FE rectangle, 4px corners, label left, arrow right, 1px transparent border; no shadow", "prov": "observed", "source": "https://www.ibm.com/", "padding_x": 16, "wrapped": "70px tall when the label wraps to two lines at 1440 (the hero buttons are a fixed 232px wide)" }, "button_tertiary": { "fill": "transparent", "text": "#0F62FE", "ring_px": 1, "ring": "#0F62FE", "radius": 4, "height": 48, "padding": "12px 63px 12px 15px", "font_size": 16, "weight": 400, "states": { "hover": { "css": { "background-color": "#0050E6", "color": "#FFFFFF" }, "measured": { "fill": "#0050E6", "text": "#FFFFFF", "border": "1px #0F62FE", "transition": "0.07s cubic-bezier(0, 0, 0.38, 0.9)" }, "prov": "observed", "source": "https://www.ibm.com/" } }, "anatomy": "The hero's second button and the phone \"Save big on top products\": outline only, fills blue with white text on hover", "prov": "observed", "source": "https://www.ibm.com/", "wrapped": "70px when the label wraps to two lines", "padding_x": 16 }, "text_cta": { "text": "#0062FE", "font_size": 16, "line_height": 16, "weight": 400, "icon": "20px arrow-right (internal) or launch (external), after the label", "underline": "none at rest", "states": { "hover": { "css": { "color": "#0043CE" }, "measured": { "text": "#0043CE" }, "prov": "observed", "source": "https://www.ibm.com/" } }, "prov": "observed", "source": "https://www.ibm.com/" }, "recommended_tile": { "fill": "#FFFFFF", "border": "1px #C6C6C6", "radius": 0, "padding": 16, "size": "340x160", "thumb": "92x92, radius 2", "states": { "hover": { "css": { "background-color": "rgba(141, 141, 141, 0.12)" }, "measured": { "transition": "background 0.24s cubic-bezier(0.2, 0, 0.38, 0.9)" }, "prov": "observed", "source": "https://www.ibm.com/" } }, "prov": "observed", "source": "https://www.ibm.com/" }, "pictogram_card": { "fill": "#FFFFFF", "border": "1px #C6C6C6", "radius": 4, "size": "332x208", "padding": 16, "pictogram": "48px, bottom-left", "icon": "20px #0F62FE arrow or launch, bottom-right", "states": { "hover": { "measured": { "fill": "#E8E8E8", "border": "1px #0F62FE", "content": "title swaps to the description (animation only)" }, "prov": "observed", "source": "https://www.ibm.com/" } }, "prov": "observed", "source": "https://www.ibm.com/" }, "feature_card": { "fill": "#F4F4F4", "border_top": "1px #C6C6C6", "radius": 4, "size": "336x223", "padding": 16, "anatomy": "eyebrow 14px #525252, heading 20px/28px 400, arrow bottom-left; overlaps the lower right of a 16:9 image", "prov": "observed", "source": "https://www.ibm.com/", "radius_note": "4px top-left only; the other three corners are square" }, "link_list_item": { "fill": "#FFFFFF", "rule": "1px #E0E0E0 bottom", "height": 94, "text": "14px/18px #0F62FE", "icon": "20px arrow or launch, right", "states": { "hover": { "measured": { "text": "#0043CE" }, "prov": "observed", "source": "https://www.ibm.com/" } }, "prov": "observed", "source": "https://www.ibm.com/" }, "spotlight_card": { "fill": "#FFFFFF", "border": "1px #C6C6C6", "radius": 4, "size": "496x162 (277x186 phone)", "image": "160x160 left, square corners", "states": { "hover": { "measured": { "fill": "#E8E8E8" }, "prov": "observed", "source": "https://www.ibm.com/" } }, "prov": "observed", "source": "https://www.ibm.com/" }, "tag": { "fill": "#FFFFFF", "ring_px": 1, "radius": 16, "height": 24, "padding_x": 8, "font_size": 12, "tracking_px": 0.32, "colors": "Report #8A3FFC, Webinar #0F62FE, News #198038", "anatomy": "Live HTML over the top-left of the spotlight image at 9,9; border and text share the type color", "prov": "observed", "source": "https://www.ibm.com/" }, "case_study_card": { "fill": "transparent", "border": "1px #C6C6C6", "radius": 4, "size": "332x402", "stat_panel": "#F4F4F4, 16px padding, figure 20px 600 #525252", "transition": "background 0.24s cubic-bezier(0.2, 0, 0.38, 0.9); animated border on hover (animation only)", "prov": "observed", "source": "https://www.ibm.com/" }, "carousel_button": { "size": 32, "radius": 4, "ring_px": 1, "ring": "#0F62FE (enabled) / #C6C6C6 (disabled)", "fill": "transparent", "icon": "chevron", "prov": "observed", "source": "https://www.ibm.com/" }, "news_pager": { "size": 32, "font_size": 14, "weight": "400; active 600", "active_bar": "16x4px #0F62FE under the active number", "prov": "observed", "source": "https://www.ibm.com/" }, "video_toggle": { "size": 48, "fill": "#161616 at 50% opacity", "icon": "white 20px play outline", "position": "bottom-right corner of the video, flush", "prov": "observed", "source": "https://www.ibm.com/" }, "locale_button": { "fill": "transparent", "ring_px": 1, "ring": "#FFFFFF", "radius": 4, "size": "320x48 (358x48 phone)", "padding": "14px 12px 14px 15px", "font_size": 14, "text": "#FFFFFF", "icon": "16px globe, right", "prov": "observed", "source": "https://www.ibm.com/" }, "media_frame": { "anatomy": "Photos and artwork: radius 4px for training (4:3) and stay-connected (16:9) photos; 0 for the hero video and spotlight images; 2px for recommended thumbnails. No borders on images, no shadows anywhere on the page", "prov": "observed", "source": "https://www.ibm.com/" } }, "responsive": { "measured_at": [ 390, 1440 ], "source": "https://www.ibm.com/", "date": "2026-10-29", "prov": "observed", "rows": [ { "what": "display headline (h1, h2)", "values": { "390": "32.8px / 41px / 400", "1440": "53.65px / 62.77px / 300" } }, { "what": "section intro", "values": { "390": "20px / 28px", "1440": "21.88px / 30.64px" } }, { "what": "announcement strip", "values": { "390": "102px, 16px/22px, left aligned, 3 lines", "1440": "64px, 20px/28px, centered, 1 line" } }, { "what": "side margin", "values": { "390": "16px", "1440": "32px (16px for no-gutter bands)" } }, { "what": "band gap", "values": { "390": "64px", "1440": "64px" } }, { "what": "hero", "values": { "390": "stacked: headline, lead, two full-width 48px buttons, video 358x269; no Latest News", "1440": "three columns: text 480, video 672x504, news 176" } }, { "what": "nav", "values": { "390": "hamburger + logo + search, globe, profile", "1440": "logo, 6 menu items, 4 icons" } }, { "what": "essentials cards", "values": { "390": "stacked, pictogram left, bold title + description always visible", "1440": "4x2 grid 332x208, title only at rest" } }, { "what": "case studies", "values": { "390": "stacked 358 wide", "1440": "four 332x402" } }, { "what": "training items", "values": { "390": "sideways-scrolling row of 254px items", "1440": "three 320px items beside a 344px heading" } }, { "what": "footer groups", "values": { "390": "48px accordions", "1440": "two columns of two open lists" } } ] }, "breakpoints": { "all": [ 672, 1056, 1312, 1584 ], "phone_max": 671, "prov": "observed", "note": "Carbon grid breakpoints read from the page's stylesheets (42rem, 66rem, 82rem, 99rem media queries). The masthead swaps to the hamburger below 1056px (min-width: 1056px queries on the top nav). Only 390 and 1440 were rendered and measured; the tablet steps were not resize-stepped" } }, "system": { "fixed": [ "The 8-bar logo, in core blue or gray colors only", "IBM Plex (Sans, Serif, Mono)", "Blue at the core, grays dominant", "The 2x Grid and the 8px mini unit", "Flush-left, sentence-case typography" ], "flex": "Productive to expressive: the same parts run from quiet task UI (14px type, productive curves, grays and one blue) to expressive brand moments (light display type, expressive curves, gradient and vibrant families, flat or isometric illustration, the rebus).", "traits": [ { "is": "Essential", "not": "decorative", "text": "Form follows function; nothing gratuitous (paraphrase).", "source": "https://www.ibm.com/design/language/layout/overview", "prov": "published" }, { "is": "Engineered", "not": "arbitrary", "text": "Nothing placed, sized or styled without reason (paraphrase).", "source": "https://www.ibm.com/design/language/layout/overview", "prov": "published" }, { "is": "Dynamic", "not": "static", "text": "Asymmetry, contrast and the suggestion of movement (paraphrase).", "source": "https://www.ibm.com/design/language/layout/overview", "prov": "published" }, { "is": "Positively progressive", "not": "hyped", "text": "Confidence and positivity, removing friction (paraphrase).", "source": "https://www.ibm.com/design/language/philosophy/principles", "prov": "published" }, { "is": "Fact-based", "not": "spin", "text": "Clarity over hyperbole, jargon and overstyling (paraphrase).", "source": "https://www.ibm.com/design/language/photography/tips-and-techniques", "prov": "published" }, { "is": "Nimble", "not": "overworked", "text": "Ease and lightness in icons and illustration (paraphrase).", "source": "https://www.ibm.com/design/language/iconography/overview", "prov": "published" } ] }, "proportion": { "note": "IBM publishes no percentages. The guide says grays and the core black, white and blue should dominate every experience, with other families used sparingly; the split below is our reading of ibm.com on 2026-10-29 (white ground, Gray 100 type, blue actions, a Gray 100 footer), not an IBM figure.", "source": "https://www.ibm.com/design/language/color", "prov": "inferred", "parts": [ { "name": "White", "hex": "#FFFFFF", "n": 70 }, { "name": "Gray 10", "hex": "#F4F4F4", "n": 8 }, { "name": "Gray 100", "hex": "#161616", "n": 15 }, { "name": "Blue 60", "hex": "#0F62FE", "n": 5 }, { "name": "Other families", "hex": "#8A3FFC", "n": 2 } ] }, "tone_by_state": { "note": "Two scoped voices. The levels are our reading of IBM's pages, not a published scale.", "source": "https://www.ibm.com/us-en", "prov": "inferred", "states": [ { "state": "Product UI and documentation (Carbon productive)", "level": 0 }, { "state": "ibm.com homepage and landing pages (institutional)", "level": 1 }, { "state": "Brand campaigns (Let's create)", "level": 3 }, { "state": "Design language and event moments (manifesto, rebus)", "level": 4 } ] }, "formats": [ { "format": "Landing page", "level": 1, "must": "White ground, Plex Sans Light flush-left headline in the homepage voice, square Blue 60 primary button with the arrow right, 16-column 2x Grid with 8px spacing, Gray 10 tiles, Gray 100 footer, 8-bar logo top left", "flex": "one expressive moment (gradient headline text or one illustration) and which product and proof bands follow" }, { "format": "Deck", "level": 2, "must": "White or Gray 100 slides, Plex Sans Light titles flush left on the 2x Grid, one blue accent, 8-bar sign-off on the last slide", "flex": "one illustration style or reportage photo per slide" }, { "format": "Proposal page", "level": 1, "must": "Homepage voice, numbers only with sources, one Blue 60 next-step button", "flex": "a pictogram per section" }, { "format": "Ad", "level": 3, "must": "Short sentence-case line, reportage photo or flat illustration, 8-bar sign-off with clear space", "flex": "a 2-color gradient from an approved family" }, { "format": "Social post", "level": 3, "must": "Plex, grid-aligned type, a core-color logo", "flex": "expressive pictograms or isometric illustration" }, { "format": "Email", "level": 1, "must": "White ground, Gray 100 text, one Blue 60 button, 8-bar in the header", "flex": "one hero image" }, { "format": "Product UI", "level": 0, "must": "Carbon components, productive type set and motion, grays plus Blue 60", "flex": "theme (White, Gray 10, Gray 90, Gray 100)" } ], "checks": [ { "name": "Logo hidden", "text": "Cover the 8-bar. IBM's own test: it should still read as IBM through Plex, the grid, grays and one blue." }, { "name": "Grid check", "text": "Every edge, gap and image size should land on the 8px mini unit and the column grid; anything off-grid goes back." }, { "name": "Fact check", "text": "Every number has a named source beside it, and no line could pass for hype." } ], "examples": [ { "chapter": "color", "do": { "ground": "paper", "text": "Explore the event", "button": true }, "do_caption": "Blue 60 is the one action color, on a white or Gray 10 ground.", "dont": { "ground": "surface", "text": "Explore the event", "ink": "ink_muted" }, "dont_caption": "A gray, low-emphasis label as the primary action: IBM's primary action is always the Blue 60 button." }, { "chapter": "color", "do": { "ground": "night", "text": "Mostly grays, one blue", "ink": "on_night" }, "do_caption": "Grays and black, white and blue dominate.", "dont": { "ground": "accent", "text": "A page flooded in blue", "ink": "on_accent" }, "dont_caption": "Blue is the action color, not the ground: grays dominate and other colors are purposeful hits." }, { "chapter": "type", "do": { "ground": "paper", "text": "The essentials to scale AI", "font": "display", "weight": 300 }, "do_caption": "Plex Sans Light, flush left, sentence case.", "dont": { "ground": "paper", "text": "THE ESSENTIALS TO SCALE AI", "font": "display", "weight": 700 }, "dont_caption": "All caps and heavy: harder to read and not IBM's display weight." }, { "chapter": "voice", "do": { "ground": "paper", "text": "Connect enterprise systems with IBM Integration" }, "do_caption": "Verb first, the benefit, then the product (homepage pattern).", "dont": { "ground": "paper", "text": "Unleash revolutionary AI-powered synergy!" }, "dont_caption": "Hyperbole and jargon: IBM calls itself fact-based." }, { "chapter": "logo", "do": { "ground": "paper", "text": "8-bar in black on white", "ink": "ink" }, "do_caption": "Core gray or blue, five steps from the ground, clear space equal to its height.", "dont": { "ground": "accent", "text": "8-bar in Blue 70 on Blue 60", "ink": "accent_secondary" }, "dont_caption": "One step apart breaks the five-step rule; and never green, a gradient or multicolor stripes." } ], "make_it_yours": { "note": "Everything above transfers. These are IBM's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.", "replace": [ "identity", "purpose", "positioning", "messaging.pillars", "messaging.proof_points", "messaging.taglines", "messaging.boilerplate" ], "reference": { "purpose": { "mission": { "label": "Belief", "text": "IBMers believe in progress: that intelligence, reason and science can improve business, society and the human condition (paraphrase of the guide's point of view).", "prov": "published", "source": "https://www.ibm.com/design/language/philosophy/pov" }, "story": { "text": "IBM took its name in 1924. Its design heritage is modernist: Eliot Noyes taught that brand is character built through curation, Paul Rand drew the 8-bar logo (unchanged since 1972) and the 1981 Eye-Bee-M rebus, and Charles and Ray Eames brought out IBM's playful side. The IBM Design Language carries their attitude, not their mid-century style, into Plex, the 2x Grid and Carbon.", "prov": "published", "source": "https://www.ibm.com/design/language/philosophy/pov", "also": [ "https://www.ibm.com/design/language/ibm-logos/8-bar", "https://www.ibm.com/design/language/ibm-logos/rebus" ], "paraphrase": true }, "values": [ { "name": "Carefully considered", "means": "Decide whether a thing is essential before doing it; remove everything gratuitous; respect the time asked of people (paraphrase).", "prov": "published", "source": "https://www.ibm.com/design/language/philosophy/principles" }, { "name": "Uniquely unified", "means": "Fixed and fluid elements together: recognizable, repeatable, reusable, identifiable as IBM with the logo covered (paraphrase).", "prov": "published", "source": "https://www.ibm.com/design/language/philosophy/principles" }, { "name": "Expertly executed", "means": "Everything communicates; every execution should show care, craft and expertise, down to the last detail (paraphrase).", "prov": "published", "source": "https://www.ibm.com/design/language/philosophy/principles" }, { "name": "Positively progressive", "means": "Lead, think ahead, communicate confidence and remove friction; give more than it takes (paraphrase).", "prov": "published", "source": "https://www.ibm.com/design/language/philosophy/principles" } ] }, "positioning": { "statement": { "text": "IBM has always been a medium between people and machines, science, service and society, working in partnership toward progress (paraphrase of the guide's point of view).", "prov": "published", "source": "https://www.ibm.com/design/language/philosophy/pov" }, "category": { "text": "Global provider of hybrid cloud, AI and consulting services, working with clients in more than 175 countries (paraphrase of the About IBM boilerplate).", "prov": "published", "source": "https://newsroom.ibm.com/2025-09-03-IBM-Addresses-the-AI-Adoption-Gap-with-Lets-create-smarter-business" }, "audience": { "text": "Enterprise and government technology leaders and practitioners: the homepage speaks to teams running existing systems, IT operations, developers, and people building skills (observed).", "prov": "observed", "source": "https://www.ibm.com/us-en", "source_note": "2026-10-29" }, "problem": { "text": "AI stuck in experimentation: leaders struggle to move from pilots to value across the organization (paraphrase of the homepage band and the 2025 campaign release).", "prov": "observed", "source": "https://www.ibm.com/us-en", "source_note": "2026-10-29", "also": [ "https://newsroom.ibm.com/2025-09-03-IBM-Addresses-the-AI-Adoption-Gap-with-Lets-create-smarter-business" ] }, "promise": { "text": "Put technology to work where it makes the biggest impact by connecting intelligent data, workload action, automated operations and hybrid control across the systems a client already relies on (paraphrase).", "prov": "observed", "source": "https://www.ibm.com/us-en", "source_note": "2026-10-29" }, "differentiators": [ { "text": "Works across the systems clients already run (hybrid cloud, IBM Z mainframes, Red Hat OpenShift) rather than replacing them.", "prov": "observed", "source": "https://www.ibm.com/us-en", "also": [ "https://newsroom.ibm.com/2025-09-03-IBM-Addresses-the-AI-Adoption-Gap-with-Lets-create-smarter-business" ] }, { "text": "Governance and security for AI agents: watsonx Orchestrate, Vault, identity and control for AI agents.", "prov": "observed", "source": "https://www.ibm.com/us-en" }, { "text": "Consulting plus software plus infrastructure under one name.", "prov": "published", "source": "https://newsroom.ibm.com/2025-09-03-IBM-Addresses-the-AI-Adoption-Gap-with-Lets-create-smarter-business" }, { "text": "Open source: IBM Plex itself is open-licensed; the homepage features IBM and Red Hat fixing open source vulnerabilities and the llm-d open inference project.", "prov": "observed", "source": "https://www.ibm.com/us-en", "also": [ "https://www.ibm.com/design/language/typography/typeface" ] } ], "alternatives": [ { "text": "Unnamed: ibm.com names no competitors. The implied alternative is AI that stays in pilots, and point tools that don't connect to existing systems.", "prov": "inferred", "source": "https://www.ibm.com/us-en", "why": "The homepage frames IBM against 'experimentation' and disconnected systems, never against a named company." } ] }, "messaging": { "taglines": [ { "text": "Let's create", "prov": "published", "source": "https://newsroom.ibm.com/2025-09-03-IBM-Addresses-the-AI-Adoption-Gap-with-Lets-create-smarter-business", "where": "IBM's brand platform, launched 2022 (named in the 2025 release)" }, { "text": "Let's create smarter business", "prov": "published", "source": "https://newsroom.ibm.com/2025-09-03-IBM-Addresses-the-AI-Adoption-Gap-with-Lets-create-smarter-business", "where": "2025 brand campaign, the refresh of Let's create" }, { "text": "THINK", "prov": "published", "source": "https://www.ibm.com/design/language/ibm-logos/rebus", "where": "IBM's motto; the 1981 Eye-Bee-M rebus poster was made in its support. 'Think' is also a top-nav item on ibm.com" }, { "text": "Design is how we build bonds.", "prov": "published", "source": "https://www.ibm.com/design/language/philosophy/pov", "where": "The design-language ethos (internal design voice, not a marketing line)" } ], "attributes": [ "carefully considered", "uniquely unified", "expertly executed", "positively progressive", "essential", "engineered" ], "key_messages": [ { "text": "The essentials to scale AI", "prov": "observed", "source": "https://www.ibm.com/us-en", "source_note": "2026-10-29" }, { "text": "Smarter impact powered by IBM", "prov": "observed", "source": "https://www.ibm.com/us-en", "source_note": "2026-10-29" } ], "boilerplate": { "text": "IBM is a global provider of hybrid cloud, AI and consulting services, helping clients in more than 175 countries, across sectors such as financial services, telecommunications and healthcare, modernize their operations, including on its hybrid cloud platform and Red Hat OpenShift. It also works in quantum computing and industry-specific cloud, with stated commitments to trust, transparency, responsibility, inclusivity and service.", "prov": "published", "source": "https://newsroom.ibm.com/2025-09-03-IBM-Addresses-the-AI-Adoption-Gap-with-Lets-create-smarter-business", "paraphrase": true }, "pillars": [ { "name": "Intelligent data", "claim": "Give AI the real-time, trusted enterprise data and context it needs.", "prov": "observed", "source": "https://www.ibm.com/us-en", "proof": [ "p-confluent", "p-komatsu" ], "why": "The first of four capabilities the homepage lists under The essentials to scale AI." }, { "name": "Workload action", "claim": "Build and modernize software and workloads faster with AI.", "prov": "observed", "source": "https://www.ibm.com/us-en", "proof": [ "p-bob", "p-z" ] }, { "name": "Automated operations", "claim": "Automate and govern IT and agent operations across their lifecycle.", "prov": "observed", "source": "https://www.ibm.com/us-en", "proof": [ "p-apptio", "p-ferrari" ] }, { "name": "Hybrid control", "claim": "Secure and control identities, secrets and agents across hybrid environments.", "prov": "observed", "source": "https://www.ibm.com/us-en", "proof": [ "p-vault", "p-skechers" ] } ], "proof_points": [ { "id": "p-confluent", "kind": "metric", "text": "IBM Confluent streamhouse: data streaming operating costs cut by 35% (homepage claim).", "source": "https://www.ibm.com/us-en" }, { "id": "p-bob", "kind": "metric", "text": "IBM Bob: AI that reduces code dependencies by 50% (homepage claim).", "source": "https://www.ibm.com/us-en" }, { "id": "p-komatsu", "kind": "customer", "text": "Komatsu Australia cut file integration time by 80% with IBM Integration.", "source": "https://www.ibm.com/us-en" }, { "id": "p-apptio", "kind": "customer", "text": "IBM's CIO organization reduced software request processing time by 70% with IBM Apptio.", "source": "https://www.ibm.com/us-en" }, { "id": "p-vault", "kind": "metric", "text": "IBM Vault: authentication and secrets management time cut by 50% (homepage claim).", "source": "https://www.ibm.com/us-en" }, { "id": "p-z", "kind": "metric", "text": "IBM Z: development timelines reduced by 40% (homepage claim).", "source": "https://www.ibm.com/us-en" }, { "id": "p-ferrari", "kind": "customer", "text": "Scuderia Ferrari with watsonx Orchestrate: 2x increase in daily active users.", "source": "https://www.ibm.com/us-en" }, { "id": "p-skechers", "kind": "customer", "text": "Skechers with IBM Terraform: 100% security compliance for high and critical vulnerabilities.", "source": "https://www.ibm.com/us-en" }, { "id": "p-crushbank", "kind": "customer", "text": "CrushBank with IBM Bob: about one week to deliver solution prototypes.", "source": "https://www.ibm.com/us-en" }, { "id": "p-askit", "kind": "customer", "text": "IBM unlocked USD 4.5 billion+ in productivity with AI; 86% of routine issues solved with AskIT.", "source": "https://www.ibm.com/us-en" }, { "id": "p-breach", "kind": "research", "text": "Cost of a Data Breach Report 2026: global average breach cost USD 4.99M.", "source": "https://www.ibm.com/us-en" } ], "claim_boundaries": [ { "text": "Avoid hyperbole and jargon; IBM calls itself a fact-based company.", "prov": "published", "source": "https://www.ibm.com/design/language/photography/tips-and-techniques" }, { "text": "Every number on the homepage is tied to a named product, customer or report; don't use a figure without its source.", "prov": "observed", "source": "https://www.ibm.com/us-en", "source_note": "2026-10-29" }, { "text": "Never add your own tagline or motto to the 8-bar logo.", "prov": "published", "source": "https://www.ibm.com/design/language/ibm-logos/8-bar" }, { "text": "One appearance of the logo in US materials, generally the sign-off, carries the registered trademark; legal line reads '© International Business Machines [year]'.", "prov": "published", "source": "https://www.ibm.com/design/language/ibm-logos/8-bar" } ] } } } }