Skip to main contentCarbon Design System

UI shell right panel


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

ElementPropertyColor token
Panelbackground color$layer
Header actionborder-left, border-right$border-subtle
UI shell right panel example.

UI shell switcher example


StatePropertyColor token
Enabledtext color$text-secondary
Hoverbackground color$layer-hover
text color$text-primary
Activebackground color$layer-active
text color$text-primary
Selectedbackground color$layer-selected
text color$text-primary
Disabledtext color$text-disabled


ElementFont-size (px/rem)Font-weightType token
Item14 / 0.875SemiBold / 600$heading-compact-01


The panel spans the full height of the browser and is fixed to the right edge of the window.

ElementPropertypx/remSpacing token
Panelwidth256 / 16
Itemheight32 / 2
padding left, padding right16 / 1$spacing-05
Header actionheight, width48 / 8
svg20 / 1.25
UI shell right panel example.

Structure and spacing measurements for right panel | px | rem.