foundations
Design Tokens (javascript)
Design Tokens are the platform-specific translations of the JSON values that are the result of the agreed-upon base values
Color
| Component | Example |
|---|---|
colorBlackBase | #000000 |
colorBlue10 | #e0f3ff |
colorBlue100 | #00283d |
colorBlue20 | #ade2fe |
colorBlue30 | #68c3f5 |
colorBlue40 | #2da2e3 |
colorBlue50 | #0280c6 |
colorBlue60 | #00649c |
colorBlue70 | #004c75 |
colorBlue80 | #003958 |
colorBlue90 | #002d46 |
colorBlueBase | #0280c6 |
colorBlueDark | #00649c |
colorBlueLight | #2da2e3 |
colorGreen10 | #e0ffe0 |
colorGreen100 | #003601 |
colorGreen20 | #b2f9b4 |
colorGreen30 | #74eb76 |
colorGreen40 | #40d342 |
colorGreen50 | #1ab11d |
colorGreen60 | #048907 |
colorGreen70 | #006402 |
colorGreen80 | #005a02 |
colorGreen90 | #003b01 |
colorGreenBase | #1ab11d |
colorGreenDark | #048907 |
colorGreenLight | #40d342 |
colorGrey10 | #F2F2F2 |
colorGrey100 | #1A1A1A |
colorGrey20 | #E6E6E6 |
colorGrey30 | #CCCCCC |
colorGrey40 | #B3B3B3 |
colorGrey50 | #999999 |
colorGrey60 | #808080 |
colorGrey70 | #666666 |
colorGrey80 | #4D4D4D |
colorGrey90 | #333333 |
colorGreyBase | #999999 |
colorGreyDark | #808080 |
colorGreyLight | #B3B3B3 |
colorMarketing10 | #FFFBE6 |
colorMarketing100 | #050400 |
colorMarketing20 | #F9EEB2 |
colorMarketing30 | #F0DF80 |
colorMarketing40 | #E1CC55 |
colorMarketing50 | #CCB534 |
colorMarketing60 | #B09A1D |
colorMarketing70 | #8A770D |
colorMarketing80 | #5E5104 |
colorMarketing90 | #302901 |
colorMarketingBase | #CCB534 |
colorMarketingDark | #B09A1D |
colorMarketingLight | #E1CC55 |
colorOrange10 | #fff4e6 |
colorOrange100 | #4d2b00 |
colorOrange20 | #ffe9c7 |
colorOrange30 | #ffdea8 |
colorOrange40 | #ffc066 |
colorOrange50 | #ffa024 |
colorOrange60 | #e98400 |
colorOrange70 | #cc7300 |
colorOrange80 | #a75e00 |
colorOrange90 | #7b4600 |
colorOrangeBase | #ffa024 |
colorOrangeDark | #e98400 |
colorOrangeLight | #ffc066 |
colorPrimary10 | #FFE6E6 |
colorPrimary100 | #4D0000 |
colorPrimary20 | #F8C8C8 |
colorPrimary30 | #F0ACAC |
colorPrimary40 | #E37373 |
colorPrimary50 | #D23E3E |
colorPrimary60 | #C51111 |
colorPrimary70 | #B10B0B |
colorPrimary80 | #950606 |
colorPrimary90 | #720202 |
colorPrimaryBase | #D23E3E |
colorPrimaryDark | #C51111 |
colorPrimaryLight | #E37373 |
colorRed10 | #ffebeb |
colorRed100 | #870002 |
colorRed20 | #fdb5b6 |
colorRed30 | #f97a7d |
colorRed40 | #f2494c |
colorRed50 | #e92326 |
colorRed60 | #dd070b |
colorRed70 | #cd0003 |
colorRed80 | #b80003 |
colorRed90 | #a00003 |
colorRedBase | #e92326 |
colorRedDark | #cd0003 |
colorRedLight | #f97a7d |
colorSecondary10 | #E6F3FF |
colorSecondary100 | #002140 |
colorSecondary20 | #B3D8FB |
colorSecondary30 | #82BCF3 |
colorSecondary40 | #58A2E8 |
colorSecondary50 | #378AD8 |
colorSecondary60 | #2074C2 |
colorSecondary70 | #105DA6 |
colorSecondary80 | #064784 |
colorSecondary90 | #023361 |
colorSecondaryBase | #2074C2 |
colorSecondaryDark | #105DA6 |
colorSecondaryLight | #378AD8 |
colorTertiary10 | #E6FFF5 |
colorTertiary100 | #004027 |
colorTertiary20 | #B3FBDF |
colorTertiary30 | #82F3C8 |
colorTertiary40 | #58E8B1 |
colorTertiary50 | #37D89B |
colorTertiary60 | #20C284 |
colorTertiary70 | #10A66C |
colorTertiary80 | #068454 |
colorTertiary90 | #02613C |
colorTertiaryBase | #37D89B |
colorTertiaryDark | #20C284 |
colorTertiaryLight | #58E8B1 |
colorText10 | #000000 |
colorText100 | #ffffff |
colorText20 | #000000 |
colorText30 | #000000 |
colorText40 | #000000 |
colorText50 | #000000 |
colorText60 | #ffffff |
colorText70 | #ffffff |
colorText80 | #ffffff |
colorText90 | #ffffff |
colorTextBlackBase | #ffffff |
colorTextBlue10 | #000000 |
colorTextBlue100 | #ffffff |
colorTextBlue20 | #000000 |
colorTextBlue30 | #000000 |
colorTextBlue40 | #000000 |
colorTextBlue50 | #000000 |
colorTextBlue60 | #ffffff |
colorTextBlue70 | #ffffff |
colorTextBlue80 | #ffffff |
colorTextBlue90 | #ffffff |
colorTextBlueBase | #000000 |
colorTextBlueDark | #ffffff |
colorTextBlueLight | #000000 |
colorTextGreen10 | #000000 |
colorTextGreen100 | #ffffff |
colorTextGreen20 | #000000 |
colorTextGreen30 | #000000 |
colorTextGreen40 | #000000 |
colorTextGreen50 | #000000 |
colorTextGreen60 | #ffffff |
colorTextGreen70 | #ffffff |
colorTextGreen80 | #ffffff |
colorTextGreen90 | #ffffff |
colorTextGreenBase | #000000 |
colorTextGreenDark | #ffffff |
colorTextGreenLight | #000000 |
colorTextGrey10 | #000000 |
colorTextGrey100 | #ffffff |
colorTextGrey20 | #000000 |
colorTextGrey30 | #000000 |
colorTextGrey40 | #000000 |
colorTextGrey50 | #000000 |
colorTextGrey60 | #000000 |
colorTextGrey70 | #ffffff |
colorTextGrey80 | #ffffff |
colorTextGrey90 | #ffffff |
colorTextGreyBase | #000000 |
colorTextGreyDark | #000000 |
colorTextGreyLight | #000000 |
colorTextMarketing10 | #000000 |
colorTextMarketing100 | #ffffff |
colorTextMarketing20 | #000000 |
colorTextMarketing30 | #000000 |
colorTextMarketing40 | #000000 |
colorTextMarketing50 | #000000 |
colorTextMarketing60 | #000000 |
colorTextMarketing70 | #000000 |
colorTextMarketing80 | #ffffff |
colorTextMarketing90 | #ffffff |
colorTextMarketingBase | #000000 |
colorTextMarketingDark | #000000 |
colorTextMarketingLight | #000000 |
colorTextOrange10 | #000000 |
colorTextOrange100 | #ffffff |
colorTextOrange20 | #000000 |
colorTextOrange30 | #000000 |
colorTextOrange40 | #000000 |
colorTextOrange50 | #000000 |
colorTextOrange60 | #ffffff |
colorTextOrange70 | #ffffff |
colorTextOrange80 | #ffffff |
colorTextOrange90 | #ffffff |
colorTextOrangeBase | #000000 |
colorTextOrangeDark | #ffffff |
colorTextOrangeLight | #000000 |
colorTextPrimary10 | #000000 |
colorTextPrimary100 | #ffffff |
colorTextPrimary20 | #000000 |
colorTextPrimary30 | #000000 |
colorTextPrimary40 | #000000 |
colorTextPrimary50 | #ffffff |
colorTextPrimary60 | #ffffff |
colorTextPrimary70 | #ffffff |
colorTextPrimary80 | #ffffff |
colorTextPrimary90 | #ffffff |
colorTextPrimaryBase | #ffffff |
colorTextPrimaryDark | #ffffff |
colorTextPrimaryLight | #000000 |
colorTextRed10 | #000000 |
colorTextRed100 | #ffffff |
colorTextRed20 | #000000 |
colorTextRed30 | #000000 |
colorTextRed40 | #000000 |
colorTextRed50 | #000000 |
colorTextRed60 | #ffffff |
colorTextRed70 | #ffffff |
colorTextRed80 | #ffffff |
colorTextRed90 | #ffffff |
colorTextRedBase | #000000 |
colorTextRedDark | #ffffff |
colorTextRedLight | #000000 |
colorTextSecondary10 | #000000 |
colorTextSecondary100 | #ffffff |
colorTextSecondary20 | #000000 |
colorTextSecondary30 | #000000 |
colorTextSecondary40 | #000000 |
colorTextSecondary50 | #000000 |
colorTextSecondary60 | #ffffff |
colorTextSecondary70 | #ffffff |
colorTextSecondary80 | #ffffff |
colorTextSecondary90 | #ffffff |
colorTextSecondaryBase | #ffffff |
colorTextSecondaryDark | #ffffff |
colorTextSecondaryLight | #000000 |
colorTextTertiary10 | #000000 |
colorTextTertiary100 | #ffffff |
colorTextTertiary20 | #000000 |
colorTextTertiary30 | #000000 |
colorTextTertiary40 | #000000 |
colorTextTertiary50 | #000000 |
colorTextTertiary60 | #000000 |
colorTextTertiary70 | #000000 |
colorTextTertiary80 | #ffffff |
colorTextTertiary90 | #ffffff |
colorTextTertiaryBase | #000000 |
colorTextTertiaryDark | #000000 |
colorTextTertiaryLight | #000000 |
colorTextWhiteBase | #000000 |
colorWhiteBase | #ffffff |
Space
| Component | Example |
|---|---|
space1 | 2px |
space2 | 4px |
space3 | 8px |
space4 | 12px |
space5 | 16px |
space6 | 24px |
space7 | 32px |
space8 | 40px |
space9 | 48px |
space10 | 64px |
space11 | 96px |
Z-index
| Component | Example |
|---|---|
zIndex100 | tooltip |
zIndex200 | menu |
zIndex300 | popover |
zIndex400 | sticky content |
zIndex500 | sheet |
zIndex600 | modal backdrop |
zIndex700 | modal sheet |
zIndex800 | modal (dialog, alert, page, full screen) |
zIndex900 | toast |
Shadows
| Component | Example |
|---|---|
shadow0 | none |
shadow1 | 0 2px 4px 0 rgba(0,0,0,0.12) |
shadow2 | 0 2px 7px 0 rgba(0,0,0,0.28) |
shadow3 | 0 7px 14px 0 rgba(0,0,0,0.28) |
shadow4 | 0 14px 28px 0 rgba(0,0,0,0.28) |
shadowInset1 | inset 0 1px 10px 0 rgba(0,0,0,0.24) |
shadowInset2 | inset 0 1px 15px 0 rgba(0,0,0,0.28) |
Grid
| Component | Example |
|---|---|
gridBreakpointLarge | 1024px |
gridBreakpointLargeMax | 1319px |
gridBreakpointMedium | 768px |
gridBreakpointMediumMax | 1023px |
gridBreakpointSmall | 375px |
gridBreakpointSmallMax | 767px |
gridBreakpointXLarge | 1320px |
gridBreakpointXSmall | - |
gridBreakpointXSmallMax | 374px |
gridGutter | 16px |
gridWrapFluid | calc(100% - 32px) |
gridWrapStatic | 1200px |
Typography
Font-family
| Component | Example |
|---|---|
fontFamilyBrandPrimary | Aa 'Roboto Slab', 'Roboto Slab Fallback', serif |
fontFamilyBrandSecondary | Aa 'Roboto', 'Roboto Fallback', sans-serif |
fontFamilySystem | Aa -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif |
Font-weight
| Component | Example |
|---|---|
fontWeightBold | Aa 700 |
fontWeightMedium | Aa 500 |
fontWeightRegular | Aa 400 |
Line-height
| Component | Example |
|---|---|
lineHeight3XLarge use font.heading, font.paragraph, font.caption instead | Aa 44px |
lineHeight4XLarge use font.heading, font.paragraph, font.caption instead | Aa 48px |
lineHeightLarge use font.heading, font.paragraph, font.caption instead | Aa 28px |
lineHeightMedium use font.heading, font.paragraph, font.caption instead | Aa 24px |
lineHeightSmall use font.heading, font.paragraph, font.caption instead | Aa 20px |
lineHeightXLarge use font.heading, font.paragraph, font.caption instead | Aa 32px |
lineHeightXSmall use font.heading, font.paragraph, font.caption instead | Aa 16px |
lineHeightXxLarge use font.heading, font.paragraph, font.caption instead | Aa 40px |
Font-size (type scale)
| Component | Example |
|---|---|
fontSize3XLarge use font.heading, font.paragraph, font.caption instead | Aa 24px |
fontSize4XLarge use font.heading, font.paragraph, font.caption instead | Aa 28px |
fontSize5XLarge use font.heading, font.paragraph, font.caption instead | Aa 32px |
fontSize6XLarge use font.heading, font.paragraph, font.caption instead | Aa 40px |
fontSizeLarge use font.heading, font.paragraph, font.caption instead | Aa 18px |
fontSizeMedium use font.heading, font.paragraph, font.caption instead | Aa 16px |
fontSizeSmall use font.heading, font.paragraph, font.caption instead | Aa 14px |
fontSizeXLarge use font.heading, font.paragraph, font.caption instead | Aa 20px |
fontSizeXSmall use font.heading, font.paragraph, font.caption instead | Aa 12px |
fontSizeXxLarge use font.heading, font.paragraph, font.caption instead | Aa 22px |
Font System
| Component | Example |
|---|---|
fontCaption1LineHeight | 1.1429 |
fontCaption1Size | 14px |
fontCaption2LineHeight | 1.3333 |
fontCaption2Size | 12px |
fontHeading1LargeLineHeight | 1.3 |
fontHeading1LargeSize | 40px |
fontHeading1LineHeight | 1.375 |
fontHeading1Size | 32px |
fontHeading1Weight | 700 |
fontHeading2LargeLineHeight | 1.25 |
fontHeading2LargeSize | 32px |
fontHeading2LineHeight | 1.2857 |
fontHeading2Size | 28px |
fontHeading2Weight | 700 |
fontHeading3LargeLineHeight | 1.2857 |
fontHeading3LargeSize | 28px |
fontHeading3LineHeight | 1.3333 |
fontHeading3Size | 24px |
fontHeading3Weight | 700 |
fontHeading4LargeLineHeight | 1.2727 |
fontHeading4LargeSize | 22px |
fontHeading4LineHeight | 1.2727 |
fontHeading4Size | 22px |
fontHeading4Weight | 700 |
fontHeading5LargeLineHeight | 1.3333 |
fontHeading5LargeSize | 18px |
fontHeading5LineHeight | 1.3333 |
fontHeading5Size | 18px |
fontHeading5Weight | 700 |
fontHeading6LargeLineHeight | 1.25 |
fontHeading6LargeSize | 16px |
fontHeading6LineHeight | 1.25 |
fontHeading6Size | 16px |
fontHeading6Weight | 700 |
fontParagraphLargeLineHeight | 1.5556 |
fontParagraphLargeSize | 18px |
fontParagraphLineHeight | 1.5 |
fontParagraphSize | 16px |
Border Radius
| Component | Example |
|---|---|
borderRadius0 | 0px |
borderRadius1 | 2px |
borderRadius10 | 64px |
borderRadius11 | 96px |
borderRadius2 | 4px |
borderRadius3 | 8px |
borderRadius4 | 12px |
borderRadius5 | 16px |
borderRadius6 | 24px |
borderRadius7 | 32px |
borderRadius8 | 40px |
borderRadius9 | 48px |
borderRadiusFill | 50% |
borderRadiusSides | 9999px |
Overlays
| Component | Example |
|---|---|
overlayFill | rgba(0, 0, 0, 0.33) |
overlayGradientLinearFadeToBottom | linear-gradient(-180deg, rgba(0, 0, 0, 0.33) 0%, rgba(255, 255, 255, 0) 100%) |
overlayGradientLinearFadeToTop | linear-gradient(-180deg, rgba(213, 219, 224, 0) 0%, rgba(0, 0, 0, 0.33) 100%) |
Motion
| Component | Example |
|---|---|
motionDurationFast | Hover me! 200ms |
motionDurationLoop | Hover me! 1200ms |
motionDurationMedium | Hover me! 300ms |
motionDurationSlow | Hover me! 500ms |
Icon
| Component | Example |
|---|---|
iconLarge | 28px |
iconMedium | 24px |
iconSmall | 16px |
iconXLarge | 32px |
DateTime
| Component | Example |
|---|---|
dateTimeFormatDate | DD/MM/YYYY |
dateTimeFormatDateTime | ddd DD MMM YYYY [at] HH:mm |
dateTimeFormatDefault | DD/MM/YYYY [at] HH:mm |
dateTimeFormatTime | HH:mm |