# IBM: brand book and build spec

Blue at the core of a gray world, one open typeface, and everything divided by two. IBM's system is engineered to be recognizable with the logo covered: Plex set light and flush left on the 2x Grid, Blue 60 for every action, and Paul Rand's 8-bar signing off.

From unfairly.ai/brand-guidelines/ibm, checked 2026-10-29. Unofficial study; not affiliated with IBM.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Engineered restraint. IBM fixes the parts that carry identity (Plex, the 2x Grid, Blue 60, the 8-bar) and lets teams flex only along one published axis, productive to expressive, so a data table and a keynote film still read as the same company. Based on: From the 'Uniquely unified' principle (fixed and fluid elements, the logo-covered test), the productive and expressive split in motion, type and pictograms, and the single-action-color rule in Carbon.

## Purpose

Belief: 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). (published; https://www.ibm.com/design/language/philosophy/pov)

Story: 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. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Carefully considered | Decide whether a thing is essential before doing it; remove everything gratuitous; respect the time asked of people (paraphrase). | published: https://www.ibm.com/design/language/philosophy/principles |
| Uniquely unified | Fixed and fluid elements together: recognizable, repeatable, reusable, identifiable as IBM with the logo covered (paraphrase). | published: https://www.ibm.com/design/language/philosophy/principles |
| Expertly executed | Everything communicates; every execution should show care, craft and expertise, down to the last detail (paraphrase). | published: https://www.ibm.com/design/language/philosophy/principles |
| Positively progressive | Lead, think ahead, communicate confidence and remove friction; give more than it takes (paraphrase). | published: https://www.ibm.com/design/language/philosophy/principles |

## Fixed and flexible

Never changes:
- 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

The one thing that varies: 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).

## Positioning

- **Statement**: 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). (published)
- **Category**: Global provider of hybrid cloud, AI and consulting services, working with clients in more than 175 countries (paraphrase of the About IBM boilerplate). (published)
- **Audience**: Enterprise and government technology leaders and practitioners: the homepage speaks to teams running existing systems, IT operations, developers, and people building skills (observed). (observed)
- **Problem**: 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). (observed)
- **Promise**: 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). (observed)
- **Differentiators**: Works across the systems clients already run (hybrid cloud, IBM Z mainframes, Red Hat OpenShift) rather than replacing them.; Governance and security for AI agents: watsonx Orchestrate, Vault, identity and control for AI agents.; Consulting plus software plus infrastructure under one name.; 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.
- **Alternatives**: 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.

## Messaging

Boilerplate (published): 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.

Taglines:
- Let's create (IBM's brand platform, launched 2022 (named in the 2025 release))
- Let's create smarter business (2025 brand campaign, the refresh of Let's create)
- THINK (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)
- Design is how we build bonds. (The design-language ethos (internal design voice, not a marketing line))

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Intelligent data | Give AI the real-time, trusted enterprise data and context it needs. | IBM Confluent streamhouse: data streaming operating costs cut by 35% (homepage claim).; Komatsu Australia cut file integration time by 80% with IBM Integration. | observed |
| Workload action | Build and modernize software and workloads faster with AI. | IBM Bob: AI that reduces code dependencies by 50% (homepage claim).; IBM Z: development timelines reduced by 40% (homepage claim). | observed |
| Automated operations | Automate and govern IT and agent operations across their lifecycle. | IBM's CIO organization reduced software request processing time by 70% with IBM Apptio.; Scuderia Ferrari with watsonx Orchestrate: 2x increase in daily active users. | observed |
| Hybrid control | Secure and control identities, secrets and agents across hybrid environments. | IBM Vault: authentication and secrets management time cut by 50% (homepage claim).; Skechers with IBM Terraform: 100% security compliance for high and critical vulnerabilities. | observed |

They never claim:
- Avoid hyperbole and jargon; IBM calls itself a fact-based company.
- Every number on the homepage is tied to a named product, customer or report; don't use a figure without its source.
- Never add your own tagline or motto to the 8-bar logo.
- One appearance of the logo in US materials, generally the sign-off, carries the registered trademark; legal line reads '© International Business Machines [year]'.

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "IBM TechXchange 2026" | homepage | https://www.ibm.com/us-en |
| "Step inside IBM’s hands-on technical conference through replays and insights" | homepage | https://www.ibm.com/us-en |
| "Catch up with the highlights" | homepage | https://www.ibm.com/us-en |
| "The future starts at Current" | homepage | https://www.ibm.com/us-en |
| "The essentials to scale AI" | homepage | https://www.ibm.com/us-en |
| "Take AI beyond experimentation and into everyday operations." | homepage | https://www.ibm.com/us-en |
| "Bring agents under control with IBM® watsonx Orchestrate®" | homepage | https://www.ibm.com/us-en |
| "Build and modernize software faster with IBM Bob™" | homepage | https://www.ibm.com/us-en |
| "Smarter impact powered by IBM" | homepage | https://www.ibm.com/us-en |
| "See how watsonx Orchestrate helped Scuderia Ferrari automate fan content" | homepage | https://www.ibm.com/us-en |
| "Training for what’s next" | homepage | https://www.ibm.com/us-en |
| "Stay connected" | homepage | https://www.ibm.com/us-en |

## Voice

Tone words: Essential, Confident, Plain.

Traits:
- Essential, but not decorative (published)
- Engineered, but not arbitrary (published)
- Dynamic, but not static (published)
- Positively progressive, but not hyped (published)
- Fact-based, but not spin (published)
- Nimble, but not overworked (published)

- 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 a copy check enforces:
- Sentence case headlines
- Avoid all caps, especially in paragraphs; title case only for proper titles and product names
- Button labels in sentence case: first word and proper nouns capitalized
- Use curly quotes and apostrophes, never straight quotes
- Em dash for a strong break, en dash for number ranges (1945–1975), hyphen for compounds (check-in)
- No 'belt and suspenders': one emphasis style at a time
- Avoid hyperbole, jargon and spin
- Product lines and links start with a verb: Explore, Build, Connect, Secure, Learn how
- A number appears only with its product, customer or report named beside it
- Dates on the homepage read day month year without commas: '10 November 2026, 12 PM ET', '3 Nov, 11 AM ET'
- Product names carry their marks on first use: IBM Bob™, IBM Z®, watsonx Orchestrate®, Terraform®
- American spelling

Their words: Explore, Learn how, See how, Discover, Build, Connect, Secure, Bring, Manage, govern, secure, watsonx (lowercase w).
Never: ALL CAPS paragraphs, straight quotes, hyphen or en dash in place of an em dash, hyperbole and jargon.

Tone by reader state, 0 (no personality) to 5 (full) (our reading): Product UI and documentation (Carbon productive) 0, ibm.com homepage and landing pages (institutional) 1, Brand campaigns (Let's create) 3, Design language and event moments (manifesto, rebus) 4. Two scoped voices. The levels are our reading of IBM's pages, not a published scale.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Blue 60 | #0F62FE | accent | The core blue: primary action color across every IBM product and experience (buttons, links, focus, selected, brand background). |
| White | #FFFFFF | paper | Page ground (Carbon White theme); the ibm.com page ground (observed 2026-10-29). |
| Gray 10 | #F4F4F4 | surface | First layer on White: containers, fields, tiles. |
| Gray 100 | #161616 | ink | Primary text and icons on light grounds; dark-theme page ground; the ibm.com footer (observed). |
| Gray 70 | #525252 | ink_muted | Secondary text and labels; the stat figures on ibm.com case-study cards (observed). |
| Blue 70 | #0043CE | accent_secondary | Link hover, information status. |
| Black | #000000 | extra | Core color for the positive 8-bar and rebus. |
| Gray 80 | #393939 | extra | Secondary button fill; inverse (high-contrast) backgrounds. |
| Gray 90 | #262626 | extra | Gray 90 dark theme ground. |
| Gray 60 | #6F6F6F | extra | Helper and tertiary text. |
| Gray 50 | #8D8D8D | extra | Strong borders (input underline). |
| Gray 30 | #C6C6C6 | extra | Subtle borders, disabled buttons. |
| Gray 20 | #E0E0E0 | extra | Subtle borders on White, selected layers. |
| Blue 80 | #002D9C | extra | Primary button active state. |
| Blue 40 | #78A9FF | extra | Links on dark grounds. |
| Blue 20 | #D0E2FF | extra | Highlight; light logo ground. |
| Purple 60 | #8A3FFC | extra | Visited links; one of the vibrant families allowed sparingly. |
| Magenta 60 | #D02670 | extra | Vibrant family color, used sparingly. |
| Cyan 50 | #1192E8 | extra | Vibrant family color, used sparingly. |
| Teal 60 | #007D79 | extra | Vibrant family color, used sparingly. |
| Green 50 | #24A148 | extra | Success status (Alert 50). |
| Red 60 | #DA1E28 | extra | Error and danger (Alert 60). |
| Alert 40 | #FF832B | extra | Orange alert; reserved for UI alerts. |
| Alert 30 | #F1C21B | extra | Warning; reserved for UI alerts. |

Proportion (our reading; 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.): White 70%, Gray 10 8%, Gray 100 15%, Blue 60 5%, Other families 2%.

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | IBM Plex Sans | Open (SIL Open Font License); design patented by IBM. On Google Fonts and Adobe Fonts; the GitHub release is the most current | IBM Plex Sans | "Helvetica Neue", Arial, sans-serif |
| body | IBM Plex Sans | Open (SIL OFL) | IBM Plex Sans | "Helvetica Neue", Arial, sans-serif |
| mono | IBM Plex Mono | Open (SIL OFL) | IBM Plex Mono | Menlo, Courier, monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Leadspace headline (h1) | --text-leadspace-headline-h1-* | display | 53.65px | 32.8px | 1.17 | 0px | 300 |
| Section headline (h2) | --text-section-headline-h2-* | display | 53.65px | 32.8px | 1.17 | 0px | 300 |
| Section intro | --text-section-intro-* | body | 21.88px | 20px | 1.4 | 0px | 400 |
| Hero lead | --text-hero-lead-* | body | 20px | 20px | 1.4 | 0px | 400 |
| Announcement line | --text-announcement-line-* | body | 20px | 16px | 1.4 | 0px | 400 |
| Case-study headline | --text-case-study-headline-* | body | 28px | 28px | 1.29 | 0px | 400 |
| Form section heading | --text-form-section-heading-* | body | 32px | 32px | 1.25 | 0px | 400 |
| Band label heading | --text-band-label-heading-* | body | 20px | 20px | 1.4 | 0px | 600 |
| Small heading | --text-small-heading-* | body | 16px | 16px | 1.5 | 0px | 600 |
| Card title | --text-card-title-* | body | 16px | 16px | 1.4 | 0px | 400 |
| Body | --text-body-* | body | 16px | 16px | 1.5 | 0px | 400 |
| Nav link | --text-nav-link-* | body | 16px | 16px | 1.375 | 0px | 400 |
| Button label | --text-button-label-* | body | 16px | 16px | 1.375 | 0px | 400 |
| Text CTA | --text-text-cta-* | body | 16px | 16px | 1 | 0px | 400 |
| Stat figure | --text-stat-figure-* | body | 20px | 20px | 1.4 | 0px | 600 |
| Card body small | --text-card-body-small-* | body | 14px | 14px | 1.29 | 0.16px | 400 |
| Card heading small | --text-card-heading-small-* | body | 14px | 14px | 1.43 | 0.16px | 600 |
| Footer link | --text-footer-link-* | body | 14px | 14px | 1.43 | 0.16px | 400 |
| Tag | --text-tag-* | body | 12px | 12px | 1.33 | 0.32px | 400 |

## Layout

Measured on https://www.ibm.com/: .

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 32px | 16px |
| Container max width | 1440px | full |
| Grid columns | 16 | 4 |
| Gutter | 32px | 32px |
| Card gap | 16px | 16px |
| Navigation height | 49px | 49px |

At every width (observed, 2026-10-29):
| What | 390px | 1440px |
|---|---|---|
| display headline (h1, h2) | 32.8px / 41px / 400 | 53.65px / 62.77px / 300 |
| section intro | 20px / 28px | 21.88px / 30.64px |
| announcement strip | 102px, 16px/22px, left aligned, 3 lines | 64px, 20px/28px, centered, 1 line |
| side margin | 16px | 32px (16px for no-gutter bands) |
| band gap | 64px | 64px |
| hero | stacked: headline, lead, two full-width 48px buttons, video 358x269; no Latest News | three columns: text 480, video 672x504, news 176 |
| nav | hamburger + logo + search, globe, profile | logo, 6 menu items, 4 icons |
| essentials cards | stacked, pictogram left, bold title + description always visible | 4x2 grid 332x208, title only at rest |
| case studies | stacked 358 wide | four 332x402 |
| training items | sideways-scrolling row of 254px items | three 320px items beside a 344px heading |
| footer groups | 48px accordions | two columns of two open lists |

Breakpoints from IBM's CSS: 672, 1056, 1312, 1584px.

Homepage bands, top to bottom (observed):
1. Masthead: white 48px bar, 8-bar logo, six menu items, four icon buttons
   - 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
   - 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
2. Announcement strip: #F4F4F4, one centered linked line with gradient lead-in
   - 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
   - Whole strip is the link; opens in a new tab
   - No close button
3. Leadspace: gradient Light headline + lead + two buttons, 4:3 ambient video, Latest News column
   - 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
   - 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
4. Recommended for you: four bordered thumbnail tiles
   - Desktop: heading 16px 600 at x 16; tiles 340x160 at y 841, 16px gaps
   - Phone: tiles stacked full width
   - 1px #C6C6C6 border, 4px radius (measured), 16px padding
   - 92px square thumbnail, 2px radius
   - Label 14px #525252, sentence 14px #161616, arrow bottom right
5. Announcements feature: 16:9 artwork with a grey caption card, six-link list at right
   - 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
   - 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
6. Essentials: split intro over a 4x2 grid of pictogram cards
   - Desktop: heading cols 1-8, intro cols 9-16; cards 332x208, 16px gaps
   - Phone: stacked cards with pictogram left, bold title and description
   - 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
7. Spotlight carousel: grey gradient band, image+text cards with colored tags
   - Desktop: 302px band inset 16px; cards 496x162; 2.75 visible; pager 1 / 3 bottom right
   - Phone: cards 277x186
   - 160px square image left, 16px-padded text right, 4px radius, 1px #C6C6C6
   - Pill tags 24px, radius 16: Report #8A3FFC, Webinar #0F62FE, News #198038
8. Case studies: four tall cards with logo, 28px headline, grey stat panel
   - Desktop: 332x402 cards, 16px gaps
   - Phone: stacked full width
   - Logo 96x48
   - Headline 28px/36px 400
   - Stat panel #F4F4F4: figure 20px 600 #525252, caption 16px #525252, launch icon
9. Training: narrow heading column, three 4:3 photo items
   - Desktop: heading 344px at x 32; items 320 wide at x 384 / 736 / 1088
   - Phone: items 254 wide in a sideways-scrolling row
   - Photo 320x240, 4px radius
   - Label 16px 600, paragraph 16px/24px, text CTA 16px #0062FE
10. Stay connected: heading + 16:9 photo left, newsletter heading right
   - Desktop: two 656px halves, 32px/40px headings, photo 656x369 radius 4
   - Phone: stacked
   - Newsletter heading has a 1px #E0E0E0 rule under it
   - Form fields did not render in our sessions
11. Footer: #161616, white logo, four link groups, locale button, legal row
   - 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
   - Headings 14px 600 #F4F4F4; links 14px #C6C6C6 on a 28px pitch
   - Legal: Contact IBM, Privacy, Terms of use, Accessibility, Cookie Preferences
   - No copyright line

## Page anatomy

How IBM's own landing pages are built, part by part (observed; https://www.ibm.com/, 2026-10-29). A homepage pattern, not a brand law: follow it for landing pages.

**Announcement bar**
- 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

**Navigation**
- 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)

**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)

**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)

**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)

**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

**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

**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

**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

**On dark grounds**
- 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

## Components

- **button primary** (observed): 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, anatomy Carbon primary button: flat #0F62FE rectangle, 4px corners, label left, arrow right, 1px transparent border; no shadow, padding x 16, wrapped 70px tall when the label wraps to two lines at 1440 (the hero buttons are a fixed 232px wide)
  - hover (observed): fill #0050E6, transition 0.07s cubic-bezier(0, 0, 0.38, 0.9)
- **button tertiary** (observed): fill transparent, text #0F62FE, ring px 1, ring #0F62FE, radius 4, height 48, padding 12px 63px 12px 15px, font size 16, weight 400, anatomy The hero's second button and the phone "Save big on top products": outline only, fills blue with white text on hover, wrapped 70px when the label wraps to two lines, padding x 16
  - hover (observed): fill #0050E6, text #FFFFFF, border 1px #0F62FE, transition 0.07s cubic-bezier(0, 0, 0.38, 0.9)
- **text cta** (observed): 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
  - hover (observed): text #0043CE
- **recommended tile** (observed): fill #FFFFFF, border 1px #C6C6C6, radius 0, padding 16, size 340x160, thumb 92x92, radius 2
  - hover (observed): transition background 0.24s cubic-bezier(0.2, 0, 0.38, 0.9)
- **pictogram card** (observed): fill #FFFFFF, border 1px #C6C6C6, radius 4, size 332x208, padding 16, pictogram 48px, bottom-left, icon 20px #0F62FE arrow or launch, bottom-right
  - hover (observed): fill #E8E8E8, border 1px #0F62FE, content title swaps to the description (animation only)
- **feature card** (observed): 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, radius note 4px top-left only; the other three corners are square
- **link list item** (observed): fill #FFFFFF, rule 1px #E0E0E0 bottom, height 94, text 14px/18px #0F62FE, icon 20px arrow or launch, right
  - hover (observed): text #0043CE
- **spotlight card** (observed): fill #FFFFFF, border 1px #C6C6C6, radius 4, size 496x162 (277x186 phone), image 160x160 left, square corners
  - hover (observed): fill #E8E8E8
- **tag** (observed): 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
- **case study card** (observed): 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)
- **carousel button** (observed): size 32, radius 4, ring px 1, ring #0F62FE (enabled) / #C6C6C6 (disabled), fill transparent, icon chevron
- **news pager** (observed): size 32, font size 14, weight 400; active 600, active bar 16x4px #0F62FE under the active number
- **video toggle** (observed): size 48, fill #161616 at 50% opacity, icon white 20px play outline, position bottom-right corner of the video, flush
- **locale button** (observed): 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
- **media frame** (observed): 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

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| standard-productive | cubic-bezier(0.2, 0, 0.38, 0.9) |  | Elements visible from start to end of a move (expanding tiles, sorting rows) in task UI; button states, dropdowns, data tables | published |
| standard-expressive | cubic-bezier(0.4, 0.14, 0.3, 1) |  | The same moves at significant moments: opening a page, the primary action, notifications | published |
| entrance-productive | cubic-bezier(0, 0, 0.38, 0.9) |  | Elements entering the view, productive | published |
| entrance-expressive | cubic-bezier(0, 0, 0.3, 1) |  | Elements entering the view, expressive | published |
| exit-productive | cubic-bezier(0.2, 0, 1, 0.9) |  | Elements leaving for good (closing a modal or toast), productive | published |
| exit-expressive | cubic-bezier(0.4, 0.14, 1, 1) |  | Elements leaving for good, expressive | published |
| duration-fast-01 |  | 70ms | Micro-interactions such as button and toggle | published |
| duration-fast-02 |  | 110ms | Micro-interactions such as fade | published |
| duration-moderate-01 |  | 150ms | Small expansion, short-distance movement | published |
| duration-moderate-02 |  | 240ms | Expansion, system communication, toast | published |
| duration-slow-01 |  | 400ms | Large expansion, important system notifications | published |
| duration-slow-02 |  | 700ms | Background dimming | published |

## Icon tokens

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) (published).
| Name | Size | Use |
|---|---|---|
| s | 16px | Default in Carbon components; pairs with 14px Plex |
| m | 20px | Pairs with 16px Plex; expressive button icon |
| l | 24px | Larger UI icons |
| xl | 32px | Largest UI icon artboard; the master grid |

## Signature moves

### Big, light, flush-left Plex

Where: the lead headline of every page and section on ibm.com and in the guide.
Do: 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. One per band.
Don't: set headlines centered, in all caps, bold at display sizes, or tightly tracked; Plex is drawn to breathe.
Example: "The essentials to scale AI".

### The Blue 60 button with the label left and the arrow right

Where: primary calls to action on ibm.com (hero) and across Carbon.
Do: 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. One primary per view.
Don't: round the corners, center the label, or color a button anything but the core blue (danger red is for destructive actions only).
Example: "Explore the event".

### Everything on the 2x Grid

Where: layout, type, icons, illustration and photo crops.
Do: 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. Always.
Don't: divide from the canvas edge when using a margin, add gutters without redistributing, or place type on the padding.

### The 8-bar logo signs off

Where: every official IBM communication: covers in print, the final frame in video.
Do: 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, at the end or on the cover.
Don't: put the logo in a shape, add a tagline, recolor the bars, use a gradient or drop shadow, or substitute the rebus.

## Messaging: rules

IBM's public messaging runs on the 'Let's create' platform (2022), refreshed in 2025 as 'Let's create smarter business', aimed at moving enterprise AI from pilots to value. The homepage turns that into four capabilities (intelligent data, workload action, automated operations, hybrid control) and a stack of verb-first product lines, each with one sourced number.

Why it works: Enterprise buyers trust claims they can check. Tying every figure to a named customer, product or report keeps the fact-based stance the guide asks for.

|  |  |
|---|---|
| Platform | Let's create (2022), Let's create smarter business (2025) |
| Homepage pillars | intelligent data, workload action, automated operations, hybrid control |
| Boilerplate | hybrid cloud, AI and consulting; clients in 175+ countries |

- Lead with what the client gets done, then name the IBM product that does it
- One number per claim, with its customer, product or report beside it
- Use 'Let's create' as the brand platform line; don't attach it to the logo
- Use the full product mark on first mention (IBM Bob™, watsonx Orchestrate®)
- Don't invent percentages or customer results
- Don't name competitors (ibm.com does not)
- Don't add a tagline to the 8-bar logo

Sources: https://newsroom.ibm.com/2025-09-03-IBM-Addresses-the-AI-Adoption-Gap-with-Lets-create-smarter-business, https://www.ibm.com/us-en

## Voice: rules

Two voices. The design guide speaks in manifesto: short declaratives, arrows and equals signs ('Think → Guide', 'Stand for = Stand out'), Paul Rand quotes, 'we' as IBMers. The homepage is plainer and institutional: sentence-case, verb-first lines ('Bring agents under control with IBM watsonx Orchestrate'), one benefit and one number. Carbon points copywriters to IBM Style for grammar, which is not published openly.

Why it works: The manifesto voice keeps designers aligned on intent; the plain voice serves busy enterprise readers. Keeping them apart stops brand poetry leaking into product claims.

|  |  |
|---|---|
| Case | sentence case |
| Spelling | US English |
| Dates (homepage) | 10 November 2026, 12 PM ET |
| CTA pattern | Explore / Learn how / See how + object |

- Landing pages use the homepage voice: short sentence-case headline, one or two plain sentences, a verb-first action
- Sentence case everywhere, including buttons; title case only for proper names
- Curly quotes, em dashes for breaks, en dashes for ranges
- Avoid hyperbole, jargon and spin
- Keep titles short; stack long headlines into two or three lines
- Don't write in all caps
- Don't use the arrow-and-equation manifesto style in product or sales copy
- Don't stack emphasis styles (bold plus italic plus color)

Do and don't:
- Do: "Connect enterprise systems with IBM Integration". Verb first, the benefit, then the product (homepage pattern).
- Don't: "Unleash revolutionary AI-powered synergy!". Hyperbole and jargon: IBM calls itself fact-based.

Real examples, to look at on IBM's own pages (not for reuse):
- Do: sentence case reads easier: https://www.ibm.com/design/language/typography/type-basics
- Don't: all caps: https://www.ibm.com/design/language/typography/type-basics
- Do: em dash for a strong break: https://www.ibm.com/design/language/typography/type-basics

Sources: https://www.ibm.com/design/language/philosophy/pov, https://www.ibm.com/design/language/typography/type-basics, https://www.ibm.com/design/language/photography/tips-and-techniques, https://carbondesignsystem.com/guidelines/content/writing-style/, https://www.ibm.com/us-en

## Logo: rules

Two marks. The 8-bar logo, drawn by Paul Rand and unchanged since 1972, is the official sign-off and appears on every official communication. Positive and reversed versions differ: on light grounds the black stripes are drawn thicker, on dark grounds the white stripes are thinner, and counter points are sharper on the positive. The 1981 Eye-Bee-M rebus (in MoMA's collection) and the totem rebus are for merchandise, badges and events; the classic rebus in original colors only on black with permission.

Why it works: One unchanging mark authenticates everything it touches; the rebus gives IBM a warmer, playful mark without diluting the official sign-off.

|  |  |
|---|---|
| Clear space (8-bar) | 1x logo height |
| Clear space (rebus) | 1x M height |
| Contrast | 5 steps minimum |
| Approved positive pairs | Black/Gray 30, Blue 70/Blue 20, Gray 60/White |
| Approved reversed pairs | Blue 50/Black, Blue 40/Blue 90, Gray 10/Blue 60 |
| Legal line | © International Business Machines [year] |
| Minimum size | not published |

- Clear space around the 8-bar equals the logo's height; around the rebus, the M height
- Color only from the core blue and gray families, at least five steps between logo and ground
- Use the positive version on light grounds, the reversed version on dark
- Place on clear, simple, high-contrast photo areas only
- Align to the cap height of a business-unit logotype, or hang from it
- One US appearance, usually the sign-off, carries the ® mark
- Don't put the logo in a shape
- Don't change bar direction or weight, outline the bars or make a dot matrix
- Don't stretch, re-space or overlap letters
- Don't use a gradient, multicolor stripes or a drop shadow
- Don't add smart rays, characters, taglines or mottos
- Don't use the rebus as a sign-off or combine it with the 8-bar

Do and don't:
- Do: "8-bar in black on white". Core gray or blue, five steps from the ground, clear space equal to its height.
- Don't: "8-bar in Blue 70 on Blue 60". One step apart breaks the five-step rule; and never green, a gradient or multicolor stripes.

Real examples, to look at on IBM's own pages (not for reuse):
- 8-bar clear space equal to its height: https://www.ibm.com/design/language/ibm-logos/8-bar
- Blue 70 logo on Blue 20: https://www.ibm.com/design/language/ibm-logos/8-bar
- Reversed Blue 50 logo on Black: https://www.ibm.com/design/language/ibm-logos/8-bar
- Don't contain the logo in a shape: https://www.ibm.com/design/language/ibm-logos/8-bar
- The rebus at the US Open: https://www.ibm.com/design/language/ibm-logos/rebus

Sources: https://www.ibm.com/design/language/ibm-logos/8-bar, https://www.ibm.com/design/language/ibm-logos/rebus

## Color: rules

Ten color families (red, magenta, purple, blue, cyan, teal, green and three grays: cool, neutral, warm), ten steps each from 10 to 100, plus black and white. Blue is at the core; even the reds lean blue. Experiences are dominated by grays and the core black, white and blue, with other families for purposeful moments. In UI, neutral gray is dominant and Blue 60 is the single action color. Carbon's four themes are White, Gray 10, Gray 90 and Gray 100, named for their page ground.

Why it works: Restricting action to one blue makes every interaction recognizably IBM, and the step system makes contrast predictable without measuring.

|  |  |
|---|---|
| Core action | Blue 60 #0F62FE |
| Primary text (light) | Gray 100 #161616 |
| Secondary text | Gray 70 #525252 |
| Page grounds | White #FFFFFF, Gray 10 #F4F4F4, Gray 90 #262626, Gray 100 #161616 |
| Focus | 2px Blue 60 (light themes), White (dark) |
| Alerts | Red 60 #DA1E28, Green 50 #24A148, Alert 40 #FF832B, Alert 30 #F1C21B |
| Usage ratio | not published |

- Count steps for contrast: 4.5:1 text generally needs 4-6 steps apart, 3:1 needs 3-5 (see the guide's table)
- Combine colors only inside the published 4-, 3-, 2- or 1-color families, each containing core blue
- Gradients: two colors from an approved 2-color family, values 30-60 for vibrancy, no more than two steps apart
- Light themes layer White and Gray 10 alternately; dark themes step one value lighter per layer
- Hover is a half step, active two full steps, selected one step
- Orange and yellow are reserved for alerts
- Observed exception, scoped: ibm.com's 2026 event leadspace sets its headline in a Blue 60 #0F62FE to Magenta 40 #EE5396 text gradient, and the announcement lead-in in Blue 60 to Purple 60 #8A3FFC. Use these only on that one leadspace headline or strip; everywhere else the two-steps rule holds
- Don't mix greens with reds, magentas or purples, or teals with reds or magentas
- Don't blend colors more than two steps apart (Blue 60 to Teal 20)
- Don't make gradients with three or more colors
- Don't rely on color alone to carry meaning
- Don't use mid-tones as UI grounds

Do and don't:
- Do: "Explore the event". Blue 60 is the one action color, on a white or Gray 10 ground.
- Don't: "Explore the event". A gray, low-emphasis label as the primary action: IBM's primary action is always the Blue 60 button.
- Do: "Mostly grays, one blue". Grays and black, white and blue dominate.
- Don't: "A page flooded in blue". Blue is the action color, not the ground: grays dominate and other colors are purposeful hits.

Real examples, to look at on IBM's own pages (not for reuse):
- The 4-color families, each containing core blue: https://www.ibm.com/design/language/color
- Approved gradients on light and dark grounds: https://www.ibm.com/design/language/color
- Color grades and contrast steps: https://www.ibm.com/design/language/color
- Color in action, gallery 1: https://www.ibm.com/design/language/color
- Carbon layering model for light themes: https://carbondesignsystem.com/elements/color/overview/

Sources: https://www.ibm.com/design/language/color, https://carbondesignsystem.com/elements/color/overview/, https://carbondesignsystem.com/elements/color/tokens/, https://www.ibm.com/design/language/ibm-logos/8-bar

## Typography: rules

IBM Plex is the corporate typeface: four subfamilies (Sans, Serif, Mono, Condensed), eight weights with italics, over 100 Latin-script languages plus Arabic, Chinese, Cyrillic, Devanagari, Greek, Hebrew, Japanese, Korean and Thai. It is open source (OFL) and patented. The universal type scale comes from one equation starting at 12px; Carbon splits it into productive (14px base) and expressive (16px base) sets, with light 300 display styles. ibm.com sets its H1 in Plex Sans Light (observed).

Why it works: Owning an open typeface makes IBM's voice consistent in every product and language, and lets anyone build in the real face.

|  |  |
|---|---|
| Scale steps (px) | 12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 54, 60, 68, 76, 84, 92 |
| Equation | Xn = Xn-1 + {INT[(n-2)/4] + 1} * 2, y0 = 12px |
| Display (Carbon) | 54/64 300, 60/70 300 -0.64px, 92/102 300 -0.64px |
| Body | body-02 16/24 400; body-01 14/20 400 +0.16px |
| Small heading | heading-02 16/24 600 |
| Code | code-02 Plex Mono 14/20 400 +0.32px |
| ibm.com H1 (observed) | 53.6/62.8 weight 300 at 1440; 32.8/41 weight 400 at 390 |

- Flush left is the standard for all IBM typography
- Don't track Plex tightly; it is lighter and needs room
- Stack long headlines into two or three lines
- Differentiate title and subtitle by weight or scale, not by adding styles
- Plex Mono for code; Plex Serif with Plex Math for research
- For Chinese, Japanese, Korean, Thai, Devanagari and Arabic, set type at 95% with the same line height
- Scale type 4x, 8x or 32x for posters, banners and signage seen from a distance
- Don't center paragraphs
- Don't use all caps for text
- Don't stretch, warp or distort glyphs, even in animation
- Don't mix more than the minimum emphasis styles

Do and don't:
- Do: "The essentials to scale AI". Plex Sans Light, flush left, sentence case.
- Don't: "THE ESSENTIALS TO SCALE AI". All caps and heavy: harder to read and not IBM's display weight.

Real examples, to look at on IBM's own pages (not for reuse):
- Comfortable line length: https://www.ibm.com/design/language/typography/type-basics
- Use multiple type styles sparingly: https://www.ibm.com/design/language/typography/type-basics
- Type scale multiplied for large formats: https://www.ibm.com/design/language/typography/type-scale

Sources: https://www.ibm.com/design/language/typography/typeface, https://www.ibm.com/design/language/typography/type-basics, https://www.ibm.com/design/language/typography/type-scale, https://carbondesignsystem.com/elements/typography/type-sets/, https://www.ibm.com/us-en

## Iconography: rules

Three types: UI icons for functional actions, app icons for product identification, and pictograms for broad concepts in presentations, web, merchandise and signage. All are drawn on a 32px grid and borrow details from Plex: rounded exteriors with 90° interiors, slab characteristics, square caps and square arrow tips. Pictograms come productive (thin line) or expressive (thicker gradient stroke).

Why it works: Sharing Plex's details makes icons and type read as one system, and a single stroke weight keeps every icon the same visual weight.

|  |  |
|---|---|
| Grid | 32 x 32px |
| UI stroke | 2px |
| Pictogram stroke | 0.72px / 1.44px expressive |
| Corner radius | 2px (multiples of two) |
| Sizes | 16, 20, 24, 32px |
| Touch target | 44px |

- UI icons: 32px grid with 2px padding, 2px stroke, 2px corner radius, 45° or 15° increments
- Pictograms: 32px grid, 1px padding, 0.72px stroke (expressive 1.44px), rounded corners by default
- Carbon icons sit on 16px artboards by default; 16 and 20px pair with 14 and 16px Plex
- Touch targets at least 44px
- Icons are one solid color matching the adjacent text and pass 4.5:1
- Center-align icons next to text
- Pictogram gradients at 45°, two colors from one approved family
- Don't mix stroke weights in one icon
- Don't draw icons in perspective
- Don't round arrow tips
- Don't baseline-align icons to text
- Don't use radial gradients or more than two colors in a pictogram

Real examples, to look at on IBM's own pages (not for reuse):
- The IBM icon system overview: https://www.ibm.com/design/language/iconography/overview
- Pictogram 32px base grid: https://www.ibm.com/design/language/iconography/pictograms/design
- Rounded exteriors with 90° interiors: https://www.ibm.com/design/language/iconography/pictograms/design
- Carbon icon sizing: https://carbondesignsystem.com/elements/icons/usage/

Sources: https://www.ibm.com/design/language/iconography/overview, https://www.ibm.com/design/language/iconography/ui-icons/design, https://www.ibm.com/design/language/iconography/pictograms/design, https://carbondesignsystem.com/elements/icons/usage/

## Illustration: rules

Three styles: line (a 4px grid, few line weights, an extension of pictogram logic), flat (bold geometric shapes on an 8px grid, at least 8px wide with 8px spacing) and isometric (dimension for complex processes). Principles: engineered, clear, nimble, diverse, delightful. Color starts from the IBM palette in monochromatic, analogous or complementary schemes.

Why it works: Building every drawing from grid-snapped basic shapes and standard angles keeps hundreds of illustrators recognizably IBM.

|  |  |
|---|---|
| Line style grid | 4px |
| Flat style grid | 8px, min shape and gap 8px |
| Angles | 15° increments |
| Aspect ratios | 16:9, 4:3, 3:2, 2:1, 1:1 |

- Snap anchor points to the grid (4px line, 8px flat)
- Use standard angles: 15°, 30°, 45°, 60°, 75°, 90°
- Build curves from quarter, half and full circles; nest curves at equal spacing
- Line style: no more than four line weights, spacing at least the line weight
- Opaque shapes; imply transparency with palette swatches or gradients
- Divide the canvas in two to separate literal and digital views
- Key concepts meet 3:1 contrast
- Don't use transparency or multiply effects
- Don't flood an illustration with blue that competes with UI buttons
- Don't use orange or yellow except for alerts or skin tones
- Don't place shapes less than 8px apart in flat style

Real examples, to look at on IBM's own pages (not for reuse):
- Line style illustration with gradient: https://www.ibm.com/design/language/illustration/overview
- Flat style illustration: https://www.ibm.com/design/language/illustration/overview
- Isometric style illustration: https://www.ibm.com/design/language/illustration/overview
- Hero illustration in a booklet: https://www.ibm.com/design/language/illustration/tips-and-techniques

Sources: https://www.ibm.com/design/language/illustration/overview, https://www.ibm.com/design/language/illustration/tips-and-techniques, https://www.ibm.com/design/language/illustration/flat-style/design, https://www.ibm.com/design/language/illustration/line-style/design

## Photography: rules

Three types: reportage of the working world (lifestyle, cinematic, colorful, like documentary film), portraiture of 'progress partners' (IBMers and clients shot with equal care) and still life for products and concepts. Eye-level or aerial viewpoints, natural light, everything in sharp focus, no filters.

Why it works: IBM presents itself as an objective observer of the working world; real, sharply focused scenes back up a fact-based brand.

|  |  |
|---|---|
| Types | reportage, portraiture, still life |
| Viewpoint | eye level or aerial |
| Focus | everything sharp |
| Aspect ratios | 16:9, 4:3, 3:2, 2:1, 1:1 |

- Shoot at eye level, or from directly overhead for scale
- Use natural light or light that simulates it
- Keep everything in focus
- Compose on the 2x Grid with one clear focal point
- Crop to 16:9, 4:3, 3:2, 2:1 or 1:1
- Don't use golden-hour glow, color washes or grading
- Don't use soft focus or shallow depth of field
- Don't add overlays, glare or obvious retouching
- Don't use clichés or generic stock that any company could run
- Don't force odd perspectives

Real examples, to look at on IBM's own pages (not for reuse):
- Workers in a hardware lab: https://www.ibm.com/design/language/photography/overview
- Reportage: a person at an engineering workbench: https://www.ibm.com/design/language/photography/overview
- Portraiture: looking directly at camera: https://www.ibm.com/design/language/photography/overview
- Eye level: food inspectors along a conveyor: https://www.ibm.com/design/language/photography/tips-and-techniques
- Aerial: people on a beach: https://www.ibm.com/design/language/photography/tips-and-techniques

Sources: https://www.ibm.com/design/language/photography/overview, https://www.ibm.com/design/language/photography/tips-and-techniques

## Motion: rules

Two kinds of motion, productive and expressive, standing for machine and human. Productive is efficient and out of the way (button states, dropdowns, tables); expressive is vibrant and reserved for significant moments (a new page, the primary action, notifications). Carbon publishes standard, entrance and exit curves for each and six duration tokens from 70 to 700ms. Brand animation should be effective, concise, simple and engineered.

Why it works: A shared vocabulary lets product and brand teams move things the same way, and keeping expressive motion rare preserves its impact.

|  |  |
|---|---|
| Standard productive | cubic-bezier(0.2, 0, 0.38, 0.9) |
| Standard expressive | cubic-bezier(0.4, 0.14, 0.3, 1) |
| Entrance | (0, 0, 0.38, 0.9) / (0, 0, 0.3, 1) |
| Exit | (0.2, 0, 1, 0.9) / (0.4, 0.14, 1, 1) |
| Durations | 70, 110, 150, 240, 400, 700ms |

- Default to productive; reserve expressive for occasional, important moments
- Larger moves take longer; productive is markedly faster than expressive
- Micro-interactions 70-150ms, ease-out on user input
- Animate between swatch colors, not opacity; grow strokes from zero
- Reveal type left to right, top to bottom, on one axis at a time
- At least 24 fps; single-axis, controlled camera moves
- Always offer a reduced or static alternative
- Don't use linear motion
- Don't add cartoonish overshoots or bounces
- Don't use uncontrolled action cameras
- Don't cross-fade or distort shapes
- Don't center animated paragraphs

Real examples, to look at on IBM's own pages (not for reuse):
- Productive easing curves: https://carbondesignsystem.com/elements/motion/overview/
- Expressive easing curves: https://carbondesignsystem.com/elements/motion/overview/
- Sequential animated illustration: https://www.ibm.com/design/language/animation/tips-and-techniques

Sources: https://www.ibm.com/design/language/animation/overview, https://www.ibm.com/design/language/animation/tips-and-techniques, https://carbondesignsystem.com/elements/motion/overview/

## Interface and layout: rules

Everything sits on the 2x Grid: divide space by two (2, 4, 8, 16 columns), build from an 8px mini unit, and space in multiples of the base unit. Carbon fixes it for screens: 4 columns at 320px, 8 at 672, 16 at 1056, 1312 and 1584, with 16px padding and a 32px total gutter. The guide asks layouts to be essential, dynamic (balanced asymmetry) and engineered, with ample negative space and clear hierarchy.

Why it works: One grid across print, video, product and web is the 'uniquely unified' principle made concrete: anything placed on it relates to everything else.

|  |  |
|---|---|
| Mini unit | 8px (web and product) |
| Breakpoints | 320, 672, 1056, 1312, 1584px |
| Columns | 4, 8, 16, 16, 16 |
| Margins | 0, 16, 16, 16, 24px |
| Box padding | 16px |
| Gutter | 32px total |
| Spacing tokens | 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 160px |
| Print mini unit | 2mm handheld to 64mm across a street |

- Pick 1, 2, 4, 8 or 16 divisions and keep them through the design
- Divide the live area, not the canvas, when using margins
- Align type to the box padding, never inside it
- Space with mini-unit multiples: 1x, 2x, 3x, 4x, 6x, 8x, 10x, 12x
- Size images to the columns in a published aspect ratio
- Prefer balanced asymmetry to perfect symmetry; leave room to breathe
- Use editorial rhythm: repeat similar units, break with a contrasting one
- Video: 1920x1080 on a 7.5px mini unit, snapping in 30px steps
- Don't overcrowd
- Don't make every element the same weight
- Don't center everything symmetrically
- Don't invent spacing outside the scale

Real examples, to look at on IBM's own pages (not for reuse):
- 2x Grid with margins: https://www.ibm.com/design/language/2x-grid
- IBM Garage posters exposing the grid: https://www.ibm.com/design/language/layout/overview
- Design Town Hall poster on a 2x2 grid: https://www.ibm.com/design/language/layout/overview
- IBM.org website: editorial rhythm: https://www.ibm.com/design/language/layout/tips-and-techniques
- Carbon columns and rows: https://carbondesignsystem.com/elements/2x-grid/overview/

Sources: https://www.ibm.com/design/language/2x-grid, https://www.ibm.com/design/language/layout/overview, https://www.ibm.com/design/language/layout/tips-and-techniques, https://carbondesignsystem.com/elements/2x-grid/overview/, https://carbondesignsystem.com/elements/spacing/overview/

## Rules: rules

IBM states its rules as design principles with test questions: carefully considered, uniquely unified, expertly executed, positively progressive. One test is explicit: cover the logo and see if the work still reads as IBM.

Why it works: Questions travel further than specs: anyone authorizing design at IBM can apply them without a designer present.

|  |  |
|---|---|
| Principles | Carefully considered, Uniquely unified, Expertly executed, Positively progressive |
| Ethos | Think → Guide; Here → There |

- Is it essential? Remove everything gratuitous
- Cover the logo: would you still know it's IBM?
- Does it respect the time it asks of people?
- Is every detail cared for?
- Does it communicate confidence and positivity?
- Don't decorate
- Don't chase novelty for its own sake
- Don't borrow a mid-century look instead of the modernist attitude

Sources: https://www.ibm.com/design/language/philosophy/principles, https://www.ibm.com/design/language/philosophy/pov

## Campaigns

### Let's create (2022)

IBM's integrated global brand platform, launched 2022 and described by IBM as its most significant brand initiative in more than a decade (per the 2025 release). Framed as an invitation to clients to co-create.

How the system shows: Not inspected visually from an IBM page; the platform line itself is lowercase-sentence style, matching the guide's case rules.
Why it works: Co-creation fits the guide's idea of IBM as a medium between people and technology.
Channels: brand platform. Source: https://newsroom.ibm.com/2025-09-03-IBM-Addresses-the-AI-Adoption-Gap-with-Lets-create-smarter-business

### What if? (2023)

A phase of Let's create by Ogilvy: four films built on real 'What if' questions behind IBM and partner solutions, plus generative-AI print work for the Masters. Year from trade coverage; the Ogilvy page states no year.

How the system shows: A question mark as the central motif (per Ogilvy); visuals not inspected here.
Why it works: A question opens a co-creation story without hype, in line with the fact-based voice.
Channels: film, print, broadcast. Source: https://ogilvy.com/work/what-if

### Let's create smarter business (2025)

Announced 3 Sep 2025 with Ogilvy and IBM Brand Marketing: three spots voiced by Lewis Hamilton, debuting at the US Open, about the gap between AI pilots and real value across service, support and core operating systems.

How the system shows: The release says the campaign brings back IBM's blue bars; the agency describes the tone as smart, simple and charming.
Why it works: It names a buyer's real frustration (AI that doesn't scale) and answers with IBM's concrete capabilities, the same move the homepage makes.
Channels: broadcast, digital out-of-home, print, web, social, digital video. Source: https://newsroom.ibm.com/2025-09-03-IBM-Addresses-the-AI-Adoption-Gap-with-Lets-create-smarter-business

## Applications

| Format | What | Source |
|---|---|---|
| website | ibm.com homepage: white ground, Plex Sans Light H1 with gradient text, square Blue 60 and outline buttons with arrow icons, 4px-radius tiles with Gray 30 borders, a Gray 100 footer (observed 2026-10-29). | https://www.ibm.com/us-en |
| print | IBM field guides: expressive but minimal covers, artwork aligned left with the type, ample negative space. | https://www.ibm.com/design/language/layout/overview |
| stationery | IBM business card: simple grid, minimal type, eye led from logo and name to details by alignment. | https://www.ibm.com/design/language/layout/overview |
| poster | IBM Garage posters exposing the grid scaffolding; Blueprint and Design Town Hall posters on simple 2x2 grids. | https://www.ibm.com/design/language/layout/overview |
| product UI | IBM Security Connect and Watson screens on the 2x Grid with purposeful color (Carbon). | https://www.ibm.com/design/language/layout/overview |
| merchandise and events | The rebus on notebooks, T-shirts, an atrium wall, glass patterns and at the US Open. | https://www.ibm.com/design/language/ibm-logos/rebus |
| video | 1920x1080 on a 7.5px mini unit in an 8-column grid; the 8-bar as the final sign-off. | https://www.ibm.com/design/language/2x-grid |
| data visualization | Understandable, essential, impactful, consistent, contextual charts (Carbon Charts). | https://www.ibm.com/design/language/data-visualization/overview |

## By format

How our engine applies IBM's system to each format. This is our recipe built from their rules, not something IBM publishes. Level = how far toward the expressive end. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 1 | 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 | one expressive moment (gradient headline text or one illustration) and which product and proof bands follow |
| Deck | 2 | 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 | one illustration style or reportage photo per slide |
| Proposal page | 1 | Homepage voice, numbers only with sources, one Blue 60 next-step button | a pictogram per section |
| Ad | 3 | Short sentence-case line, reportage photo or flat illustration, 8-bar sign-off with clear space | a 2-color gradient from an approved family |
| Social post | 3 | Plex, grid-aligned type, a core-color logo | expressive pictograms or isometric illustration |
| Email | 1 | White ground, Gray 100 text, one Blue 60 button, 8-bar in the header | one hero image |
| Product UI | 0 | Carbon components, productive type set and motion, grays plus Blue 60 | theme (White, Gray 10, Gray 90, Gray 100) |

## Checks before anything ships

- **Logo hidden**: Cover the 8-bar. IBM's own test: it should still read as IBM through Plex, the grid, grays and one blue.
- **Grid check**: Every edge, gap and image size should land on the 8px mini unit and the column grid; anything off-grid goes back.
- **Fact check**: Every number has a named source beside it, and no line could pass for hype.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is IBM's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- IBM Brand Center (ibm.com/brand) is behind IBMid login: anything published only there is not published publicly.
- No public voice and tone guide: Carbon points to IBM Style, which is not openly published; the voice rules here come from the type guide, the photography guide and observation of ibm.com.
- Logo minimum size: not published on the public 8-bar page.
- Logo files: the public guide offers SVG plates on construction grids; clean logo files require an IBMid request.
- Color proportions: no published usage ratio beyond 'grays and core colors dominate'.
- Pantone and CMYK values are listed as columns on the color page but were not captured in this extraction.
- Exact colors of the ibm.com gradient headline text were not recorded in this extraction.
- Which Plex weights and files ibm.com actually loads was not checked.
- Photography assets and video guidance are behind IBMid login.
- The 'Let's create' 2022 launch creative was not verified on an IBM page; only its name and date via the 2025 release.

Logos and reference images belong to IBM. Look at them on IBM's own pages; don't reuse them.