G
Tokens
TypographySpacingColorRadiusShadowMotion
Icons
Icon set
Components
AutocompleteAutocomplete2BadgeButtonCheckboxDropdownIconIconButtonIconToggleLinkModalNavPaginationPopoverProgressRadioSelectSliderSpinnerSwitchTabTextTextareaTextButtonTextInputTextToggleToastTooltip
Layouts
ArrangeBoxFlexStack
Foundational
FieldMenuTextboxVariables
Utilities
CardHooksStyle utilities
Patterns
CardsModals
Guides
ResponsiveTheming
Showcase
CompositionsLayoutsLayout examplesTests

Color

Contents

Aa
content
Default text color
hsl(0 0% 0%)
#000000
--grn-color-content
Aa
content2
Use to de-emphasized text
hsl(0 0% 0%)
#000000
--grn-color-content2
Aa
content3
Use to de-emphasized large text
hsl(0 0% 0%)
#000000
--grn-color-content3
Aa
disabledContent
Disabled action text
hsl(0 0% 0%)
#000000
--grn-color-disabledContent
icon
Default icon color
hsl(0 0% 0%)
#000000
--grn-color-icon
disabledIcon
Disabled action icon
hsl(0 0% 0%)
#000000
--grn-color-disabledIcon

Backgrounds

background
Default background color
hsl(0 0% 0%)
#000000
--grn-color-background
background2
Use to contrast against default background color
hsl(0 0% 0%)
#000000
--grn-color-background2
background3
Use to contrast against background2 color
hsl(0 0% 0%)
#000000
--grn-color-background3
disabledBackground
Disabled action background
hsl(0 0% 0%)
#000000
--grn-color-disabledBackground
floatingBackground
Use for floating elements like popovers and menus
hsl(0 0% 0%)
#000000
--grn-color-floatingBackground
backdrop
Use for backdrop elements like modals
hsl(0 0% 0%)
#000000
--grn-color-backdrop
overlay
Use it for contrast on any background, e.g., hover states
hsl(0 0% 0%)
#000000
--grn-color-overlay
overlay2
Stronger overlay for extra contrast, e.g., active states
hsl(0 0% 0%)
#000000
--grn-color-overlay2

Borders

border
Default border color
hsl(0 0% 0%)
#000000
--grn-color-border
border2
Use for emphasised borders
hsl(0 0% 0%)
#000000
--grn-color-border2

Statuses

Aa
contentWarning
hsl(0 0% 0%)
#000000
--grn-color-contentWarning
backgroundWarning
hsl(0 0% 0%)
#000000
--grn-color-backgroundWarning
Aa
onBackgroundWarning
hsl(0 0% 0%)
#000000
--grn-color-onBackgroundWarning
backgroundWarningSubtle
hsl(0 0% 0%)
#000000
--grn-color-backgroundWarningSubtle
Aa
onBackgroundWarningSubtle
hsl(0 0% 0%)
#000000
--grn-color-onBackgroundWarningSubtle
Aa
contentDanger
hsl(0 0% 0%)
#000000
--grn-color-contentDanger
backgroundDanger
hsl(0 0% 0%)
#000000
--grn-color-backgroundDanger
Aa
onBackgroundDanger
hsl(0 0% 0%)
#000000
--grn-color-onBackgroundDanger
backgroundDangerSubtle
hsl(0 0% 0%)
#000000
--grn-color-backgroundDangerSubtle
Aa
onBackgroundDangerSubtle
hsl(0 0% 0%)
#000000
--grn-color-onBackgroundDangerSubtle
Aa
contentSuccess
hsl(0 0% 0%)
#000000
--grn-color-contentSuccess
backgroundSuccess
hsl(0 0% 0%)
#000000
--grn-color-backgroundSuccess
Aa
onBackgroundSuccess
hsl(0 0% 0%)
#000000
--grn-color-onBackgroundSuccess
backgroundSuccessSubtle
hsl(0 0% 0%)
#000000
--grn-color-backgroundSuccessSubtle
Aa
onBackgroundSuccessSubtle
hsl(0 0% 0%)
#000000
--grn-color-onBackgroundSuccessSubtle
Aa
contentInfo
hsl(0 0% 0%)
#000000
--grn-color-contentInfo
backgroundInfo
hsl(0 0% 0%)
#000000
--grn-color-backgroundInfo
Aa
onBackgroundInfo
hsl(0 0% 0%)
#000000
--grn-color-onBackgroundInfo
backgroundInfoSubtle
hsl(0 0% 0%)
#000000
--grn-color-backgroundInfoSubtle
Aa
onBackgroundInfoSubtle
hsl(0 0% 0%)
#000000
--grn-color-onBackgroundInfoSubtle

Others

selection
Use for selected items
hsl(0 0% 0%)
#000000
--grn-color-selection

Color shades

blue1
hsl(0 0% 0%)
#000000
--grn-color-blue1
blue2
hsl(0 0% 0%)
#000000
--grn-color-blue2
blue3
hsl(0 0% 0%)
#000000
--grn-color-blue3
blue4
hsl(0 0% 0%)
#000000
--grn-color-blue4
blue5
hsl(0 0% 0%)
#000000
--grn-color-blue5
blue6
hsl(0 0% 0%)
#000000
--grn-color-blue6
blue7
hsl(0 0% 0%)
#000000
--grn-color-blue7
blue8
hsl(0 0% 0%)
#000000
--grn-color-blue8
blue9
hsl(0 0% 0%)
#000000
--grn-color-blue9
blue10
hsl(0 0% 0%)
#000000
--grn-color-blue10
blue11
hsl(0 0% 0%)
#000000
--grn-color-blue11
red1
hsl(0 0% 0%)
#000000
--grn-color-red1
red2
hsl(0 0% 0%)
#000000
--grn-color-red2
red3
hsl(0 0% 0%)
#000000
--grn-color-red3
red4
hsl(0 0% 0%)
#000000
--grn-color-red4
red5
hsl(0 0% 0%)
#000000
--grn-color-red5
red6
hsl(0 0% 0%)
#000000
--grn-color-red6
red7
hsl(0 0% 0%)
#000000
--grn-color-red7
red8
hsl(0 0% 0%)
#000000
--grn-color-red8
red9
hsl(0 0% 0%)
#000000
--grn-color-red9
red10
hsl(0 0% 0%)
#000000
--grn-color-red10
red11
hsl(0 0% 0%)
#000000
--grn-color-red11
green1
hsl(0 0% 0%)
#000000
--grn-color-green1
green2
hsl(0 0% 0%)
#000000
--grn-color-green2
green3
hsl(0 0% 0%)
#000000
--grn-color-green3
green4
hsl(0 0% 0%)
#000000
--grn-color-green4
green5
hsl(0 0% 0%)
#000000
--grn-color-green5
green6
hsl(0 0% 0%)
#000000
--grn-color-green6
green7
hsl(0 0% 0%)
#000000
--grn-color-green7
green8
hsl(0 0% 0%)
#000000
--grn-color-green8
green9
hsl(0 0% 0%)
#000000
--grn-color-green9
green10
hsl(0 0% 0%)
#000000
--grn-color-green10
green11
hsl(0 0% 0%)
#000000
--grn-color-green11
yellow1
hsl(0 0% 0%)
#000000
--grn-color-yellow1
yellow2
hsl(0 0% 0%)
#000000
--grn-color-yellow2
yellow3
hsl(0 0% 0%)
#000000
--grn-color-yellow3
yellow4
hsl(0 0% 0%)
#000000
--grn-color-yellow4
yellow5
hsl(0 0% 0%)
#000000
--grn-color-yellow5
yellow6
hsl(0 0% 0%)
#000000
--grn-color-yellow6
yellow7
hsl(0 0% 0%)
#000000
--grn-color-yellow7
yellow8
hsl(0 0% 0%)
#000000
--grn-color-yellow8
yellow9
hsl(0 0% 0%)
#000000
--grn-color-yellow9
yellow10
hsl(0 0% 0%)
#000000
--grn-color-yellow10
yellow11
hsl(0 0% 0%)
#000000
--grn-color-yellow11

Shades

shade13
hsl(0 0% 0%)
#000000
--grn-color-shade13
shade12
hsl(0 0% 0%)
#000000
--grn-color-shade12
shade11
hsl(0 0% 0%)
#000000
--grn-color-shade11
shade10
hsl(0 0% 0%)
#000000
--grn-color-shade10
shade9
hsl(0 0% 0%)
#000000
--grn-color-shade9
shade8
hsl(0 0% 0%)
#000000
--grn-color-shade8
shade7
hsl(0 0% 0%)
#000000
--grn-color-shade7
shade6
hsl(0 0% 0%)
#000000
--grn-color-shade6
shade5
hsl(0 0% 0%)
#000000
--grn-color-shade5
shade4
hsl(0 0% 0%)
#000000
--grn-color-shade4
shade3
hsl(0 0% 0%)
#000000
--grn-color-shade3
shade2
hsl(0 0% 0%)
#000000
--grn-color-shade2
shade1
hsl(0 0% 0%)
#000000
--grn-color-shade1

Fades

fade10
hsl(0 0% 0%)
#000000
--grn-color-fade10
fade9
hsl(0 0% 0%)
#000000
--grn-color-fade9
fade8
hsl(0 0% 0%)
#000000
--grn-color-fade8
fade7
hsl(0 0% 0%)
#000000
--grn-color-fade7
fade6
hsl(0 0% 0%)
#000000
--grn-color-fade6
fade5
hsl(0 0% 0%)
#000000
--grn-color-fade5
fade4
hsl(0 0% 0%)
#000000
--grn-color-fade4
fade3
hsl(0 0% 0%)
#000000
--grn-color-fade3
fade2
hsl(0 0% 0%)
#000000
--grn-color-fade2
fade1
hsl(0 0% 0%)
#000000
--grn-color-fade1

Core colors

The colors above are based of the Core colors.
For example, the danger semantic color is the same as the red core color.