G
Tokens
TypographySpacingColorRadiusShadowMotion
Icons
Icon set
Components
AutocompleteAutocomplete2BadgeButtonCheckboxDropdownIconIconButtonIconToggleLinkModalNavPaginationPopoverProgressRadioSelectSliderSpinnerSwitchTabTextTextareaTextButtonTextInputTextToggleToastTooltip
Layouts
ArrangeBoxFlexStack
Foundational
FieldMenuTextbox
Utilities
CardHooksStyle utilities
Patterns
CardsFormsLists and tablesModals
Guides
ResponsiveTheming
Showcase
CompositionsLayoutsLayout examplesTests

Core colors

Bases

blue
hsl(0 0% 0%)
#000000
--grn-color-blue
red
hsl(0 0% 0%)
#000000
--grn-color-red
yellow
hsl(0 0% 0%)
#000000
--grn-color-yellow
green
hsl(0 0% 0%)
#000000
--grn-color-green

Shade tones

shadeTone13
hsl(0 0% 0%)
#000000
--grn-color-shadeTone13
shadeTone12
hsl(0 0% 0%)
#000000
--grn-color-shadeTone12
shadeTone11
hsl(0 0% 0%)
#000000
--grn-color-shadeTone11
shadeTone10
hsl(0 0% 0%)
#000000
--grn-color-shadeTone10
shadeTone9
hsl(0 0% 0%)
#000000
--grn-color-shadeTone9
shadeTone8
hsl(0 0% 0%)
#000000
--grn-color-shadeTone8
shadeTone7
hsl(0 0% 0%)
#000000
--grn-color-shadeTone7
shadeTone6
hsl(0 0% 0%)
#000000
--grn-color-shadeTone6
shadeTone5
hsl(0 0% 0%)
#000000
--grn-color-shadeTone5
shadeTone4
hsl(0 0% 0%)
#000000
--grn-color-shadeTone4
shadeTone3
hsl(0 0% 0%)
#000000
--grn-color-shadeTone3
shadeTone2
hsl(0 0% 0%)
#000000
--grn-color-shadeTone2
shadeTone1
hsl(0 0% 0%)
#000000
--grn-color-shadeTone1

Black fades

darkFade10
hsl(0 0% 0%)
#000000
--grn-color-darkFade10
darkFade9
hsl(0 0% 0%)
#000000
--grn-color-darkFade9
darkFade8
hsl(0 0% 0%)
#000000
--grn-color-darkFade8
darkFade7
hsl(0 0% 0%)
#000000
--grn-color-darkFade7
darkFade6
hsl(0 0% 0%)
#000000
--grn-color-darkFade6
darkFade5
hsl(0 0% 0%)
#000000
--grn-color-darkFade5
darkFade4
hsl(0 0% 0%)
#000000
--grn-color-darkFade4
darkFade3
hsl(0 0% 0%)
#000000
--grn-color-darkFade3
darkFade2
hsl(0 0% 0%)
#000000
--grn-color-darkFade2
darkFade1
hsl(0 0% 0%)
#000000
--grn-color-darkFade1

White fades

lightFade10
hsl(0 0% 0%)
#000000
--grn-color-lightFade10
lightFade9
hsl(0 0% 0%)
#000000
--grn-color-lightFade9
lightFade8
hsl(0 0% 0%)
#000000
--grn-color-lightFade8
lightFade7
hsl(0 0% 0%)
#000000
--grn-color-lightFade7
lightFade6
hsl(0 0% 0%)
#000000
--grn-color-lightFade6
lightFade5
hsl(0 0% 0%)
#000000
--grn-color-lightFade5
lightFade4
hsl(0 0% 0%)
#000000
--grn-color-lightFade4
lightFade3
hsl(0 0% 0%)
#000000
--grn-color-lightFade3
lightFade2
hsl(0 0% 0%)
#000000
--grn-color-lightFade2
lightFade1
hsl(0 0% 0%)
#000000
--grn-color-lightFade1