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