All available Tokens
This is the complete set of official DataCamp design tokens. Ideally, when you do not need to support theming, these are the only values you would need to use in the DataCamp project, when creating custom components.
Colors
Functionally use color to show intent. It's great to have the content not only beautiful but also usable.
For text, usually use navy
or navySubtleTextOnLight
color to achieve the best contrast against light backgrounds, and white
or navySubtleTextOnDark
for dark backgrounds. We recommend using subtle for supporting copy, and normal for text heavy content. There are also a few special colors defined to be used for text only, e.g. redDarkText
. Always take accessibility into account and test text and background color contrast to meet WCAG 2.1 level AA accessibility requirements. There are various tools available to do so. Waffles also offers readableHexColor helper, which automatically picks the right readable color.
For backgrounds, mainly use greySubtle
, white
and on rare occasions navy
. For smaller UI elements, typically greyLight
or grey
should be used.
For accessibility hints, such as focus style, use blueDark
.
For hover colors, usually use grey06
and white06
.
For active style, use grey10
and white10
.
For border colors, use grey15
and white15
.
Helpers
There are a few helpers available in Waffles for advanced colors adjustments. They are very useful for defining mouse over styles, where opacity or lightness of color must be tweaked.
Name | Value | Example |
---|---|---|
beige | #EFEBE4 | |
beigeLight | #F7F3EB | |
beigeMedium | #E5E1DA | |
beigeSubtle | #FFFBF3 | |
blue | #5EB1FF | |
blue20 | rgba(94, 177, 225, 0.2) | |
blueDark | #257DFE | |
blueDarkText | #0065D1 | |
blueLight | #72E5FE | |
brandFacebook | #1778F2 | |
brandGoogle | #DB4437 | |
brandLinkedIn | #0A66C2 | |
brandTwitter | #00ACEE | |
green | #03EF62 | |
green10 | rgba(3, 239, 98, 0.1) | |
green20 | rgba(3, 239, 98, 0.2) | |
greenDark | #00C74E | |
greenDarkText | #008031 | |
greenLight | #65FF8F | |
grey | #E8E8EE | |
grey6 | rgba(48, 57, 105, 0.06) | |
grey10 | rgba(48, 57, 105, 0.1) | |
grey15 | rgba(48, 57, 105, 0.15) | |
grey20 | rgba(48, 57, 105, 0.2) | |
grey30 | rgba(48, 57, 105, 0.3) | |
grey60 | rgba(48, 57, 105, 0.6) | |
greyDark | #848492 | |
greyDarkText | #595D78 | |
greyLight | #EFEFF5 | |
greyMedium | #E1E1E8 | |
greySubtle | #F7F7FC | |
navy | #05192D | |
navy70 | rgba(5, 25, 45, 0.7) | |
navyDark | #000820 | |
navyLight | #213147 | |
navyMedium | #13253A | |
navySubtleTextOnDark | #9BA3AB | |
navySubtleTextOnLight | #5D6A77 | |
orange | #FF931E | |
orange20 | rgba(255, 188, 75, 0.2) | |
orangeDark | #D87300 | |
orangeDarkText | #B75900 | |
orangeLight | #FFBC4B | |
pink | #FF6EA9 | |
pinkDark | #DC4D8B | |
pinkDarkText | #BF3072 | |
pinkLight | #FF95CF | |
purple | #7933FF | |
purple10 | rgba(121, 51, 255, 0.1) | |
purple20 | rgba(121, 51, 255, 0.2) | |
purpleDark | #5646A5 | |
purpleDarkText | #5646A5 | |
purpleLight | #A781FF | |
red | #FF5400 | |
red10 | rgba(255, 84, 0, 0.1) | |
red20 | rgba(255, 84, 0, 0.2) | |
redDark | #DD3400 | |
redDarkText | #C01100 | |
redLight | #FF782D | |
transparentGrey | rgba(48, 57, 105, 0.15) | |
transparentGreySoft | rgba(48, 57, 105, 0.1) | |
transparentGreySubtle | rgba(48, 57, 105, 0.06) | |
transparentWhite | rgba(255, 255, 255, 0.15) | |
transparentWhiteSoft | rgba(255, 255, 255, 0.1) | |
transparentWhiteSubtle | rgba(255, 255, 255, 0.06) | |
white | #FFFFFF | |
white6 | rgba(255, 255, 255, 0.06) | |
white10 | rgba(255, 255, 255, 0.1) | |
white15 | rgba(255, 255, 255, 0.15) | |
white20 | rgba(255, 255, 255, 0.2) | |
white30 | rgba(255, 255, 255, 0.3) | |
white60 | rgba(255, 255, 255, 0.6) | |
yellow | #FCCE0D | |
yellowDark | #CFA600 | |
yellowDarkText | #956A01 | |
yellowLight | #FFEC3C |
Sizing
Use for both width and height of the action elements, such as buttons.
Name | Value | Example |
---|---|---|
large | 48px | |
medium | 36px | |
small | 28px |
Spacing
Use for padding, margins, and position coordinates.
For closely related elements in the same component, such as title and tab line, use xsmall
.
For linked elements within the same components use small
, e.g icon and the label. Should be used as main spacing between buttons.
The most common spacing is medium
, which is used for:
- horizontal and vertical spacing between different cards
- padding inside a card
- space between distinct elements in the same component, e.g. title and progress bar
For components where medium
is too dense use large
. Should never be used as a spacing between sections.
For spacing between sections or between components that are not directly linked use xlarge
.
Name | Value | Example |
---|---|---|
large | 24px | |
medium | 16px | |
small | 8px | |
xlarge | 32px | |
xsmall | 4px | |
xxlarge | 64px |
Border width
Use to define element border thickness.
Name | Value | Example |
---|---|---|
medium | 2px | |
thick | 3px | |
thin | 1px | |
xthick | 4px |
Border radius
Use to define element corner roundness.
Name | Value | Example |
---|---|---|
circle | 50% | |
medium | 4px |
Box shadow
Use to show drop shadow beneath element.
Name | Value | Example |
---|---|---|
medium | 0px 1px 4px -1px rgba(5, 25, 45, 0.3) | |
thick | 0px 3px 5px -1px rgba(5, 25, 45, 0.3) | |
thin | 0px 0px 2px 0px rgba(5, 25, 45, 0.3) | |
xthick | 0px 8px 12px -4px rgba(5, 25, 45, 0.3) |
Font families
For regular text use sansSerif
, and for code samples mono
.
Name | Value | Example |
---|---|---|
mono | JetBrainsMonoNL, Menlo, Monaco, 'Courier New', monospace | The quick brown fox jumps over the lazy dog. |
sansSerif | Studio-Feixen-Sans, Arial, sans-serif | The quick brown fox jumps over the lazy dog. |
Font sizes
Use to define font size. For regular text use medium
.
Name | Value | Example |
---|---|---|
huge | 28px | The quick brown fox jumps over the lazy dog. |
large | 16px | The quick brown fox jumps over the lazy dog. |
medium | 14px | The quick brown fox jumps over the lazy dog. |
small | 12px | The quick brown fox jumps over the lazy dog. |
xlarge | 18px | The quick brown fox jumps over the lazy dog. |
xsmall | 10px | The quick brown fox jumps over the lazy dog. |
xxlarge | 20px | The quick brown fox jumps over the lazy dog. |
Font weights
Use to change how thin or heavy the weight of the font is.
Name | Value | Example |
---|---|---|
bold | 800 | The quick brown fox jumps over the lazy dog. |
regular | 400 | The quick brown fox jumps over the lazy dog. |
Letter spacing
Use to adjust the distance between text characters.
Name | Value | Example |
---|---|---|
default | 0px | The quick brown fox jumps over the lazy dog. |
relaxed | 1.5px | The quick brown fox jumps over the lazy dog. |
tight | -0.5px | The quick brown fox jumps over the lazy dog. |
Line heights
Use to set the distance between lines of text.
For long blocks of text use relaxed
. For short paragraphs be free to use default
. For one-liners, such as labels, use tight
.
Name | Value | Example |
---|---|---|
default | 1.25 | The quick brown fox jumps |
relaxed | 1.5 | The quick brown fox jumps |
tight | 1 | The quick brown fox jumps |
Opacity
Use to change element transparency. For muted colors prefer to use predefined color tokens, over setting the opacity. For disabled elements use high
opacity.
Name | Value | Example |
---|---|---|
high | 0.6 | |
low | 0.1 | |
medium | 0.4 |
Z-index
Use to set the layering order of the common elements.
Name | Value | Example |
---|---|---|
default | 1 | — |
dropdown | 7000 | — |
modal | 9000 | — |
overlay | 8000 | — |
popup | 5000 | — |
sticky | 100 | — |
toast | 10000 | — |
Breakpoints
Breakpoints for various device sizes. For media queries use mediaQuery helper or useMediaQuery hook.
Name | Value | Example |
---|---|---|
large | 1480px | — |
medium | 820px | — |
small | 480px | — |
Imports
import { tokens } from '@datacamp/waffles/tokens';import type { tokensProps } from '@datacamp/waffles/tokens';