Carbon Design System: Why MAS 9 Looks Nothing Like Your Old Maximo

Who this is for: Maximo administrators, functional consultants, and end users preparing for MAS 9 -- anyone who will open the application and wonder why nothing looks familiar.

Estimated read time: 10 minutes

The First Login: A Moment of Disorientation

You have been working in Maximo for years. Maybe a decade. You know where every button lives. You know that the work order list has a specific shade of blue in tivoli13, that the tab bar sits in a certain spot, that field labels line up neatly on the left side of the screen.

Then you log into MAS 9 for the first time.

The colors are different. The layout is different. The navigation is different. Field labels are in a different place. The tabs are in a different place. The entire visual language of the application has changed.

You are not imagining things. IBM replaced the entire user interface framework.

This is not a theme change. This is not a skin swap. This is a ground-up replacement of how Maximo presents itself to every user, in every application, on every screen.

What Happened to the Skins?

tivoli09, tivoli13, and Every Skin You Knew -- Gone

In Maximo 7.6, you had choices. The mxe.webclient.skin system property let administrators select between visual themes -- tivoli09, tivoli13, and others. Some organizations customized these skins further. Power users had preferences. Training materials referenced specific skin appearances.

In MAS 9, that system property no longer applies. There is no skin selection. There is no dropdown. There is no choice.

+----------------------------------------------------------+
|  MAXIMO 7.6 SKIN OPTIONS          MAS 9 SKIN OPTIONS     |
|                                                           |
|  [ ] tivoli09                     [x] Carbon Design       |
|  [ ] tivoli13                         (that's it)         |
|  [ ] custom_skin_01                                       |
|  [ ] custom_skin_02                                       |
|                                                           |
|  "Which skin do you prefer?"      "You get Carbon."      |
+----------------------------------------------------------+

IBM Carbon Design System is now the sole visual framework. Typography, colors, spacing, interaction patterns, button styles, form layouts, table presentations -- all of it follows Carbon standards. The masthead (the top header bar) defaults to a black background with white text. Every application, every screen, every dialog follows the same Carbon visual language.

This is a deliberate IBM strategy. Carbon is their enterprise-wide design system, used across the entire IBM product portfolio. Standardizing Maximo on Carbon means consistency with other IBM products, but it also means the end of the visual identity that Maximo users have known for two decades.

Key insight: This is not cosmetic. Carbon Design System governs interaction patterns, not just colors. How you interact with dropdowns, how tables paginate, how dialogs appear -- all of this changed. Training materials, screenshots in SOPs, and muscle memory built over years are all invalidated.

Field Labels: Above, Always, No Exceptions

The Vertical Label Toggle Is Gone

In Maximo 7.6, the mxe.webclient.verticalLabels system property controlled whether field labels appeared to the left of fields (horizontal) or above fields (vertical). Some organizations preferred horizontal labels for data-dense screens. Others liked vertical labels for readability on wider monitors.

In MAS 9, field labels are always above fields. The system property no longer functions. There is no toggle. There is no configuration option.

+------------------------------------------+
|  MAXIMO 7.6 (Horizontal Labels)          |
|                                          |
|  Work Order:  [ WO-123456          ]     |
|  Description: [ Pump repair - Unit 7 ]   |
|  Status:      [ APPR                ]    |
|  Priority:    [ 2                   ]    |
+------------------------------------------+

+------------------------------------------+
|  MAS 9 (Vertical Labels - Always)        |
|                                          |
|  Work Order                              |
|  [ WO-123456                        ]   |
|                                          |
|  Description                             |
|  [ Pump repair - Unit 7             ]   |
|                                          |
|  Status                                  |
|  [ APPR                             ]   |
|                                          |
|  Priority                                |
|  [ 2                                ]   |
+------------------------------------------+

This matters more than it sounds. Screens that used to show 15 fields in a compact horizontal layout now require more vertical space with labels stacked above each field. Users who relied on seeing a dense summary of record data without scrolling will find themselves scrolling more. Data entry workflows where the eye tracked horizontally across label-field pairs now require a different visual scanning pattern.

For organizations that built training materials with screenshots showing horizontal labels, every single screenshot needs to be retaken.

Key insight: The vertical label change affects screen real estate and scanning patterns. On data-dense applications like Work Order Tracking or Purchase Orders, users will notice immediately that they see fewer fields without scrolling. Plan for this in your training -- it is one of the first things users will complain about.

The CSS Class Name Problem

From .bx-- to .cds-- and Why Your Custom CSS Broke Twice

Here is where things get technical -- and painful for organizations that invested in CSS customizations.

When MAS 9.0 shipped, it used IBM Carbon Design System v10. The CSS class names in Carbon v10 used a .bx-- prefix. If your organization wrote custom CSS to tweak the Maximo interface -- change colors, hide elements, adjust spacing -- you targeted classes like .bx--header, .bx--btn, .bx--data-table.

Then MAS 9.1 shipped. IBM upgraded to Carbon Design System v11. The CSS class prefix changed from .bx-- to .cds--. Every single custom CSS rule targeting .bx-- classes stopped working.

/* Your MAS 9.0 custom CSS (worked in 9.0) */
.bx--header {
  background-color: #1a3a5c;
}
.bx--btn--primary {
  background-color: #0f62fe;
}
.bx--data-table th {
  font-weight: 700;
}

/* After MAS 9.1 upgrade -- ALL of the above is dead */
/* You need to rewrite everything to: */
.cds--header {
  background-color: #1a3a5c;
}
.cds--btn--primary {
  background-color: #0f62fe;
}
.cds--data-table th {
  font-weight: 700;
}

This is not a one-time migration problem. It is a structural risk. CSS class names are implementation details of the Carbon framework, and they can change again in future releases. Any organization maintaining custom CSS is signing up for a retesting and potential rewriting cycle with every MAS upgrade.

Custom CSS Is Unsupported by IBM

MAS 9.0 introduced a User Interface Customization option in the Configurations area. Administrators can upload custom CSS files to override Carbon styles. IBM even provides a template file called Manage_Overrides_template.css.

But here is the critical caveat that is easy to miss: IBM does not support custom CSS modifications. If your custom CSS causes visual rendering issues, broken layouts, or unexpected behavior, IBM support will not help troubleshoot. Their first instruction will be to remove your custom CSS and reproduce the issue without it.

Three warnings you need to internalize:

  1. CSS classes are shared across applications. A CSS change targeting a button style in Work Order Tracking will affect that same button style in every other application. There is no application-level CSS scoping.
  2. CSS class names change between releases. The .bx-- to .cds-- rename is proof. Your custom CSS is a maintenance liability that grows with every upgrade.
  3. No IBM support. If your custom CSS breaks something, you are on your own.
+----------------------------------------------------------+
|                    CSS RISK MATRIX                        |
|                                                           |
|  Custom CSS in MAS 9:                                    |
|                                                           |
|  [+] Hot-loadable (no restart needed)     <-- Good       |
|  [+] Template provided by IBM             <-- Good       |
|  [-] Class names change between releases  <-- Bad        |
|  [-] Shared across ALL applications       <-- Bad        |
|  [-] Unsupported by IBM                   <-- Really Bad |
|  [-] Can break unexpectedly on upgrade    <-- Really Bad |
|                                                           |
|  Verdict: Use sparingly. Document everything.            |
|           Test after EVERY upgrade.                      |
+----------------------------------------------------------+
Key insight: If your organization relies on custom CSS in Maximo 7.6 for branding or usability adjustments, you need to make a conscious decision for MAS 9. Either accept Carbon's defaults, invest in maintaining unsupported custom CSS that will break on upgrades, or find alternative approaches. There is no middle ground.

Navigation: A New Mental Model

Side Navigation Panel

The navigation structure in MAS 9 is fundamentally different from Maximo 7.6. Instead of the top-level menu bar with cascading dropdowns (Go To menu), MAS 9 uses a side navigation panel that slides in from the left edge of the screen.

This side panel provides module-level navigation -- you select your functional area (Work Management, Assets, Inventory, etc.) and then drill into specific applications. The Go To menu still exists functionally, but the primary navigation path has shifted to this side panel.

Docked Tabs at the Top

In Maximo 7.6, application tabs (the tabs you used to switch between open applications and records) lived in a separate tab bar, typically just below the masthead. In MAS 9, these tabs are docked at the top of the screen, integrated into the application header area.

This sounds like a minor change, but it affects how users navigate between open records. The visual treatment of tabs is different, the positioning is different, and the interaction model (how you close tabs, how you switch between them) follows Carbon conventions rather than legacy Maximo conventions.

+----------------------------------------------------------+
|  MAS 9 LAYOUT                                            |
|                                                           |
|  [=] IBM Maximo   | WO Track | Assets | PO |    [User]  |
|  +-----+--------------------------------------------------+
|  | NAV |  Work Order                                     |
|  |     |                                                  |
|  | WO  |  Work Order                                     |
|  | PM  |  [ WO-123456                              ]     |
|  | SR  |                                                  |
|  | JOB |  Description                                    |
|  |     |  [ Pump repair - Unit 7                   ]     |
|  |     |                                                  |
|  |     |  Status              Priority                   |
|  |     |  [ APPR         ]    [ 2              ]         |
|  |     |                                                  |
|  +-----+--------------------------------------------------+
|                                                           |
|  [=] Side nav    Tabs docked at top    Labels above      |
+----------------------------------------------------------+

Breadcrumb Navigation

Breadcrumb navigation has been improved for multi-level drill-down scenarios. When you navigate from a work order to an asset to a location, the breadcrumb trail gives you a clearer path back. This is a genuine improvement over the 7.6 experience, where deep drill-downs sometimes left users unsure how to navigate back to where they started.

Table Enhancements: The Bright Spot

Not everything about the UI change is disruptive. The table enhancements in MAS 9.0 and 9.1 are genuinely useful improvements that many Maximo users will appreciate once they learn them.

Action Toolbar

Tables in MAS 9 feature an action toolbar positioned above the table. This toolbar provides quick access to common operations that previously required right-clicking or navigating through menus. Create, duplicate, delete, and other context-specific actions are available with a single click from the toolbar.

Inline Filter Row

This is a significant improvement. MAS 9 tables include an inline filter row directly below the column headers. You can type filter criteria into individual columns and see the table filter in real time, without opening a separate filter dialog or query builder.

For users who spent years building saved queries in Maximo 7.6 just to filter a list by status and priority, inline column filtering is a major quality-of-life improvement.

Bulk Selection

Select multiple records using checkboxes in the leftmost column, then apply actions to the entire selection using the action toolbar. Bulk approval, bulk status change, bulk assignment -- these workflows become faster.

Resizable and Reorderable Columns

You can drag column borders to resize them and drag column headers to reorder them. This is standard in modern web applications but was limited in Maximo 7.6.

New Table System Properties

IBM added system properties to control table behavior:

Property — Purpose — Default

mxe.webclient.showTableHeaderNavKeys — Controls visibility of table header navigation shortcut keys — varies

mxe.webclient.paginationButtonsPlacement — Controls placement of pagination controls (top, bottom, or both) — bottom

Visual Changes Specific to MAS 9.1

If you upgraded to MAS 9.0 and started getting comfortable, MAS 9.1 brought another round of visual changes:

  • Brighter color palette compared to 9.0 -- the overall appearance is lighter and more vibrant
  • Wider spacing between links in Quick Insert and Favorite Application portlets on Start Centers
  • Checkboxes returned for Boolean (YORN) fields that display only 0 or 1 values -- MAS 8.4 through 9.0 used toggle switches for these fields, and 9.1 brought checkboxes back
  • Pagination controls made more prominent in some applications to reduce scrolling confusion

The checkbox change is worth calling out. If you trained users on MAS 9.0 and told them "Boolean fields now use toggle switches," you need to update that training for 9.1. The UI is still evolving between point releases.

The Real Impact: User Productivity During Transition

Here is the part that no technical documentation covers adequately -- what happens to your users during the transition.

The Muscle Memory Problem

Your power users do not read screen labels. They navigate by muscle memory. They know that the status field is "three tabs and two clicks from the top." They know the exact pixel location of the Save button. They know that the work log tab is the fourth tab in the section.

All of that muscle memory is invalidated by Carbon Design System. Labels are in different positions. Buttons look different. Tabs are in a different location. The navigation path to reach any given screen has changed.

+----------------------------------------------------------+
|  PRODUCTIVITY IMPACT DURING TRANSITION                   |
|                                                           |
|  Week 1-2:   |########################################|  |
|              60-70% of normal speed                      |
|                                                           |
|  Week 3-4:   |#############################|             |
|              75-80% of normal speed                      |
|                                                           |
|  Week 5-8:   |##################################|        |
|              85-90% of normal speed                      |
|                                                           |
|  Week 9-12:  |######################################|    |
|              95%+ of normal speed                        |
|                                                           |
|  Full comfort: 3-4 months for power users               |
+----------------------------------------------------------+

The Training Gap

We have seen organizations approach MAS 9 training as a "here's what changed" two-hour session. That is not enough. Not even close.

The UI changes in MAS 9 are not incremental. They are foundational. A user who has spent ten years in Maximo 7.6 needs structured, hands-on training that covers:

  1. New navigation model -- side panel, docked tabs, breadcrumbs
  2. New field layout -- labels above fields, changed spacing
  3. New table interactions -- action toolbar, inline filters, bulk selection
  4. New visual cues -- what does a disabled field look like in Carbon? What does a required field look like? What does a validation error look like?
  5. Changed workflows -- some multi-step processes have different click paths
  6. New keyboard shortcuts -- Carbon has its own accessibility and keyboard navigation patterns
"I've been in Maximo for 15 years. I logged into MAS 9 and felt like a new hire."

>

-- A maintenance planner during a recent upgrade project

What Good Training Looks Like

Bad training: A two-hour webinar with slides showing before-and-after screenshots.

Good training: Role-specific, hands-on sessions in a sandbox environment where users perform their actual daily tasks in the new interface. Minimum four hours per role. Follow-up sessions two weeks after go-live. A dedicated support channel for "how do I do X in the new system?" questions during the first month.

Budget for this. Plan for the productivity dip. Communicate to leadership that the first 4-8 weeks after go-live will be slower -- not because the system is worse, but because the interface is fundamentally different and humans need time to build new patterns.

What the Old vs. New Actually Looks Like

Let us be concrete about the visual differences your users will encounter:

UI Element — Maximo 7.6 — MAS 9 (Carbon)

Skin/Theme — tivoli09, tivoli13, custom skins — Carbon Design System only

Masthead — Blue gradient or custom color — Black background, white text

Field labels — Left of field (horizontal) or above (configurable) — Always above field

Navigation — Top menu bar with cascading dropdowns — Side navigation panel

Application tabs — Separate tab bar below masthead — Docked at top of screen

Table filtering — Separate filter/query dialog — Inline filter row below headers

Table actions — Right-click context menu — Action toolbar above table

Bulk selection — Limited — Checkbox column with toolbar actions

Boolean fields — Checkbox — Checkbox (9.1) / Toggle (9.0)

Column sizing — Fixed — Resizable and reorderable

Pagination — Bottom of table — Configurable (top, bottom, or both)

Typography — Maximo default fonts — IBM Plex (Carbon standard)

Recommendations for Your Upgrade Project

Based on what we have seen across multiple MAS 9 upgrades, here is what we recommend for managing the UI transition:

Before Go-Live

  1. Inventory your CSS customizations. If you have custom CSS in Maximo 7.6, document every rule. Decide now whether to port them to Carbon classes (knowing they are unsupported) or to accept Carbon defaults.
  2. Retake every screenshot in your SOPs and training materials. Every single one. Do not try to "explain the differences" with text annotations on old screenshots. Give users accurate visual references.
  3. Set up a sandbox environment early. Give power users and functional leads access to MAS 9 at least 6-8 weeks before go-live. Let them explore, struggle, and ask questions in a low-pressure environment.
  4. Map daily workflows to new click paths. For each user role, document the five most common daily tasks and write step-by-step instructions with new screenshots showing exactly how to perform them in MAS 9.

During Go-Live

  1. Station floor walkers. During the first week of go-live, have support staff physically present (or available on instant messaging) to answer "where is X?" questions in real time.
  2. Expect a productivity dip. Communicate this to leadership in advance. Week one will be slow. That is normal, not a failure.
  3. Track common questions. The questions that come in during week one become the content for your follow-up training sessions.

After Go-Live

  1. Run follow-up training at week two and week four. By this point, users have real questions based on actual usage, not hypothetical ones from a pre-go-live webinar.
  2. Monitor for CSS drift. If you deployed custom CSS, verify it still works after every MAS patch or point release. Build this into your upgrade testing checklist permanently.
  3. Collect feedback and iterate. Some table configurations, saved queries, and layout preferences will need adjustment. Give users a structured channel to request changes.

Key Takeaways

  • IBM Carbon Design System completely replaces all legacy Maximo skins -- tivoli09, tivoli13, and every custom skin are gone. The mxe.webclient.skin system property no longer applies.
  • Field labels are permanently above fields -- the mxe.webclient.verticalLabels toggle no longer functions. There is no configuration to change this.
  • CSS class names changed from `.bx--` to `.cds--` between MAS 9.0 and 9.1 -- any custom CSS targeting the old prefix broke on upgrade and will need rewriting.
  • Custom CSS is unsupported by IBM -- you can upload custom CSS through the UI Customization option, but IBM support will not help if it causes problems.
  • Table enhancements are a genuine improvement -- inline filters, action toolbars, bulk selection, and resizable columns improve daily workflows once users learn them.
  • The training gap is massive -- budget for role-specific, hands-on sessions of at least four hours per role, with follow-up sessions after go-live. A two-hour overview is not sufficient.

References

Series Navigation:

Previous: Part 1 -- The Platform Shift: Maximo 7.6 to MAS 9 at 30,000 Feet
Next: Part 3 -- Work Centers to Role-Based Applications (coming soon)

View the full MAS FEATURES series index -->

Part 2 of the "MAS FEATURES" series | Published by TheMaximoGuys

The Carbon Design System transformation is not optional and it is not cosmetic. It changes how every user interacts with Maximo every day. The organizations that invest in proper training and change management will recover productivity in weeks. The ones that treat it as "just a new theme" will be dealing with frustrated users for months.