Tokens

Typography Spacing Color Radius Shadow Motion

Icons

Icon set

Layouts

Arrange Box Flex Stack

Foundational

Field Menu Textbox Variables

Utilities

Card Hooks Style utilities

Patterns

Cards Modals

Guides

Responsive Theming

Showcase

Compositions Layouts Layout examples Playground Tests

Core colors

Shade tones

shadeTone13

var(--grn-color-shadeTone13)

shadeTone12

var(--grn-color-shadeTone12)

shadeTone11

var(--grn-color-shadeTone11)

shadeTone10

var(--grn-color-shadeTone10)

shadeTone9

var(--grn-color-shadeTone9)

shadeTone8

var(--grn-color-shadeTone8)

shadeTone7

var(--grn-color-shadeTone7)

shadeTone6

var(--grn-color-shadeTone6)

shadeTone5

var(--grn-color-shadeTone5)

shadeTone4

var(--grn-color-shadeTone4)

shadeTone3

var(--grn-color-shadeTone3)

shadeTone2

var(--grn-color-shadeTone2)

shadeTone1

var(--grn-color-shadeTone1)

Black fades

darkFade10

var(--grn-color-darkFade10)

darkFade9

var(--grn-color-darkFade9)

darkFade8

var(--grn-color-darkFade8)

darkFade7

var(--grn-color-darkFade7)

darkFade6

var(--grn-color-darkFade6)

darkFade5

var(--grn-color-darkFade5)

darkFade4

var(--grn-color-darkFade4)

darkFade3

var(--grn-color-darkFade3)

darkFade2

var(--grn-color-darkFade2)

darkFade1

var(--grn-color-darkFade1)

White fades

lightFade10

var(--grn-color-lightFade10)

lightFade9

var(--grn-color-lightFade9)

lightFade8

var(--grn-color-lightFade8)

lightFade7

var(--grn-color-lightFade7)

lightFade6

var(--grn-color-lightFade6)

lightFade5

var(--grn-color-lightFade5)

lightFade4

var(--grn-color-lightFade4)

lightFade3

var(--grn-color-lightFade3)

lightFade2

var(--grn-color-lightFade2)

lightFade1

var(--grn-color-lightFade1)

Color shades

blue1

var(--grn-color-blue1)

blue2

var(--grn-color-blue2)

blue3

var(--grn-color-blue3)

blue4

var(--grn-color-blue4)

blue5

var(--grn-color-blue5)

blue6

var(--grn-color-blue6)

blue7

var(--grn-color-blue7)

blue8

var(--grn-color-blue8)

blue9

var(--grn-color-blue9)

blue10

var(--grn-color-blue10)

blue11

var(--grn-color-blue11)

blue12

var(--grn-color-blue12)

green1

var(--grn-color-green1)

green2

var(--grn-color-green2)

green3

var(--grn-color-green3)

green4

var(--grn-color-green4)

green5

var(--grn-color-green5)

green6

var(--grn-color-green6)

green7

var(--grn-color-green7)

green8

var(--grn-color-green8)

green9

var(--grn-color-green9)

green10

var(--grn-color-green10)

green11

var(--grn-color-green11)

green12

var(--grn-color-green12)

yellow1

var(--grn-color-yellow1)

yellow2

var(--grn-color-yellow2)

yellow3

var(--grn-color-yellow3)

yellow4

var(--grn-color-yellow4)

yellow5

var(--grn-color-yellow5)

yellow6

var(--grn-color-yellow6)

yellow7

var(--grn-color-yellow7)

yellow8

var(--grn-color-yellow8)

yellow9

var(--grn-color-yellow9)

yellow10

var(--grn-color-yellow10)

yellow11

var(--grn-color-yellow11)

yellow12

var(--grn-color-yellow12)

red1

var(--grn-color-red1)

red2

var(--grn-color-red2)

red3

var(--grn-color-red3)

red4

var(--grn-color-red4)

red5

var(--grn-color-red5)

red6

var(--grn-color-red6)

red7

var(--grn-color-red7)

red8

var(--grn-color-red8)

red9

var(--grn-color-red9)

red10

var(--grn-color-red10)

red11

var(--grn-color-red11)

red12

var(--grn-color-red12)

Shades

shade13

var(--grn-color-shade13)

shade12

var(--grn-color-shade12)

shade11

var(--grn-color-shade11)

shade10

var(--grn-color-shade10)

shade9

var(--grn-color-shade9)

shade8

var(--grn-color-shade8)

shade7

var(--grn-color-shade7)

shade6

var(--grn-color-shade6)

shade5

var(--grn-color-shade5)

shade4

var(--grn-color-shade4)

shade3

var(--grn-color-shade3)

shade2

var(--grn-color-shade2)

shade1

var(--grn-color-shade1)

Fades

fade10

var(--grn-color-fade10)

fade9

var(--grn-color-fade9)

fade8

var(--grn-color-fade8)

fade7

var(--grn-color-fade7)

fade6

var(--grn-color-fade6)

fade5

var(--grn-color-fade5)

fade4

var(--grn-color-fade4)

fade3

var(--grn-color-fade3)

fade2

var(--grn-color-fade2)

fade1

var(--grn-color-fade1)