A layered approach to brand and product design systems

IBM keeps its brand and its products in separate layers. IBM Brand Center holds the brand definition: the story, the visual elements, the guidelines and assets. It sits behind an IBM login, so outsiders only see it described. IBM Design Language is the public layer beneath it, the guidance and assets IBM uses to express the brand in products, communications, marketing, events and digital experiences.

Carbon is built on that language. It is IBM's open-source design system for products and digital experiences, with components, patterns, tokens, design kits and working code. IBM's own site menu files Brand Center and the Design Language under Foundations, and Carbon under Implementation.

Brand and product ask for different things. A brand needs room for expression: campaigns, photography, illustration, storytelling and art direction. A product needs consistency: interaction states, accessibility, forms, tables, navigation and charts that behave the same on every screen.

Put both under one rulebook and one side pays for it. A campaign held to fixed product type sizes reads like a settings screen. A product that takes each campaign's palette ends up with a different blue on every release.

A design language turns abstract choices into foundations both sides reuse. At IBM, Blue 60 from the Design Language palette is also the value of Carbon's $interactive token in the default theme. Carbon's heading sizes sit on the Design Language type scale, and the 2x Grid page hands product layout to Carbon. Iconography and motion carry across the same way.

A client might come to us with four projects in mind: a brand, a website, a product redesign and a design system. We increasingly scope them as one structure. The client's brand sits at the top, and a design language sits beneath it. Brand and web work and product work become two systems built from that language. Each engagement adds to a foundation the next one starts from, whether that next one is ours or another team's.

Carbon Signal provides rapid-feedback analysis that helps building owners and operators reduce carbon emissions across their portfolios. Its brand and its product increasingly need to say the same thing while solving very different problems, which makes it a useful test.

A practical structure could have three layers. The brand defines who Carbon Signal is: positioning, principles, voice, identity and art direction. The design language defines how it expresses itself, from color, type and grid to data visualization, accessibility and content. The product system defines how the software works: tokens, controls, forms, tables, charts, filters, reporting and AI patterns, in Figma and in production code.

AI features get the same treatment. We set reusable principles once: how AI output is told apart from source data, how confidence and uncertainty show, how recommendations, explanations and citations read, what processing looks like, when a person confirms, and how errors recover. Those patterns then carry through the whole product.

Carbon for AI is IBM's version. Every AI instance carries an AI label, the label opens an explainability popover, and twelve core components have AI variants.

The way we describe our own work changes. "We designed this website and this product" becomes "we established the design language the company uses to express its brand and build digital experiences." Every project after that implements the system, and what each one teaches goes into the next version.

It also links the disciplines we already work across: brand strategy, identity, websites and digital products. A brand refresh leaves the product team tokens and type to build with, and a product feature leaves patterns the website can reuse.