Waffles - Design Tokens

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 over the lazy dog.
relaxed	1.5	The quick brown fox jumps over the lazy dog.
tight	1	The quick brown fox jumps over the lazy dog.

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';