Skip to main contentCarbon Design System

AI label

The following page documents visual specifications such as color, typography, structure, and sizes.

Color

Default color

StateElementPropertyColor token
EnabledTexttext color$text-primary
Buttonborder$border-inverse
backgroundtransparent
HoverTexttext color$text-inverse
Buttonborder$border-inverse
background$background-inverse
FocusButtonborder$focus
Examples of default AI label states

Inline color

StateElementPropertyColor token
EnabledTexttext color$text-primary
Dotfill$icon-primary
Buttonbackgroundtransparent
HoverTexttext color$text-secondary
Buttonborder$border-inverse
backgroundtransparent
FocusButtonborder$focus
Examples of inline AI label states

Explainability popover color

ElementPropertyColor token
Popover backgroundbackground$ai-popover-background
linear-gradient: start$ai-aura-start
linear-gradient: end$ai-aura-end
Popover borderlinear-gradient: start$ai-border-start
linear-gradient: end$ai-border-end
Examples of an explainability popover

Typography

Default type

ElementFont-size (px/rem)Font-weightType token
Text (xl)20 / 1.25SemiBold / 600$heading-03
Text (sm–lg)16 / 1SemiBold / 600$heading-02
Text (2xs–xs)12 / 0.75SemiBold / 600
Text (mini)9 / 0.5625SemiBold / 600

Inline type

ElementFont-size (px/rem)Font-weightType token
Text (lg)16 / 1SemiBold / 600$heading-02
Text (md)14 / 0.875SemiBold / 600$heading-01
Text (sm)12 / 0.75SemiBold / 600

Explainability popover type

ElementFont-size (px/rem)Font-weightType token
Text14 / 0.875Regular / 400$label-02
Title28 / 1.75Regular / 400$heading-04
Body14 / 0.875Regular / 400$body-01

Structure

Default structure

ElementPropertyValueSpacing token
Buttonborder1px
heightSee sizes
Textpaddingcentered
Structure of default AI labels

Recommended structure and spacing measurements for default AI label | px / rem

Inline structure

ElementPropertypx/remSpacing token
Textpadding-left4px$spacing-02
Buttonborder1px
padding-left, padding-right4px$spacing-02
heightSee sizes
Bullet (sm-md)height, width4px
Bullet (lg)height, width8px
Structure of inline AI labels

Recommended structure and spacing measurements for inline AI label | px / rem

Explainability popover structure

ElementPropertypx/remSpacing token
Containerpadding24px$spacing-06
Footerheight48px
Structure of the explainability popover

Recommended structure and spacing measurements for the explainability popover | px / rem

Sizes

Default sizes

Default sizeHeight (px/rem)
Mini16 / 1
2x small (2xs)20 / 1.25
Extra small (xs)24 / 1.5
Small (sm)32 / 2
Medium (md)40 / 2.5
Large (lg)48 / 3
Extra large (xl)64 / 4

Inline sizes

Inline sizeHeight (px/rem)
Small (sm)16 / 1
Medium (md)18 / 1.125
Large (lg)22 / 1.375