Skip to main content

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.

TokenrempxExample
space[0]00
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.254
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.58
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.7512
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]116
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.2520
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.524
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]232
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.540
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]348
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.556
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]464
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.572
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.

TokenValue
zIndices.widget2
zIndices.navigation5
zIndices.banner10
zIndices.modal10
zIndices.sidebar10
zIndices.floatingActionButton20
zIndices.skipLink100

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.

TokenpxExample
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.

TokenValueExample
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.headingFutura 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.monospaceSFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
ABC
fonts.serifGeorgia, Times New Roman, Times, serif
ABC

Font Sizes

Intended for use with the font-size CSS property.

TokenValueExample
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.

TokenValueExample
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.

TokenValueExample
letterSpacings.normalnormal
Gatsby believed in the green light, the orgastic future that year by year recedes before us.
letterSpacings.tracked0.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.

TokenValueExample
lineHeights.solid1
Plugins are packages that extend Gatsby sites. They can source content, transform data, and more!
lineHeights.dense1.25
Plugins are packages that extend Gatsby sites. They can source content, transform data, and more!
lineHeights.heading1.25
Plugins are packages that extend Gatsby sites. They can source content, transform data, and more!
lineHeights.default1.5
Plugins are packages that extend Gatsby sites. They can source content, transform data, and more!
lineHeights.body1.5
Plugins are packages that extend Gatsby sites. They can source content, transform data, and more!
lineHeights.loose1.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.

TokenValue
breakpoints.0400px
breakpoints.1550px
breakpoints.2750px
breakpoints.31000px
breakpoints.41200px
breakpoints.51600px
TokenValue
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.

TokenHexExample
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.5rgba(35, 33, 41, 0.05)
Aa
Example text and color swatch with color/background-color set to colors.blackFade.5.
colors.blackFade.10rgba(35, 33, 41, 0.1)
Aa
Example text and color swatch with color/background-color set to colors.blackFade.10.
colors.blackFade.20rgba(35, 33, 41, 0.2)
Aa
Example text and color swatch with color/background-color set to colors.blackFade.20.
colors.blackFade.30rgba(35, 33, 41, 0.3)
Aa
Example text and color swatch with color/background-color set to colors.blackFade.30.
colors.blackFade.40rgba(35, 33, 41, 0.4)
Aa
Example text and color swatch with color/background-color set to colors.blackFade.40.
colors.blackFade.50rgba(35, 33, 41, 0.5)
Aa
Example text and color swatch with color/background-color set to colors.blackFade.50.
colors.blackFade.60rgba(35, 33, 41, 0.6)
Aa
Example text and color swatch with color/background-color set to colors.blackFade.60.
colors.blackFade.70rgba(35, 33, 41, 0.7)
Aa
Example text and color swatch with color/background-color set to colors.blackFade.70.
colors.blackFade.80rgba(35, 33, 41, 0.8)
Aa
Example text and color swatch with color/background-color set to colors.blackFade.80.
colors.blackFade.90rgba(35, 33, 41, 0.9)
Aa
Example text and color swatch with color/background-color set to colors.blackFade.90.
colors.whiteFade.5rgba(255, 255, 255, 0.05)
Aa
Example text and color swatch with color/background-color set to colors.whiteFade.5.
colors.whiteFade.10rgba(255, 255, 255, 0.1)
Aa
Example text and color swatch with color/background-color set to colors.whiteFade.10.
colors.whiteFade.20rgba(255, 255, 255, 0.2)
Aa
Example text and color swatch with color/background-color set to colors.whiteFade.20.
colors.whiteFade.30rgba(255, 255, 255, 0.3)
Aa
Example text and color swatch with color/background-color set to colors.whiteFade.30.
colors.whiteFade.40rgba(255, 255, 255, 0.4)
Aa
Example text and color swatch with color/background-color set to colors.whiteFade.40.
colors.whiteFade.50rgba(255, 255, 255, 0.5)
Aa
Example text and color swatch with color/background-color set to colors.whiteFade.50.
colors.whiteFade.60rgba(255, 255, 255, 0.6)
Aa
Example text and color swatch with color/background-color set to colors.whiteFade.60.
colors.whiteFade.70rgba(255, 255, 255, 0.7)
Aa
Example text and color swatch with color/background-color set to colors.whiteFade.70.
colors.whiteFade.80rgba(255, 255, 255, 0.8)
Aa
Example text and color swatch with color/background-color set to colors.whiteFade.80.
colors.whiteFade.90rgba(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.overlayBackgroundrgba(255,255,255,0.95)
Aa
Example text and color swatch with color/background-color set to colors.modal.overlayBackground.
colors.navigation.backgroundrgba(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.itemHoverBackgroundrgba(241,222,250,0.275)
Aa
Example text and color swatch with color/background-color set to colors.sidebar.itemHoverBackground.
colors.sidebar.itemBackgroundActivetransparent
Aa
Example text and color swatch with color/background-color set to colors.sidebar.itemBackgroundActive.
colors.sidebar.itemBorderColortransparent
Aa
Example text and color swatch with color/background-color set to colors.sidebar.itemBorderColor.
colors.sidebar.activeSectionBackgroundrgba(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.secondaryBgtransparent
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.

TokenValue
transition.curve.defaultcubic-bezier(0.4, 0, 0.2, 1)
transition.curve.fastOutLinearIncubic-bezier(0.4, 0, 1, 1)
transition.speed.faster50ms
transition.speed.fast100ms
transition.speed.default250ms
transition.speed.slow500ms
transition.speed.slower1000ms
Docs
Tutorials
Plugins
Blog
Showcase