Skip to main contentCarbon Design System

UI shell right panel

Color

Note: The UI Shell does not currently use the Carbon theme tokens; theming options for the shell will be available in the future. All color used in the UI Shell is from the IBM Design Language palette.

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

UI shell switcher example

Item

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

Typography

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

Structure

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.