Design Tokens

This page collects all design tokens currently available for gatsbyjs.org which are not covered on sibling pages.

Work in Progress

Our design tokens can be imported from src/utils/presets. We are following the System UI Theme Specification. This page is not a complete list of all available tokens yet. Please bear with us as we sort out documentation for what is currently missing.

Space

Spacing tokens are intended for use with margin, padding, and other layout-related CSS properties.

The primary use should be building individual components; however, as we flesh out this part of our design tokens, they are also expected to be used to define global (layout) spacing properties.

Token	rem	px	Example
`space[0]`	0	0	A box with `space[0]` set as value for the `height` and `width` CSS properties. This should result in a 0×0px box being rendered.
`space[1]`	0.25	4	A box with `space[1]` set as value for the `height` and `width` CSS properties. This should result in a 4×4px box being rendered.
`space[2]`	0.5	8	A box with `space[2]` set as value for the `height` and `width` CSS properties. This should result in a 8×8px box being rendered.
`space[3]`	0.75	12	A box with `space[3]` set as value for the `height` and `width` CSS properties. This should result in a 12×12px box being rendered.
`space[4]`	1	16	A box with `space[4]` set as value for the `height` and `width` CSS properties. This should result in a 16×16px box being rendered.
`space[5]`	1.25	20	A box with `space[5]` set as value for the `height` and `width` CSS properties. This should result in a 20×20px box being rendered.
`space[6]`	1.5	24	A box with `space[6]` set as value for the `height` and `width` CSS properties. This should result in a 24×24px box being rendered.
`space[7]`	2	32	A box with `space[7]` set as value for the `height` and `width` CSS properties. This should result in a 32×32px box being rendered.
`space[8]`	2.5	40	A box with `space[8]` set as value for the `height` and `width` CSS properties. This should result in a 40×40px box being rendered.
`space[9]`	3	48	A box with `space[9]` set as value for the `height` and `width` CSS properties. This should result in a 48×48px box being rendered.
`space[10]`	3.5	56	A box with `space[10]` set as value for the `height` and `width` CSS properties. This should result in a 56×56px box being rendered.
`space[11]`	4	64	A box with `space[11]` set as value for the `height` and `width` CSS properties. This should result in a 64×64px box being rendered.
`space[12]`	4.5	72	A box with `space[12]` set as value for the `height` and `width` CSS properties. This should result in a 72×72px box being rendered.

Shadows & Elevation

Component elevation in our UI is depicted using shadows. These tokens are intended to be used with the box-shadow CSS property.

There is a lot of definition work to do here, which is why we deliberately chose to omit adding more documentation at this point.

shadows.raised

shadows.floating

shadows.overlay

shadows.dialog

Z-Indices

Intended to be used with the box-shadow CSS property, these tokens along "Shadows & Elevation" define the order of components along the z-axis.

Token	Value
`zIndices.widget`	2
`zIndices.navigation`	5
`zIndices.banner`	10
`zIndices.modal`	10
`zIndices.sidebar`	10
`zIndices.floatingActionButton`	20
`zIndices.skipLink`	100

Radii

Intended for use with the border-radius CSS property. Currently defined in px, which means they do not yet scale when adjusting the root font size.

Token	px	Example
`radii[0]`	0	A 80×40px box with `radii[0]` set as value for the `border-radius` CSS property.
`radii[1]`	2px	A 80×40px box with `radii[1]` set as value for the `border-radius` CSS property.
`radii[2]`	4px	A 80×40px box with `radii[2]` set as value for the `border-radius` CSS property.
`radii[3]`	8px	A 80×40px box with `radii[3]` set as value for the `border-radius` CSS property.
`radii[4]`	16px	A 80×40px box with `radii[4]` set as value for the `border-radius` CSS property.
`radii[5]`	9999px	A 80×40px box with `radii[5]` set as value for the `border-radius` CSS property.
`radii[6]`	100%	A 80×40px box with `radii[6]` set as value for the `border-radius` CSS property.

Fonts

Intended for use with the font-family CSS property.

Token	Value	Example
`fonts.body`	-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji	ABC
`fonts.system`	-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji	ABC
`fonts.heading`	Futura PT, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji	ABC
`fonts.monospace`	SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace	ABC
`fonts.serif`	Georgia, Times New Roman, Times, serif	ABC

Font Sizes

Intended for use with the font-size CSS property.

Token	Value	Example
`fontSizes[0]`	0.75rem	Gatsby believed in the green light, the orgastic future that year by year recedes before us.
`fontSizes[1]`	0.875rem	Gatsby believed in the green light, the orgastic future that year by year recedes before us.
`fontSizes[2]`	1rem	Gatsby believed in the green light, the orgastic future that year by year recedes before us.
`fontSizes[3]`	1.125rem	Gatsby believed in the green light, the orgastic future that year by year recedes before us.
`fontSizes[4]`	1.25rem	Gatsby believed in the green light, the orgastic future that year by year recedes before us.
`fontSizes[5]`	1.5rem	Gatsby believed in the green light, the orgastic future that year by year recedes before us.
`fontSizes[6]`	1.75rem	Gatsby believed in the green light, the orgastic future that year by year recedes before us.
`fontSizes[7]`	2rem	Gatsby believed in the green light, the orgastic future that year by year recedes before us.
`fontSizes[8]`	2.25rem	Gatsby believed in the green light, the orgastic future that year by year recedes before us.
`fontSizes[9]`	2.625rem	Gatsby believed in the green light, the orgastic future that year by year recedes before us.
`fontSizes[10]`	3rem	Gatsby believed in the green light, the orgastic future that year by year recedes before us.
`fontSizes[11]`	3.375rem	Gatsby believed in the green light, the orgastic future that year by year recedes before us.
`fontSizes[12]`	3.75rem	Gatsby believed in the green light, the orgastic future that year by year recedes before us.
`fontSizes[13]`	4.25rem	Gatsby believed in the green light, the orgastic future that year by year recedes before us.
`fontSizes[14]`	4.75rem	Gatsby believed in the green light, the orgastic future that year by year recedes before us.
`fontSizes[15]`	5.25rem	Gatsby believed in the green light, the orgastic future that year by year recedes before us.
`fontSizes[16]`	5.75rem	Gatsby believed in the green light, the orgastic future that year by year recedes before us.

Font Weights

Intended for use with the font-weight CSS property.

Token	Value	Example
`fontWeights[body]`	400	Aa
`fontWeights[semiBold]`	600	Aa
`fontWeights[bold]`	700	Aa
`fontWeights[extraBold]`	800	Aa
`fontWeights[heading]`	700	Aa

Letter Spacing

Intended for use with the letter-spacing CSS property.

Token	Value	Example
`letterSpacings.normal`	normal	Gatsby believed in the green light, the orgastic future that year by year recedes before us.
`letterSpacings.tracked`	0.075em	Gatsby believed in the green light, the orgastic future that year by year recedes before us.
`letterSpacings.tight`	-0.015em	Gatsby believed in the green light, the orgastic future that year by year recedes before us.

Line Heights

Intended for use with the line-height CSS property.

Token	Value	Example
`lineHeights.solid`	1	Plugins are packages that extend Gatsby sites. They can source content, transform data, and more!
`lineHeights.dense`	1.25	Plugins are packages that extend Gatsby sites. They can source content, transform data, and more!
`lineHeights.heading`	1.25	Plugins are packages that extend Gatsby sites. They can source content, transform data, and more!
`lineHeights.default`	1.5	Plugins are packages that extend Gatsby sites. They can source content, transform data, and more!
`lineHeights.body`	1.5	Plugins are packages that extend Gatsby sites. They can source content, transform data, and more!
`lineHeights.loose`	1.75	Plugins are packages that extend Gatsby sites. They can source content, transform data, and more!

Breakpoints & Media Queries

For convenience, a mediaQueries scale derived from the breakpoints scale is available.

Token	Value
`breakpoints.0`	400px
`breakpoints.1`	550px
`breakpoints.2`	750px
`breakpoints.3`	1000px
`breakpoints.4`	1200px
`breakpoints.5`	1600px

Token	Value
`mediaQueries.0`
`mediaQueries.1`
`mediaQueries.2`
`mediaQueries.3`
`mediaQueries.4`
`mediaQueries.5`

Colors

Please also see the Colors section for detailed information and accessibility notes.

Token	Hex	Example
`colors.purple.5`	#fcfaff	Aa Example text and color swatch with `color`/`background-color` set to `colors.purple.5`.
`colors.purple.10`	#f6edfa	Aa Example text and color swatch with `color`/`background-color` set to `colors.purple.10`.
`colors.purple.20`	#f1defa	Aa Example text and color swatch with `color`/`background-color` set to `colors.purple.20`.
`colors.purple.30`	#d9bae8	Aa Example text and color swatch with `color`/`background-color` set to `colors.purple.30`.
`colors.purple.40`	#b17acc	Aa Example text and color swatch with `color`/`background-color` set to `colors.purple.40`.
`colors.purple.50`	#8a4baf	Aa Example text and color swatch with `color`/`background-color` set to `colors.purple.50`.
`colors.purple.60`	#663399	Aa Example text and color swatch with `color`/`background-color` set to `colors.purple.60`.
`colors.purple.70`	#542c85	Aa Example text and color swatch with `color`/`background-color` set to `colors.purple.70`.
`colors.purple.80`	#452475	Aa Example text and color swatch with `color`/`background-color` set to `colors.purple.80`.
`colors.purple.90`	#362066	Aa Example text and color swatch with `color`/`background-color` set to `colors.purple.90`.
`colors.orange.5`	#fffcf7	Aa Example text and color swatch with `color`/`background-color` set to `colors.orange.5`.
`colors.orange.10`	#fff4db	Aa Example text and color swatch with `color`/`background-color` set to `colors.orange.10`.
`colors.orange.20`	#ffedbf	Aa Example text and color swatch with `color`/`background-color` set to `colors.orange.20`.
`colors.orange.30`	#ffe4a1	Aa Example text and color swatch with `color`/`background-color` set to `colors.orange.30`.
`colors.orange.40`	#ffd280	Aa Example text and color swatch with `color`/`background-color` set to `colors.orange.40`.
`colors.orange.50`	#ffb238	Aa Example text and color swatch with `color`/`background-color` set to `colors.orange.50`.
`colors.orange.60`	#fb8400	Aa Example text and color swatch with `color`/`background-color` set to `colors.orange.60`.
`colors.orange.70`	#f67300	Aa Example text and color swatch with `color`/`background-color` set to `colors.orange.70`.
`colors.orange.80`	#e65800	Aa Example text and color swatch with `color`/`background-color` set to `colors.orange.80`.
`colors.orange.90`	#db3a00	Aa Example text and color swatch with `color`/`background-color` set to `colors.orange.90`.
`colors.yellow.5`	#fffdf7	Aa Example text and color swatch with `color`/`background-color` set to `colors.yellow.5`.
`colors.yellow.10`	#fff5bf	Aa Example text and color swatch with `color`/`background-color` set to `colors.yellow.10`.
`colors.yellow.20`	#fff2a8	Aa Example text and color swatch with `color`/`background-color` set to `colors.yellow.20`.
`colors.yellow.30`	#ffeb99	Aa Example text and color swatch with `color`/`background-color` set to `colors.yellow.30`.
`colors.yellow.40`	#ffdf37	Aa Example text and color swatch with `color`/`background-color` set to `colors.yellow.40`.
`colors.yellow.50`	#fed038	Aa Example text and color swatch with `color`/`background-color` set to `colors.yellow.50`.
`colors.yellow.60`	#fec21e	Aa Example text and color swatch with `color`/`background-color` set to `colors.yellow.60`.
`colors.yellow.70`	#e3a617	Aa Example text and color swatch with `color`/`background-color` set to `colors.yellow.70`.
`colors.yellow.80`	#bf9141	Aa Example text and color swatch with `color`/`background-color` set to `colors.yellow.80`.
`colors.yellow.90`	#8a6534	Aa Example text and color swatch with `color`/`background-color` set to `colors.yellow.90`.
`colors.red.5`	#fffafa	Aa Example text and color swatch with `color`/`background-color` set to `colors.red.5`.
`colors.red.10`	#fde7e7	Aa Example text and color swatch with `color`/`background-color` set to `colors.red.10`.
`colors.red.20`	#ffbab8	Aa Example text and color swatch with `color`/`background-color` set to `colors.red.20`.
`colors.red.30`	#ff8885	Aa Example text and color swatch with `color`/`background-color` set to `colors.red.30`.
`colors.red.40`	#ff5a54	Aa Example text and color swatch with `color`/`background-color` set to `colors.red.40`.
`colors.red.50`	#fa2915	Aa Example text and color swatch with `color`/`background-color` set to `colors.red.50`.
`colors.red.60`	#ec1818	Aa Example text and color swatch with `color`/`background-color` set to `colors.red.60`.
`colors.red.70`	#da0013	Aa Example text and color swatch with `color`/`background-color` set to `colors.red.70`.
`colors.red.80`	#ce0009	Aa Example text and color swatch with `color`/`background-color` set to `colors.red.80`.
`colors.red.90`	#b80000	Aa Example text and color swatch with `color`/`background-color` set to `colors.red.90`.
`colors.magenta.5`	#fffafd	Aa Example text and color swatch with `color`/`background-color` set to `colors.magenta.5`.
`colors.magenta.10`	#ffe6f6	Aa Example text and color swatch with `color`/`background-color` set to `colors.magenta.10`.
`colors.magenta.20`	#f2c4e3	Aa Example text and color swatch with `color`/`background-color` set to `colors.magenta.20`.
`colors.magenta.30`	#e899ce	Aa Example text and color swatch with `color`/`background-color` set to `colors.magenta.30`.
`colors.magenta.40`	#d459ab	Aa Example text and color swatch with `color`/`background-color` set to `colors.magenta.40`.
`colors.magenta.50`	#bc027f	Aa Example text and color swatch with `color`/`background-color` set to `colors.magenta.50`.
`colors.magenta.60`	#a6026a	Aa Example text and color swatch with `color`/`background-color` set to `colors.magenta.60`.
`colors.magenta.70`	#940159	Aa Example text and color swatch with `color`/`background-color` set to `colors.magenta.70`.
`colors.magenta.80`	#7d0e59	Aa Example text and color swatch with `color`/`background-color` set to `colors.magenta.80`.
`colors.magenta.90`	#690147	Aa Example text and color swatch with `color`/`background-color` set to `colors.magenta.90`.
`colors.blue.5`	#f5fcff	Aa Example text and color swatch with `color`/`background-color` set to `colors.blue.5`.
`colors.blue.10`	#dbf0ff	Aa Example text and color swatch with `color`/`background-color` set to `colors.blue.10`.
`colors.blue.20`	#90cdf9	Aa Example text and color swatch with `color`/`background-color` set to `colors.blue.20`.
`colors.blue.30`	#63b8f6	Aa Example text and color swatch with `color`/`background-color` set to `colors.blue.30`.
`colors.blue.40`	#3fa9f5	Aa Example text and color swatch with `color`/`background-color` set to `colors.blue.40`.
`colors.blue.50`	#0d96f2	Aa Example text and color swatch with `color`/`background-color` set to `colors.blue.50`.
`colors.blue.60`	#0e8de6	Aa Example text and color swatch with `color`/`background-color` set to `colors.blue.60`.
`colors.blue.70`	#047bd3	Aa Example text and color swatch with `color`/`background-color` set to `colors.blue.70`.
`colors.blue.80`	#006ac1	Aa Example text and color swatch with `color`/`background-color` set to `colors.blue.80`.
`colors.blue.90`	#004ca3	Aa Example text and color swatch with `color`/`background-color` set to `colors.blue.90`.
`colors.teal.5`	#f7ffff	Aa Example text and color swatch with `color`/`background-color` set to `colors.teal.5`.
`colors.teal.10`	#dcfffd	Aa Example text and color swatch with `color`/`background-color` set to `colors.teal.10`.
`colors.teal.20`	#ccfffc	Aa Example text and color swatch with `color`/`background-color` set to `colors.teal.20`.
`colors.teal.30`	#a6fffa	Aa Example text and color swatch with `color`/`background-color` set to `colors.teal.30`.
`colors.teal.40`	#73fff7	Aa Example text and color swatch with `color`/`background-color` set to `colors.teal.40`.
`colors.teal.50`	#05f7f4	Aa Example text and color swatch with `color`/`background-color` set to `colors.teal.50`.
`colors.teal.60`	#2de3da	Aa Example text and color swatch with `color`/`background-color` set to `colors.teal.60`.
`colors.teal.70`	#00bdb6	Aa Example text and color swatch with `color`/`background-color` set to `colors.teal.70`.
`colors.teal.80`	#10a39e	Aa Example text and color swatch with `color`/`background-color` set to `colors.teal.80`.
`colors.teal.90`	#008577	Aa Example text and color swatch with `color`/`background-color` set to `colors.teal.90`.
`colors.green.5`	#f7fdf7	Aa Example text and color swatch with `color`/`background-color` set to `colors.green.5`.
`colors.green.10`	#def5dc	Aa Example text and color swatch with `color`/`background-color` set to `colors.green.10`.
`colors.green.20`	#a1da9e	Aa Example text and color swatch with `color`/`background-color` set to `colors.green.20`.
`colors.green.30`	#79cd75	Aa Example text and color swatch with `color`/`background-color` set to `colors.green.30`.
`colors.green.40`	#59c156	Aa Example text and color swatch with `color`/`background-color` set to `colors.green.40`.
`colors.green.50`	#37b635	Aa Example text and color swatch with `color`/`background-color` set to `colors.green.50`.
`colors.green.60`	#2ca72c	Aa Example text and color swatch with `color`/`background-color` set to `colors.green.60`.
`colors.green.70`	#1d9520	Aa Example text and color swatch with `color`/`background-color` set to `colors.green.70`.
`colors.green.80`	#088413	Aa Example text and color swatch with `color`/`background-color` set to `colors.green.80`.
`colors.green.90`	#006500	Aa Example text and color swatch with `color`/`background-color` set to `colors.green.90`.
`colors.grey.5`	#fbfbfb	Aa Example text and color swatch with `color`/`background-color` set to `colors.grey.5`.
`colors.grey.10`	#f5f5f5	Aa Example text and color swatch with `color`/`background-color` set to `colors.grey.10`.
`colors.grey.20`	#f0f0f2	Aa Example text and color swatch with `color`/`background-color` set to `colors.grey.20`.
`colors.grey.30`	#d9d7e0	Aa Example text and color swatch with `color`/`background-color` set to `colors.grey.30`.
`colors.grey.40`	#b7b5bd	Aa Example text and color swatch with `color`/`background-color` set to `colors.grey.40`.
`colors.grey.50`	#78757a	Aa Example text and color swatch with `color`/`background-color` set to `colors.grey.50`.
`colors.grey.60`	#635e69	Aa Example text and color swatch with `color`/`background-color` set to `colors.grey.60`.
`colors.grey.70`	#48434f	Aa Example text and color swatch with `color`/`background-color` set to `colors.grey.70`.
`colors.grey.80`	#36313d	Aa Example text and color swatch with `color`/`background-color` set to `colors.grey.80`.
`colors.grey.90`	#232129	Aa Example text and color swatch with `color`/`background-color` set to `colors.grey.90`.
`colors.white`	#ffffff	Aa Example text and color swatch with `color`/`background-color` set to `colors.white`.
`colors.black`	#000000	Aa Example text and color swatch with `color`/`background-color` set to `colors.black`.
`colors.gatsby`	#663399	Aa Example text and color swatch with `color`/`background-color` set to `colors.gatsby`.
`colors.lilac`	#8a4baf	Aa Example text and color swatch with `color`/`background-color` set to `colors.lilac`.
`colors.lavender`	#f1defa	Aa Example text and color swatch with `color`/`background-color` set to `colors.lavender`.
`colors.accent`	#fb8400	Aa Example text and color swatch with `color`/`background-color` set to `colors.accent`.
`colors.warning`	#da0013	Aa Example text and color swatch with `color`/`background-color` set to `colors.warning`.
`colors.blackFade.5`	rgba(35, 33, 41, 0.05)	Aa Example text and color swatch with `color`/`background-color` set to `colors.blackFade.5`.
`colors.blackFade.10`	rgba(35, 33, 41, 0.1)	Aa Example text and color swatch with `color`/`background-color` set to `colors.blackFade.10`.
`colors.blackFade.20`	rgba(35, 33, 41, 0.2)	Aa Example text and color swatch with `color`/`background-color` set to `colors.blackFade.20`.
`colors.blackFade.30`	rgba(35, 33, 41, 0.3)	Aa Example text and color swatch with `color`/`background-color` set to `colors.blackFade.30`.
`colors.blackFade.40`	rgba(35, 33, 41, 0.4)	Aa Example text and color swatch with `color`/`background-color` set to `colors.blackFade.40`.
`colors.blackFade.50`	rgba(35, 33, 41, 0.5)	Aa Example text and color swatch with `color`/`background-color` set to `colors.blackFade.50`.
`colors.blackFade.60`	rgba(35, 33, 41, 0.6)	Aa Example text and color swatch with `color`/`background-color` set to `colors.blackFade.60`.
`colors.blackFade.70`	rgba(35, 33, 41, 0.7)	Aa Example text and color swatch with `color`/`background-color` set to `colors.blackFade.70`.
`colors.blackFade.80`	rgba(35, 33, 41, 0.8)	Aa Example text and color swatch with `color`/`background-color` set to `colors.blackFade.80`.
`colors.blackFade.90`	rgba(35, 33, 41, 0.9)	Aa Example text and color swatch with `color`/`background-color` set to `colors.blackFade.90`.
`colors.whiteFade.5`	rgba(255, 255, 255, 0.05)	Aa Example text and color swatch with `color`/`background-color` set to `colors.whiteFade.5`.
`colors.whiteFade.10`	rgba(255, 255, 255, 0.1)	Aa Example text and color swatch with `color`/`background-color` set to `colors.whiteFade.10`.
`colors.whiteFade.20`	rgba(255, 255, 255, 0.2)	Aa Example text and color swatch with `color`/`background-color` set to `colors.whiteFade.20`.
`colors.whiteFade.30`	rgba(255, 255, 255, 0.3)	Aa Example text and color swatch with `color`/`background-color` set to `colors.whiteFade.30`.
`colors.whiteFade.40`	rgba(255, 255, 255, 0.4)	Aa Example text and color swatch with `color`/`background-color` set to `colors.whiteFade.40`.
`colors.whiteFade.50`	rgba(255, 255, 255, 0.5)	Aa Example text and color swatch with `color`/`background-color` set to `colors.whiteFade.50`.
`colors.whiteFade.60`	rgba(255, 255, 255, 0.6)	Aa Example text and color swatch with `color`/`background-color` set to `colors.whiteFade.60`.
`colors.whiteFade.70`	rgba(255, 255, 255, 0.7)	Aa Example text and color swatch with `color`/`background-color` set to `colors.whiteFade.70`.
`colors.whiteFade.80`	rgba(255, 255, 255, 0.8)	Aa Example text and color swatch with `color`/`background-color` set to `colors.whiteFade.80`.
`colors.whiteFade.90`	rgba(255, 255, 255, 0.9)	Aa Example text and color swatch with `color`/`background-color` set to `colors.whiteFade.90`.
`colors.ui.background`	#fbfbfb	Aa Example text and color swatch with `color`/`background-color` set to `colors.ui.background`.
`colors.ui.hover`	#fcfaff	Aa Example text and color swatch with `color`/`background-color` set to `colors.ui.hover`.
`colors.ui.border`	#f0f0f2	Aa Example text and color swatch with `color`/`background-color` set to `colors.ui.border`.
`colors.link.color`	#8a4baf	Aa Example text and color swatch with `color`/`background-color` set to `colors.link.color`.
`colors.link.border`	#d9bae8	Aa Example text and color swatch with `color`/`background-color` set to `colors.link.border`.
`colors.link.hoverBorder`	#8a4baf	Aa Example text and color swatch with `color`/`background-color` set to `colors.link.hoverBorder`.
`colors.link.hoverColor`	#663399	Aa Example text and color swatch with `color`/`background-color` set to `colors.link.hoverColor`.
`colors.text`	#36313d	Aa Example text and color swatch with `color`/`background-color` set to `colors.text`.
`colors.input.background`	#ffffff	Aa Example text and color swatch with `color`/`background-color` set to `colors.input.background`.
`colors.input.backgroundFocus`	#ffffff	Aa Example text and color swatch with `color`/`background-color` set to `colors.input.backgroundFocus`.
`colors.input.border`	#d9d7e0	Aa Example text and color swatch with `color`/`background-color` set to `colors.input.border`.
`colors.input.focusBorder`	#ffffff	Aa Example text and color swatch with `color`/`background-color` set to `colors.input.focusBorder`.
`colors.input.focusBoxShadow`	#663399	Aa Example text and color swatch with `color`/`background-color` set to `colors.input.focusBoxShadow`.
`colors.input.icon`	#78757a	Aa Example text and color swatch with `color`/`background-color` set to `colors.input.icon`.
`colors.input.iconFocus`	#635e69	Aa Example text and color swatch with `color`/`background-color` set to `colors.input.iconFocus`.
`colors.input.placeholder`		Aa Example text and color swatch with `color`/`background-color` set to `colors.input.placeholder`.
`colors.code.bgInline`	#fbf2e9	Aa Example text and color swatch with `color`/`background-color` set to `colors.code.bgInline`.
`colors.code.bg`	#fdfaf6	Aa Example text and color swatch with `color`/`background-color` set to `colors.code.bg`.
`colors.code.border`	#faede5	Aa Example text and color swatch with `color`/`background-color` set to `colors.code.border`.
`colors.code.text`	#866c5b	Aa Example text and color swatch with `color`/`background-color` set to `colors.code.text`.
`colors.code.remove`	#da0013	Aa Example text and color swatch with `color`/`background-color` set to `colors.code.remove`.
`colors.code.add`	#088413	Aa Example text and color swatch with `color`/`background-color` set to `colors.code.add`.
`colors.code.selector`	#b94185	Aa Example text and color swatch with `color`/`background-color` set to `colors.code.selector`.
`colors.code.tag`	#137886	Aa Example text and color swatch with `color`/`background-color` set to `colors.code.tag`.
`colors.code.keyword`	#096fb3	Aa Example text and color swatch with `color`/`background-color` set to `colors.code.keyword`.
`colors.code.comment`	#527713	Aa Example text and color swatch with `color`/`background-color` set to `colors.code.comment`.
`colors.code.punctuation`	#53450e	Aa Example text and color swatch with `color`/`background-color` set to `colors.code.punctuation`.
`colors.code.regex`	#dc0437	Aa Example text and color swatch with `color`/`background-color` set to `colors.code.regex`.
`colors.code.cssString`	#a2466c	Aa Example text and color swatch with `color`/`background-color` set to `colors.code.cssString`.
`colors.code.invisibles`	#e0d7d1	Aa Example text and color swatch with `color`/`background-color` set to `colors.code.invisibles`.
`colors.code.scrollbarThumb`	#f4d1c6	Aa Example text and color swatch with `color`/`background-color` set to `colors.code.scrollbarThumb`.
`colors.code.lineHighlightBorder`	#f1beb6	Aa Example text and color swatch with `color`/`background-color` set to `colors.code.lineHighlightBorder`.
`colors.code.copyButton`	#635e69	Aa Example text and color swatch with `color`/`background-color` set to `colors.code.copyButton`.
`colors.code.lineHighlightBackground`	#fbf0ea	Aa Example text and color swatch with `color`/`background-color` set to `colors.code.lineHighlightBackground`.
`colors.code.scrollbarTrack`	#faede5	Aa Example text and color swatch with `color`/`background-color` set to `colors.code.scrollbarTrack`.
`colors.background`	#ffffff	Aa Example text and color swatch with `color`/`background-color` set to `colors.background`.
`colors.primary`	#663399	Aa Example text and color swatch with `color`/`background-color` set to `colors.primary`.
`colors.secondary`	#b17acc	Aa Example text and color swatch with `color`/`background-color` set to `colors.secondary`.
`colors.muted`	#fbfbfb	Aa Example text and color swatch with `color`/`background-color` set to `colors.muted`.
`colors.heading`	#000000	Aa Example text and color swatch with `color`/`background-color` set to `colors.heading`.
`colors.textMuted`	#78757a	Aa Example text and color swatch with `color`/`background-color` set to `colors.textMuted`.
`colors.banner`	#542c85	Aa Example text and color swatch with `color`/`background-color` set to `colors.banner`.
`colors.icon.dark`	#663399	Aa Example text and color swatch with `color`/`background-color` set to `colors.icon.dark`.
`colors.icon.neutral`	#78757a	Aa Example text and color swatch with `color`/`background-color` set to `colors.icon.neutral`.
`colors.icon.neutralLight`	#d9d7e0	Aa Example text and color swatch with `color`/`background-color` set to `colors.icon.neutralLight`.
`colors.icon.background`	#ffffff	Aa Example text and color swatch with `color`/`background-color` set to `colors.icon.background`.
`colors.icon.accent`	#fec21e	Aa Example text and color swatch with `color`/`background-color` set to `colors.icon.accent`.
`colors.icon.light`	#f6edfa	Aa Example text and color swatch with `color`/`background-color` set to `colors.icon.light`.
`colors.icon.lightActive`	#f1defa	Aa Example text and color swatch with `color`/`background-color` set to `colors.icon.lightActive`.
`colors.card.background`	#ffffff	Aa Example text and color swatch with `color`/`background-color` set to `colors.card.background`.
`colors.card.color`	#78757a	Aa Example text and color swatch with `color`/`background-color` set to `colors.card.color`.
`colors.card.header`	#000000	Aa Example text and color swatch with `color`/`background-color` set to `colors.card.header`.
`colors.card.starterLabelBackground`	#f7ffff	Aa Example text and color swatch with `color`/`background-color` set to `colors.card.starterLabelBackground`.
`colors.card.starterLabelText`	#00bdb6	Aa Example text and color swatch with `color`/`background-color` set to `colors.card.starterLabelText`.
`colors.card.pluginLabelBackground`	#fffcf7	Aa Example text and color swatch with `color`/`background-color` set to `colors.card.pluginLabelBackground`.
`colors.card.pluginLabelText`	#db3a00	Aa Example text and color swatch with `color`/`background-color` set to `colors.card.pluginLabelText`.
`colors.modal.background`	#ffffff	Aa Example text and color swatch with `color`/`background-color` set to `colors.modal.background`.
`colors.modal.overlayBackground`	rgba(255,255,255,0.95)	Aa Example text and color swatch with `color`/`background-color` set to `colors.modal.overlayBackground`.
`colors.navigation.background`	rgba(255,255,255,0.985)	Aa Example text and color swatch with `color`/`background-color` set to `colors.navigation.background`.
`colors.navigation.linkDefault`	#48434f	Aa Example text and color swatch with `color`/`background-color` set to `colors.navigation.linkDefault`.
`colors.navigation.linkActive`	#8a4baf	Aa Example text and color swatch with `color`/`background-color` set to `colors.navigation.linkActive`.
`colors.navigation.linkHover`	#663399	Aa Example text and color swatch with `color`/`background-color` set to `colors.navigation.linkHover`.
`colors.navigation.socialLink`	#b7b5bd	Aa Example text and color swatch with `color`/`background-color` set to `colors.navigation.socialLink`.
`colors.search.suggestionHighlightBackground`	#f1defa	Aa Example text and color swatch with `color`/`background-color` set to `colors.search.suggestionHighlightBackground`.
`colors.search.suggestionHighlightColor`	#663399	Aa Example text and color swatch with `color`/`background-color` set to `colors.search.suggestionHighlightColor`.
`colors.sidebar.itemHoverBackground`	rgba(241,222,250,0.275)	Aa Example text and color swatch with `color`/`background-color` set to `colors.sidebar.itemHoverBackground`.
`colors.sidebar.itemBackgroundActive`	transparent	Aa Example text and color swatch with `color`/`background-color` set to `colors.sidebar.itemBackgroundActive`.
`colors.sidebar.itemBorderColor`	transparent	Aa Example text and color swatch with `color`/`background-color` set to `colors.sidebar.itemBorderColor`.
`colors.sidebar.activeSectionBackground`	rgba(241,222,250,0.15)	Aa Example text and color swatch with `color`/`background-color` set to `colors.sidebar.activeSectionBackground`.
`colors.sidebar.itemBorderActive`	#f6edfa	Aa Example text and color swatch with `color`/`background-color` set to `colors.sidebar.itemBorderActive`.
`colors.themedInput.background`	#f5f5f5	Aa Example text and color swatch with `color`/`background-color` set to `colors.themedInput.background`.
`colors.themedInput.backgroundFocus`	#ffffff	Aa Example text and color swatch with `color`/`background-color` set to `colors.themedInput.backgroundFocus`.
`colors.themedInput.focusBorder`	#663399	Aa Example text and color swatch with `color`/`background-color` set to `colors.themedInput.focusBorder`.
`colors.themedInput.focusBoxShadow`	#d9bae8	Aa Example text and color swatch with `color`/`background-color` set to `colors.themedInput.focusBoxShadow`.
`colors.themedInput.icon`	#78757a	Aa Example text and color swatch with `color`/`background-color` set to `colors.themedInput.icon`.
`colors.themedInput.iconFocus`	#635e69	Aa Example text and color swatch with `color`/`background-color` set to `colors.themedInput.iconFocus`.
`colors.themedInput.placeholder`	#635e69	Aa Example text and color swatch with `color`/`background-color` set to `colors.themedInput.placeholder`.
`colors.widget.border`	#f5f5f5	Aa Example text and color swatch with `color`/`background-color` set to `colors.widget.border`.
`colors.widget.background`	#ffffff	Aa Example text and color swatch with `color`/`background-color` set to `colors.widget.background`.
`colors.widget.color`		Aa Example text and color swatch with `color`/`background-color` set to `colors.widget.color`.
`colors.highlightedBox.background`	#fff5bf	Aa Example text and color swatch with `color`/`background-color` set to `colors.highlightedBox.background`.
`colors.highlightedBox.color`	#36313d	Aa Example text and color swatch with `color`/`background-color` set to `colors.highlightedBox.color`.
`colors.newsletter.background`	#ffffff	Aa Example text and color swatch with `color`/`background-color` set to `colors.newsletter.background`.
`colors.newsletter.border`	#f5f5f5	Aa Example text and color swatch with `color`/`background-color` set to `colors.newsletter.border`.
`colors.newsletter.heading`	#48434f	Aa Example text and color swatch with `color`/`background-color` set to `colors.newsletter.heading`.
`colors.newsletter.stripeColorA`	#ff5a54	Aa Example text and color swatch with `color`/`background-color` set to `colors.newsletter.stripeColorA`.
`colors.newsletter.stripeColorB`	#3fa9f5	Aa Example text and color swatch with `color`/`background-color` set to `colors.newsletter.stripeColorB`.
`colors.button.primaryBg`	#663399	Aa Example text and color swatch with `color`/`background-color` set to `colors.button.primaryBg`.
`colors.button.primaryText`	#ffffff	Aa Example text and color swatch with `color`/`background-color` set to `colors.button.primaryText`.
`colors.button.primaryBorder`	#663399	Aa Example text and color swatch with `color`/`background-color` set to `colors.button.primaryBorder`.
`colors.button.secondaryBg`	transparent	Aa Example text and color swatch with `color`/`background-color` set to `colors.button.secondaryBg`.
`colors.button.secondaryText`	#8a4baf	Aa Example text and color swatch with `color`/`background-color` set to `colors.button.secondaryText`.
`colors.button.secondaryBorder`	#b17acc	Aa Example text and color swatch with `color`/`background-color` set to `colors.button.secondaryBorder`.
`colors.pullquote.color`	#663399	Aa Example text and color swatch with `color`/`background-color` set to `colors.pullquote.color`.
`colors.pullquote.borderColor`	#f1defa	Aa Example text and color swatch with `color`/`background-color` set to `colors.pullquote.borderColor`.
`colors.modes.dark`		Aa Example text and color swatch with `color`/`background-color` set to `colors.modes.dark`.

Transition

Intended to be used with the transition CSS property.

Token	Value
`transition.curve.default`	cubic-bezier(0.4, 0, 0.2, 1)
`transition.curve.fastOutLinearIn`	cubic-bezier(0.4, 0, 1, 1)
`transition.speed.faster`	50ms
`transition.speed.fast`	100ms
`transition.speed.default`	250ms
`transition.speed.slow`	500ms
`transition.speed.slower`	1000ms