IBM lead spaces: designing the hero experience for IBM dotcom within the Carbon Design System

Summary

The lead space is the hero component of IBM.com, the first element users see when they arrive on a page. It sets the tone for the entire experience and guides people toward the most important content. Designing this component with many variants required creating a flexible and scalable framework that could adapt to very different needs, from brand storytelling to knowledge-first journeys, while maintaining consistency with the Carbon Design System and meeting strict accessibility requirements.

The challenge

IBM.com serves millions of visitors every month across products, industries, and regions. The hero section of each page needed to be powerful enough to carry brand messaging and flexible enough to support business goals without compromising usability or performance. At the same time, content owners across hundreds of teams and localized sites were working in parallel, which made standardization a necessity.

The challenge was to seamlessly integrate components into a single design system that could balance creative freedom with governance, and scale across the entire enterprise.

Research and insights

The design process began with a study of hero patterns used by other enterprise and technology companies. This revealed that while flexibility was often strong, scalability and accessibility were frequently overlooked. A legacy audit of IBM’s existing hero components confirmed the same problems: inconsistent use of typography, spacing, and contrast. By grounding the new design in Carbon Design System tokens—type scales, grids, and color rules—the foundation for consistency was established. Accessibility testing was carried out early, particularly around video backgrounds and text contrast, which led to stricter WCAG AA-compliant rules for overlays, color layering, and responsive adjustments.

Design approach

The lead space was not treated as a single template but as a system of interchangeable patterns. Multiple height options allowed the hero to adapt to different levels of emphasis, while alignment choices gave teams the ability to use a left-aligned structure for business-driven pages or a centered layout for brand storytelling. Each variant was built from a common skeleton so that they could be extended and reused without breaking consistency.

This modular approach meant the lead space could function equally well as a campaign hero, a product introduction, or a search-driven experience. Performance was considered at every step, with strict media handling rules and fallback images to balance visual impact with speed.

Lead space variants

The system included three primary options:

1. The core lead space, offered in left-aligned layouts, as well as a centered version. Each could use either static imagery or looping video as a background:
   • The left-aligned lead space, which is the core option, offered in four different heights:
     • Super (640px height)
     • Tall (560px)
     • Medium (480px)
     • Short (320px)
   • Lead space centered, a version with more content
2. The lead space block extended the hero into a narrative zone by combining the headline area with supporting text, calls-to-action, or media, creating a more immersive introduction to complex stories.
3. The lead space search integrated IBM.com’s search functionality directly into the hero, making it the starting point for knowledge-heavy sections such as documentation or support.

Design innovation: vertical delimitators with elastic transparency

A recurring challenge in lead spaces is the variability of background images and the length of hero text. Titles can extend across multiple lines, while imagery can range from very light to very dark. Standard treatments, such as adding a heavy gradient overlay, often create inconsistency. Gradients tend to look different depending on the image, headings appear disconnected from the hero area, and there is little visual continuity between the elements inside the lead space and the content that follows.

To solve this, a new method was introduced: an overlay system of vertical stripes with elastic transparency. The system is composed of eight stripes, each two grid columns wide, extending from the top to the bottom of the lead space. Opacity decreases progressively across the stripes: the first four fade from 100% to 50%, while the last four taper from 50% down to 5%. This creates a field of flexible transparency that can adapt to different types of background images.

The effect is twofold. First, it improves legibility of long headings, subheadings, and calls to action without forcing uniform dark gradients across all imagery. Second, it provides visual vertical anchors that align with the grid and extend into the layout below the lead space, creating a stronger connection between the hero area and subsequent content.

This approach transforms the lead space from a container that relies on static overlays into a systematic, grid-based solution. By introducing adaptable vertical delimitators, the design maintains typographic clarity, preserves image diversity, and reinforces IBM’s design principles with a scalable method that can be applied universally.

Read more ↗ here.

UX and system decisions

Several design decisions shaped the system. Height variants allowed the component to adapt to context without disrupting the grid or hierarchy. Clear content layering rules ensured that text always remained legible against images and videos. Alignment options gave teams freedom while still enforcing brand standards. Most importantly, the entire system was embedded into the Carbon Design System, which meant that any team building on IBM.com could use it without reinventing the pattern. This approach provided governance and scalability at enterprise level.

Impact

The result was a unified, flexible hero system that replaced multiple inconsistent approaches across IBM.com. By standardizing the lead space, design and development overhead was reduced, brand alignment was strengthened, and user experience improved through consistent hierarchy, accessible color treatments, and integrated search. The system scaled globally, supporting hundreds of teams and localized sites while maintaining a cohesive experience for millions of visitors every month.