Skip to main contentCarbon Design System

UI shell header

Color

The UI Shell can be customized to use any of the four IBM themes by applying inline theming to the shell zone.

ElementPropertyColor token
Headerbackground color$background
border-bottom$border-subtle
Product nametext color$text-primary
ui shell header
StatePropertyColor token
Enabledsvg$icon-primary
Hoverbackground color$background-hover
svg$icon-primary
Focusborder$focus
Activebackground color$background-active
svg$icon-primary
Menu trigger interactive states

Menu-trigger interactive states

StatePropertyColor token
Enabledtext color$text-secondary
Hoverbackground color$background-hover
text color$text-primary
Focusborder$focus
Activebackground color$background-active
text color$text-primary
Menu item interactive states

Sub-menu interactive states

ElementStatePropertyColor token
Sub-menuEnabledbackground color$background
text color$text-secondary
svg$icon-secondary
Hoverbackground color$background-hover
text color$text-primary
svg$icon-primary
Focusborder$focus
Activebackground color$background-active
text color$text-primary
svg$icon-primary
Selectedbackground color$layer
text color$text-primary
svg$icon-primary
ItemEnabledbackground color$layer
text color$text-secondary
svg$icon-secondary
Hoverbackground color$layer-hover
text color$text-primary
svg$icon-primary
Focusborder$focus
Activebackground color$layer-active
text color$text-primary
svg$icon-primary
Sub-menu interactive states

Header actions

StatePropertyColor token
Enabledsvg$icon-secondary
Hoverbackground color$background-hover
svg$icon-primary
Focusborder$focus
Activebackground color$background-active
svg$icon-primary
Selectedbackground color$layer
border$border-subtle
svg$icon-primary
Header action interactive states

Header action interactive states

Typography

Menu labels and text should be set in sentence case.

ElementFont-size (px/rem)Font-weightType token
Product name14 / 0.875SemiBold / 600$heading-compact-01
Company prefix14 / 0.875Regular / 400$body-compact-01
Header link14 / 0.875Regular / 400$body-compact-01
Sub-menu14 / 0.875Regular / 400$body-compact-01

Structure

The header should span the full width of the browser window. The header can either stay sticky to the top of the browser or scroll away.

ElementPropertypx/remSpacing token
Headerheight48 / 3
Menuheight, width48 / 3
Product namepadding-left16 / 1$spacing-05
padding-right32 / 2$spacing-07
Linkpadding-left, padding right16 / 1$spacing-05
Sub-menupadding-left, padding right16 / 1$spacing-05
Chevronpadding-left8 / 0.5$spacing-03
Sub-menu itempadding-left, padding right16 / 1$spacing-05
Header actionheight, width48 / 3
ui shell header spec

Structure and spacing measurements for UI shell header | px | rem

ui shell header submenu spec

Structure and spacing measurements for header submenu | px | rem

Responsive behavior

In smaller browser windows, menu items in the header should collapse into the left side nav menu. Items that were once in the header should stack at the top of the side nav panel if other items were already present in the panel.

responsive behavior example

Responsive behavior for UI shell header