foundation

Design Tokens

Design tokens are the smallest design system atoms. They are named entities that store visual design attributes, and are crucial to keeping designs consistent. They are used in place of hardcoded values, such as HEX color codes for color or pixel values for spacing.
GitHub

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.

NameValueExample
beige#EFEBE4
beigeLight#F7F3EB
beigeMedium#E5E1DA
beigeSubtle#FFFBF3
blue#5EB1FF
blue20rgba(94, 177, 225, 0.2)
blueDark#257DFE
blueDarkText#0065D1
blueLight#72E5FE
brandFacebook#1778F2
brandGoogle#DB4437
brandLinkedIn#0A66C2
brandTwitter#00ACEE
green#03EF62
green10rgba(3, 239, 98, 0.1)
green20rgba(3, 239, 98, 0.2)
greenDark#00C74E
greenDarkText#008031
greenLight#65FF8F
grey#E8E8EE
grey6rgba(48, 57, 105, 0.06)
grey10rgba(48, 57, 105, 0.1)
grey15rgba(48, 57, 105, 0.15)
grey20rgba(48, 57, 105, 0.2)
grey30rgba(48, 57, 105, 0.3)
grey60rgba(48, 57, 105, 0.6)
greyDark#848492
greyDarkText#595D78
greyLight#EFEFF5
greyMedium#E1E1E8
greySubtle#F7F7FC
navy#05192D
navy70rgba(5, 25, 45, 0.7)
navyDark#000820
navyLight#213147
navyMedium#13253A
navySubtleTextOnDark#9BA3AB
navySubtleTextOnLight#5D6A77
orange#FF931E
orange20rgba(255, 188, 75, 0.2)
orangeDark#D87300
orangeDarkText#B75900
orangeLight#FFBC4B
pink#FF6EA9
pinkDark#DC4D8B
pinkDarkText#BF3072
pinkLight#FF95CF
purple#7933FF
purple10rgba(121, 51, 255, 0.1)
purple20rgba(121, 51, 255, 0.2)
purpleDark#5646A5
purpleDarkText#5646A5
purpleLight#A781FF
red#FF5400
red10rgba(255, 84, 0, 0.1)
red20rgba(255, 84, 0, 0.2)
redDark#DD3400
redDarkText#C01100
redLight#FF782D
transparentGreyrgba(48, 57, 105, 0.15)
transparentGreySoftrgba(48, 57, 105, 0.1)
transparentGreySubtlergba(48, 57, 105, 0.06)
transparentWhitergba(255, 255, 255, 0.15)
transparentWhiteSoftrgba(255, 255, 255, 0.1)
transparentWhiteSubtlergba(255, 255, 255, 0.06)
white#FFFFFF
white6rgba(255, 255, 255, 0.06)
white10rgba(255, 255, 255, 0.1)
white15rgba(255, 255, 255, 0.15)
white20rgba(255, 255, 255, 0.2)
white30rgba(255, 255, 255, 0.3)
white60rgba(255, 255, 255, 0.6)
yellow#FCCE0D
yellowDark#CFA600
yellowDarkText#907000
yellowLight#FFEC3C

Sizing

Use for both width and height of the action elements, such as buttons.

NameValueExample
large48px
medium36px
small28px

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.

NameValueExample
large24px
medium16px
small8px
xlarge32px
xsmall4px
xxlarge64px

Border width

Use to define element border thickness.

NameValueExample
medium2px
thick3px
thin1px
xthick4px

Border radius

Use to define element corner roundness.

NameValueExample
circle50%
medium4px

Box shadow

Use to show drop shadow beneath element.

NameValueExample
medium0px 1px 4px -1px rgba(5, 25, 45, 0.3)
thick0px 3px 5px -1px rgba(5, 25, 45, 0.3)
thin0px 0px 2px 0px rgba(5, 25, 45, 0.3)
xthick0px 8px 12px -4px rgba(5, 25, 45, 0.3)

Font families

For regular text use sansSerif, and for code samples mono.

NameValueExample
monoJetBrainsMonoNL, Menlo, Monaco, 'Courier New', monospace

The quick brown fox jumps over the lazy dog.

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

NameValueExample
huge28px

The quick brown fox jumps over the lazy dog.

large16px

The quick brown fox jumps over the lazy dog.

medium14px

The quick brown fox jumps over the lazy dog.

small12px

The quick brown fox jumps over the lazy dog.

xlarge18px

The quick brown fox jumps over the lazy dog.

xsmall10px

The quick brown fox jumps over the lazy dog.

xxlarge20px

The quick brown fox jumps over the lazy dog.

Font weights

Use to change how thin or heavy the weight of the font is.

NameValueExample
bold800

The quick brown fox jumps over the lazy dog.

regular400

The quick brown fox jumps over the lazy dog.

Letter spacing

Use to adjust the distance between text characters.

NameValueExample
default0px

The quick brown fox jumps over the lazy dog.

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

NameValueExample
default1.25

The quick brown fox jumps
over the lazy dog.

relaxed1.5

The quick brown fox jumps
over the lazy dog.

tight1

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.

NameValueExample
high0.6
low0.1
medium0.4

Z-index

Use to set the layering order of the common elements.

NameValueExample
default1
dropdown7000
modal9000
overlay8000
popup5000
sticky100
toast10000

Breakpoints

Breakpoints for various device sizes. For media queries use mediaQuery helper or useMediaQuery hook.

NameValueExample
large1480px
medium820px
small480px

Imports

import { tokens } from '@datacamp/waffles/tokens';
import type { tokensProps } from '@datacamp/waffles/tokens';