Intelligent data
Give AI the real-time, trusted enterprise data and context it needs. Observed
The system
Fixed, everywhere
- 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).
Source: ibm.com/design/language/animation/overviewcarbondesignsystem.com/elements/motion/overviewcarbondesignsystem.com/elements/typography/type-setsibm.com/design/language/iconography/pictograms/design
Color, in proportion
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..
Tone by the reader's state
- Product UI and documentation (Carbon productive)
- ibm.com homepage and landing pages (institutional)
- Brand campaigns (Let's create)
- Design language and event moments (manifesto, rebus)
Two scoped voices. The levels are our reading of IBM's pages, not a published scale.
How loud each format gets
SilentProduct UI
QuietLanding pageProposal pageEmail
CalmDeck
WarmAdSocial post
Loud
Loudest
Our engine's setting, built from their rules.
Every piece passes 3 checks
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.
Strategy
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
Workload action
Build and modernize software and workloads faster with AI. Observed
Automated operations
Automate and govern IT and agent operations across their lifecycle. Observed
Hybrid control
Secure and control identities, secrets and agents across hybrid environments. Observed
IBM TechXchange 2026
Step inside IBM’s hands-on technical conference through replays and insights
Catch up with the highlights
The future starts at Current
Full spec
- For Observed
- Enterprise and government technology leaders and practitioners: the homepage speaks to teams running existing systems, IT operations, developers, and people building skills (observed).
- Problem Observed
- 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).
- Promise Observed
- 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).
- Belief Published
- 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).
Proof behind each pillar
- Intelligent data. IBM Confluent streamhouse: data streaming operating costs cut by 35% (homepage claim).
- Intelligent data. Komatsu Australia cut file integration time by 80% with IBM Integration.
- Workload action. IBM Bob: AI that reduces code dependencies by 50% (homepage claim).
- Workload action. IBM Z: development timelines reduced by 40% (homepage claim).
- Automated operations. IBM's CIO organization reduced software request processing time by 70% with IBM Apptio.
- Automated operations. Scuderia Ferrari with watsonx Orchestrate: 2x increase in daily active users.
- Hybrid control. IBM Vault: authentication and secrets management time cut by 50% (homepage claim).
- Hybrid control. Skechers with IBM Terraform: 100% security compliance for high and critical vulnerabilities.
Story Published
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.
Values
Carefully considered
Decide whether a thing is essential before doing it; remove everything gratuitous; respect the time asked of people (paraphrase).
PublishedUniquely unified
Fixed and fluid elements together: recognizable, repeatable, reusable, identifiable as IBM with the logo covered (paraphrase).
PublishedExpertly executed
Everything communicates; every execution should show care, craft and expertise, down to the last detail (paraphrase).
PublishedPositively progressive
Lead, think ahead, communicate confidence and remove friction; give more than it takes (paraphrase).
PublishedCategory. Global provider of hybrid cloud, AI and consulting services, working with clients in more than 175 countries (paraphrase of the About IBM boilerplate). Published
Why them
- Works across the systems clients already run (hybrid cloud, IBM Z mainframes, Red Hat OpenShift) rather than replacing them. Observed
- Governance and security for AI agents: watsonx Orchestrate, Vault, identity and control for AI agents. Observed
- Consulting plus software plus infrastructure under one name. Published
- 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. Observed
Instead of
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.
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 Published
Let's create smarter business Published
THINK Published
Design is how we build bonds. Published
They never claim
- Avoid hyperbole and jargon; IBM calls itself a fact-based company. Published
- Every number on the homepage is tied to a named product, customer or report; don't use a figure without its source. Observed
- Never add your own tagline or motto to the 8-bar logo. Published
- One appearance of the logo in US materials, generally the sign-off, carries the registered trademark; legal line reads '© International Business Machines [year]'. Published
More real lines
The essentials to scale AI
Take AI beyond experimentation and into everyday operations.
Bring agents under control with IBM® watsonx Orchestrate®
Build and modernize software faster with IBM Bob™
Smarter impact powered by IBM
See how watsonx Orchestrate helped Scuderia Ferrari automate fan content
Training for what’s next
Stay connected
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.
Source: newsroom.ibm.com/2025-09-03-IBM-Addresses-the-AI-Adoption-Gap-with-Lets-create-smarter-businessibm.com/us-en
Personality and voice
Essentialbut not decorativePublished
Engineeredbut not arbitraryPublished
Dynamicbut not staticPublished
Positively progressivebut not hypedPublished
Fact-basedbut not spinPublished
Nimblebut not overworkedPublished
Connect enterprise systems with IBM Integration
Unleash revolutionary AI-powered synergy!
The manifesto voice keeps designers aligned on intent; the plain voice serves busy enterprise readers.
Full spec
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.
- 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
EssentialConfidentPlain
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.
- 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
- 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.
Their words
ExploreLearn howSee howDiscoverBuildConnectSecureBringManage, govern, securewatsonx (lowercase w)
Never
ALL CAPS paragraphsstraight quoteshyphen or en dash in place of an em dashhyperbole and jargon
Source: ibm.com/design/language/layout/overviewibm.com/design/language/philosophy/principlesibm.com/design/language/photography/tips-and-techniquesibm.com/design/language/iconography/overview
- 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)
| Case | sentence case |
|---|---|
| Spelling | US English |
| Dates (homepage) | 10 November 2026, 12 PM ET |
| CTA pattern | Explore / Learn how / See how + object |
Source: ibm.com/design/language/philosophy/povibm.com/design/language/typography/type-basicsibm.com/design/language/photography/tips-and-techniquescarbondesignsystem.com/guidelines/content/writing-styleibm.com/us-en
Logo
Logos shown from IBM's public design-language pages and Brandfetch for reference. IBM and the 8-bar logo are trademarks of International Business Machines Corporation. Not affiliated, and not for download.
8-bar in black on white
8-bar in Blue 70 on Blue 60
One unchanging mark authenticates everything it touches; the rebus gives IBM a warmer, playful mark without diluting the official sign-off.
Full spec
- 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
| 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 |
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.
Source: ibm.com/design/language/ibm-logos/8-baribm.com/design/language/ibm-logos/rebus
Color
Explore the event
Explore the event
Mostly grays, one blue
A page flooded in blue
Restricting action to one blue makes every interaction recognizably IBM, and the step system makes contrast predictable without measuring.
Full spec
- 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
| 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 |
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.
Source: ibm.com/design/language/colorcarbondesignsystem.com/elements/color/overviewcarbondesignsystem.com/elements/color/tokensibm.com/design/language/ibm-logos/8-bar
Typography
Let's create
The essentials to scale AI
THE ESSENTIALS TO SCALE AI
Owning an open typeface makes IBM's voice consistent in every product and language, and lets anyone build in the real face.
Full spec
| Their face | Use | License | Open stand-in |
|---|---|---|---|
| IBM Plex Sans | Headlines (Light 300 at display sizes), subheads, body, labels | 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 No stand-in: the real face is open and on Google Fonts. |
| IBM Plex Sans | Body (Regular 400), labels and small headings (SemiBold 600) | Open (SIL OFL) | IBM Plex Sans No stand-in: the real face. |
| IBM Plex Mono | Code and code snippets in communications and specs (every glyph in a 600-unit width) | Open (SIL OFL) | IBM Plex Mono No stand-in: the real face. |
| IBM Plex Serif | Editorial; pairs with IBM Plex Math for research | Open (SIL OFL) | IBM Plex Serif No stand-in: the real face. |
- 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
| 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 |
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).
Source: ibm.com/design/language/typography/typefaceibm.com/design/language/typography/type-basicsibm.com/design/language/typography/type-scalecarbondesignsystem.com/elements/typography/type-setsibm.com/us-en
Iconography
Sharing Plex's details makes icons and type read as one system, and a single stroke weight keeps every icon the same visual weight.
Full spec
- 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
| 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 |
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).
Source: ibm.com/design/language/iconography/overviewibm.com/design/language/iconography/ui-icons/designibm.com/design/language/iconography/pictograms/designcarbondesignsystem.com/elements/icons/usage
Illustration
Building every drawing from grid-snapped basic shapes and standard angles keeps hundreds of illustrators recognizably IBM.
Full spec
- 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
| 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 |
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.
Source: ibm.com/design/language/illustration/overviewibm.com/design/language/illustration/tips-and-techniquesibm.com/design/language/illustration/flat-style/designibm.com/design/language/illustration/line-style/design
Photography
IBM presents itself as an objective observer of the working world; real, sharply focused scenes back up a fact-based brand.
Full spec
- 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
| 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 |
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.
Source: ibm.com/design/language/photography/overviewibm.com/design/language/photography/tips-and-techniques
Motion
Elements visible from start to end of a move (expanding tiles, sorting rows) in task UI; button states, dropdowns, data tables
The same moves at significant moments: opening a page, the primary action, notifications
Elements entering the view, productive
Elements entering the view, expressive
Elements leaving for good (closing a modal or toast), productive
Elements leaving for good, expressive
A shared vocabulary lets product and brand teams move things the same way, and keeping expressive motion rare preserves its impact.
Full spec
- 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
| 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 |
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.
Source: ibm.com/design/language/animation/overviewibm.com/design/language/animation/tips-and-techniquescarbondesignsystem.com/elements/motion/overview
Interface & layout
The page, band by band
Masthead: white 48px bar, 8-bar logo, six menu items, four icon buttons
Announcement strip: #F4F4F4, one centered linked line with gradient lead-in
Leadspace: gradient Light headline + lead + two buttons, 4:3 ambient video, Latest News column Primary action
Recommended for you: four bordered thumbnail tiles
Announcements feature: 16:9 artwork with a grey caption card, six-link list at right
Essentials: split intro over a 4x2 grid of pictogram cards
Spotlight carousel: grey gradient band, image+text cards with colored tags
Case studies: four tall cards with logo, 28px headline, grey stat panel
Training: narrow heading column, three 4:3 photo items
Stay connected: heading + 16:9 photo left, newsletter heading right
Buttons
Signature moves
The essentials to scale AI
THE ESSENTIALS TO SCALE AI
Big, light, flush-left Plex · the lead headline of every page and section on ibm.com and in the guide
Explore the event
Explore the event
The Blue 60 button with the label left and the arrow right · primary calls to action on ibm.com (hero) and across Carbon
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.
Everything on the 2x Grid · layout, type, icons, illustration and photo crops
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.
The 8-bar logo signs off · every official IBM communication: covers in print, the final frame in video
Specimens use sample copy, not IBM’s.
Full spec
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.
Measured from 's .
Spacing
| Measure | Desktop | Phone |
|---|---|---|
| Page margin | 32px | 16px |
| Card gap | 16px | 16px |
| Navigation | 49px | 49px |
Type, at size
Leadspace headline (h1)
IBM Plex Sans · 53.65px (phone 32.8) · line 1.17 · weight 300
Section headline (h2)
IBM Plex Sans · 53.65px (phone 32.8) · line 1.17 · weight 300
Section intro
IBM Plex Sans · 21.88px (phone 20) · line 1.4 · weight 400
Hero lead
IBM Plex Sans · 20px · line 1.4 · weight 400
Announcement line
IBM Plex Sans · 20px (phone 16) · line 1.4 · weight 400
Case-study headline
IBM Plex Sans · 28px · line 1.29 · weight 400
Form section heading
IBM Plex Sans · 32px · line 1.25 · weight 400
Band label heading
IBM Plex Sans · 20px · line 1.4 · weight 600
Small heading
IBM Plex Sans · 16px · line 1.5 · weight 600
Card title
IBM Plex Sans · 16px · line 1.4 · weight 400
Body
IBM Plex Sans · 16px · line 1.5 · weight 400
Nav link
IBM Plex Sans · 16px · line 1.375 · weight 400
Button label
IBM Plex Sans · 16px · line 1.375 · weight 400
Text CTA
IBM Plex Sans · 16px · line 1 · weight 400
Stat figure
IBM Plex Sans · 20px · line 1.4 · weight 600
Card body small
IBM Plex Sans · 14px · line 1.29 · tracking 0.16px · weight 400
Card heading small
IBM Plex Sans · 14px · line 1.43 · tracking 0.16px · weight 600
Footer link
IBM Plex Sans · 14px · line 1.43 · tracking 0.16px · weight 400
Tag
IBM Plex Sans · 12px · line 1.33 · tracking 0.32px · weight 400
- 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
- Buttons
- square
Page anatomy
How IBM’s own landing pages are built, observed on ibm.com, 2026-10-29. The full measurements are in spec.md.
- Navigation
- Carbon masthead: white 48px bar, 8-bar IBM logo at left, six text menu items, four 48px icon buttons at the right edge
- Hero
- 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
- Recommended for you
- A row of four bordered tiles, each a square artwork thumbnail plus a content-type label and one sentence
- Product announcements feature
- 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
- The essentials to scale AI
- Split intro (Light 300 heading left, 22px paragraph and a text link right) over a 4x2 grid of pictogram cards
- Spotlight carousel
- A pale grey band holding a horizontally scrolling row of image-plus-text cards with colored type tags, and a 1/3 pager
- Smarter impact powered by IBM
- Light 300 heading over four tall case-study cards: client logo, a 28px headline, and a grey statistic panel
- Training for what's next
- Heading in a narrow left column, three 4:3 photo items with a bold label, paragraph and text CTA to its right
- Stay connected
- Two halves: heading and 16:9 event photo left, the newsletter sign-up heading right
- Footer
- 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
Source: ibm.com/design/language/2x-gridibm.com/design/language/layout/overviewibm.com/design/language/layout/tips-and-techniquescarbondesignsystem.com/elements/2x-grid/overviewcarbondesignsystem.com/elements/spacing/overview
In use
Let's create · 2022
Co-creation fits the guide's idea of IBM as a medium between people and technology. Our reading
What if? · 2023
A question opens a co-creation story without hype, in line with the fact-based voice. Our reading
Let's create smarter business · 2025
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. Our reading
Full spec
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.
- Let's create. 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. newsroom.ibm.com/2025-09-03-IBM-Addresses-the-AI-Adoption-Gap-with-Lets-create-smarter-business
- What if?. 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. ogilvy.com/work/what-if
- Let's create smarter business. 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. newsroom.ibm.com/2025-09-03-IBM-Addresses-the-AI-Adoption-Gap-with-Lets-create-smarter-business
| Format | What they did | 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). | ibm.com/us-en |
| IBM field guides: expressive but minimal covers, artwork aligned left with the type, ample negative space. | ibm.com/design/language/layout/overview | |
| stationery | IBM business card: simple grid, minimal type, eye led from logo and name to details by alignment. | ibm.com/design/language/layout/overview |
| poster | IBM Garage posters exposing the grid scaffolding; Blueprint and Design Town Hall posters on simple 2x2 grids. | ibm.com/design/language/layout/overview |
| product UI | IBM Security Connect and Watson screens on the 2x Grid with purposeful color (Carbon). | 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. | 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. | ibm.com/design/language/2x-grid |
| data visualization | Understandable, essential, impactful, consistent, contextual charts (Carbon Charts). | ibm.com/design/language/data-visualization/overview |
Our setting for each format
| Format | Loudness | Must appear | What varies |
|---|---|---|---|
| Landing page | 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 | 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 | Homepage voice, numbers only with sources, one Blue 60 next-step button | a pictogram per section | |
| Ad | 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 | Plex, grid-aligned type, a core-color logo | expressive pictograms or isometric illustration | |
| White ground, Gray 100 text, one Blue 60 button, 8-bar in the header | one hero image | ||
| Product UI | Carbon components, productive type set and motion, grays plus Blue 60 | theme (White, Gray 10, Gray 90, Gray 100) |
Ads
Banking ai foundationMeta · Nov 2026 – now
Capital marketsMeta · Nov 2026 – now
Learn beyond codeMeta · Oct 2026 – now
Mkt 52820Meta · Nov 2026 – now- Campaign walk: Build it oncead → landing page → Contact sales
- Campaign walk: From AI ideas to AI in productionad → landing page → Contact sales
- Campaign walk: Your Next Counterparty Will Be An AIad → landing page → Contact sales
- Campaign walk: What if every risk was its own segment?ad → landing page → Contact sales
Rules
Do
- 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
- chase novelty for its own sake
- borrow a mid-century look instead of the modernist attitude
Source: ibm.com/design/language/philosophy/principlesibm.com/design/language/philosophy/pov
Steal this kit
Your name and logo, IBM’s system.
Comes with you
- Color roles and how much of each
- Type pairing, with open fonts
- Voice rules the writing check enforces
- Icon, photo, illustration and motion recipes
- The strategy frame, to fill with yours
Stays yours
- Your name and logo
- Your proof: numbers, customers, quotes
- Your purpose and claims. Theirs aren’t yours to make
Use this kit for my brand Use this brand in Claude
Hand it to a developer
- spec.mdEvery value and rule
- tokens.cssCSS variables
- tokens.jsonDesign tokens (DTCG)
- kit.jsonWhat our engines read
Your brand next
Get your brand audit Put your brand in Claude What goes in a brand book
What IBM doesn’t publish
- 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.
Each value is marked published, observed, our reading or our recipe, with its source. Checked 2026-10-29. Not affiliated with IBM.