Design Tokens

Typography

/ Font-Families

Font Family-Base

/ Source Sans pro

@font-family-name__base

Aa

Sorce Sans pro Bold

abcedfghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789

 

Font-weight: 700

Sorce Sans pro Regular

abcedfghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789

 

Font-weight: 400

Font Family-Secondary

/ Montserrat

@font-family-name__secondary

Aa

Montserrat Bold

abcedfghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789

 

Font-weight: 700

Montserrat Regular

abcedfghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789

 

Font-weight: 400

Typography

/ Display Type & Headings

@font-family-name__secondary: 'Montserrat';

@font-family-name__base: 'Source Sans Pro';

@font-family__base: @font-family-name__base, @font-family__sans-serif;

@font-family__secondary: @font-family-name__secondary, @font-family__sans-serif;

@heading__font-weight__base: @font-weight__bold;

@heading__font-family__base: @font-family__secondary;


colossus

colossus


@font-size__colossus: 104px

@line-height__colossus: 112px


Mobile = headline large

Mobile Equivalent


@font-size__colossus__mobile: @h2__font-size;

@line-height__colossus__mobile: @h2__line-height;

uber

uber


@font-size__uber: 96px

@line-height__uber: 104px


Mobile = headline large

Mobile Equivalent


@font-size__uber__mobile: @h2__font-size;

@line-height__uber__mobile: @line-height__colossus__mobile;


hero

hero


@font-size__hero: 80px

@line-height__hero: 88px


Mobile = headline large

Mobile Equivalent


@font-size__hero__mobile: @h2__font-size;

@line-height__hero__mobile: @line-height__uber__mobile;


headline - xlarge/48

headline-xlarge/48


@h1__font-size: 48px

@h1__line-height: 56px


Mobile = headline medium

Mobile equivalent


@h1__font-size__mobile: @h3__font-size;

@h1__line-height__mobile: @h3__line-height;


headline-large/40

headline-large/40


@h2__font-size: 40px

@h2__line-height: 48px


Mobile = headline small

Mobile Equivalent


@h2__font-size__mobile: @h4__font-size;

@h2__line-height__mobile: @h4__line-height;


headline-medium/32

headline-medium/32


@h3__font-size: 32px

@h3__line-height: 40px


Mobile = headline xsmall
Mobile Equivalent

@h3__font-size__mobile: @h5__font-size;

@h3__line-height__mobile: @h5__line-height;


headline-small/24

headline-small/24


@h4__font-size: 24px

@h4__line-height: 36px


headline-xsmall/20
headline-xsmall/20

@h5__font-size: 20px

@h5__line-height: 28px


headline-xxsmall/18
headline-xxsmall/18

@h6__font-size: 18px

@h6__line-height: 24px



Typography

/ Body

@font-family-name__base: 'Source Sans Pro';

@body__font-family: @font-family__base;


xlarge/24

xlarge

@font-size__xlarge: 24px

@line-height__xlarge: 36px


large/18

large

@font-size__large: 18px

@line-height__large: 28px


medium/16

medium

@font-size__medium: 16px

@line-height__medium: 24px


small/14

small

@font-size__small: 14px

@line-height__small: 20px


xsmall/12

xsmall

@font-size__xsmall: 12px

@line-height__xsmall: 18px


xxSmall/10

xxSmall

@font-size__xxsmall: 10px

@line-height__xxsmall: 16px



Typography

/ Special Text

label-small/14

label-small

@font-size__small: 14px

@line-height__small: 20px


label-xsmall/12

label-xsmall

@font-size__xsmall: 12px

@line-height__xsmall: 18px



Typography

/ Buttons

button-large

button-large

@button__font-family: @caption__font-family;

@font-size__button__large: @h5__font-size; //20px

@line-height_button_large: @line-height__inputlarge;//28px


button-medium

button-medium

@font-size__button__medium: @font-size__inputmedium; //16px

@line-height_button_medium: @line-height__inputmedium;//24px


button-small

button-small

@font-size__button__small: @font-size__caption; //14px

@line-height_button_small: @line-height__caption; //20px



Design tokens

/ Base Colors, Tints (T), and Shades (S)

@color-primary100: #F8D4D2;

@color-primary200: #F0A9A4;

@color-primary300: #E97F77;

@color-primary400: #E15449;

@color-primary500: #DA291C;

@color-primary600: #AE2116;

@color-primary700: #831911;

@color-primary800: #57100B;

@color-primary900: #160403;

@color-secondary100: #FFE0DA;

@color-secondary200: #FFC0B5;

@color-secondary300: #FFA191;

@color-secondary400: #FF816C;

@color-secondary500: #FF6247;

@color-secondary600: #CC4E39;

@color-secondary700: #993B2B;

@color-secondary800: #66271C;

@color-secondary900: #33140E;

@color-tertiary100: #ECCCCC;

@color-tertiary200: #D99999;

@color-tertiary300: #C66666;

@color-tertiary400: #B33333;

@color-tertiary500: #A00000;

@color-tertiary600: #800000;

@color-tertiary700: #600000;

@color-tertiary800: #400000;

@color-tertiary900: #200000;

Design Tokens

/ Greyscale

@color-grey50: #FCFCFC;

@color-grey100: #F5F5F5;

@color-grey200: #EEEEEE;

@color-grey300: #E0E0E0;

@color-grey400: #BDBDBD;

@color-grey500: #9E9E9E;

@color-grey600: #757575;

@color-grey700: #616161;

@color-grey800: #424242;

@color-grey900: #323232;

@color-black: #212121;

Design Tokens

/ White & Opacity (op)

@color-white: #FFFFFF;

@color-white90op: rgba(255, 255, 255, 0.9);

@color-white80op: rgba(255, 255, 255, 0.8);

@color-white70op: rgba(255, 255, 255, 0.7);

@color-white60op: rgba(255, 255, 255, 0.6);

@color-white50op: rgba(255, 255, 255, 0.5);

@color-white40op: rgba(255, 255, 255, 0.4);

@color-white30op: rgba(255, 255, 255, 0.3);

@color-white20op: rgba(255, 255, 255, 0.2);

@color-white10op: rgba(255, 255, 255, 0.1);

@color-white5op: rgba(255, 255, 255, 0.05);

@color-white1op: rgba(255, 255, 255, 0.01);

Design Tokens

/ black & Opacity (op)

@color-black: #212121;

@color-black90op: rgba(33, 33, 33, 0.9);

@color-black80op: rgba(33, 33, 33, 0.8);

@color-black70op: rgba(33, 33, 33, 0.7);

@color-black60op: rgba(33, 33, 33, 0.6);

@color-black50op: rgba(33, 33, 33, 0.5);

@color-black40op: rgba(33, 33, 33, 0.4);

@color-black30op: rgba(33, 33, 33, 0.3);

@color-black20op: rgba(33, 33, 33, 0.2);

@color-black10op: rgba(33, 33, 33, 0.1);

@color-black5op: rgba(33, 33, 33, 0.05);

@color-black1op: rgba(33, 33, 33, 0.01);

Design tokens

/ Notification colors

@color-success100: #E8F6EE;

@color-success200: #D1EEDD;

@color-success300: #A3DDBC;

@color-success400: #5DC389;

@color-success500: #18A957;

@color-success600: #11763D;

@color-success700: #0A4423;

@color-success800: #052211;

@color-success900: #021109;

@color-warning100: #FFF8EB;

@color-warning200: #FFF1D7;

@color-warning300: #FFE4AF;

@color-warning400: #FFCF74;

@color-warning500: #FFBB38;

@color-warning600: #D98F00;

@color-warning700: #9B6B0C;

@color-warning800: #734E07;

@color-warning900: #3D2801;

@color-error100: #FCE8EC;

@color-error200: #F9D0D9;

@color-error300: #F2A2B3;

@color-error400: #E95C7B;

@color-error500: #DF1642;

@color-error600: #9C0F2E;

@color-error700: #59091A;

@color-error800: #2D040D;

@color-error900: #160207;

@color-info100: #E9F4FF;

@color-info200: #D2E9FF;

@color-info300: #8FC8FF;

@color-info400: #4BA6FF;

@color-info500: #1E90FF;

@color-info600: #1565B3;

@color-info700: #0C3A66;

@color-info800: #061D33;

@color-info900: #030E19;

Design tokens

/ Gradient colors

@gradient-primary-light: linear-gradient(270deg, @color-primary500 0%, @color-primary100 100%);

@gradient-primary-dark: linear-gradient(270deg, @color-primary900 0%, @color-primary500 100%);

@gradient-secondary-light: linear-gradient(90deg, @color-secondary100 0%, @color-secondary500 100%);

@gradient-secondary-dark: linear-gradient(90deg, @color-secondary500 0%, @color-secondary900 100%);

@gradient-tertiary-light: linear-gradient(270deg, @color-tertiary500 0%, @color-tertiary100 100%);

@gradient-tertiary-dark: linear-gradient(270deg, @color-tertiary900 0%, @color-tertiary500 100%);

@gradient-bottom-dark: linear-gradient(180deg, rgba(48, 48, 48, 0.0001) 1.22%, rgba(48, 48, 48, 0.85) 100%);

@gradient-top-dark: linear-gradient(180deg, rgba(48, 48, 48, 0.85) 1.22%, rgba(48, 48, 48, 0.0001) 100%);

@gradient-bottom-light: linear-gradient(180deg, rgba(255, 255, 255, 0.0001) 1.22%, rgba(255, 255, 255, 0.85) 100%);

@gradient-top-light: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 1.22%, rgba(255, 255, 255, 0.0001) 100%);

Design tokens

/ Social Brand Colors

@color-behance: #1769FF;

@color-dribbble: #EA4C89;

@color-dropbox: #0061FF;

@color-github: #4078C0;

@color-hangouts: #23A061;

@color-instagram: #4C5FD7;

@color-linkedin: #0077B5;

@color-lyft: #FF00BF;

@color-medium: #292929;

@color-meetup: #EA2245;

@color-messenger: #1787FB;

@color-netflix: #E50914;

@color-paypal: #253B80;

@color-pinterest: #CB2027;

@color-producthunt: #D85537;

@color-quora: #A82400;

@color-reddit: #FF4500;

@color-telegram: #0088CC;

@color-trello: #117ABD;

@color-twitch: #6441A5;

@color-uber: #000000;

@color-youtube: #FF0000;

Elevations & Shadows

/ Light Shadow

@box-shadow_light20: 0px 0px 1px rgba(48, 49, 51, 0.05), 0px 1px 3px rgba(48, 49, 51, 0.1);

@box-shadow_light40: 0px 0px 1px rgba(48, 49, 51, 0.05), 0px 2px 4px rgba(48, 49, 51, 0.1);

@box-shadow_light60: 0px 0px 1px rgba(48, 49, 51, 0.05), 0px 4px 8px rgba(48, 49, 51, 0.1);

@box-shadow_light80: 0px 0px 1px rgba(48, 49, 51, 0.05), 0px 8px 16px rgba(48, 49, 51, 0.1);

@box-shadow_light100: 0px 0px 1px rgba(48, 49, 51, 0.05), 0px 16px 24px rgba(48, 49, 51, 0.1);

Elevations & Shadows

/ Dark Shadow

@box-shadow_dark20: 0px 0px 1px rgba(13, 13, 13, 0.9), 0px 1px 3px #0D0D0D;

@box-shadow_dark40: 0px 0px 1px rgba(13, 13, 13, 0.9), 0px 2px 4px #0D0D0D;

@box-shadow_dark60: 0px 0px 1px rgba(13, 13, 13, 0.9), 0px 4px 8px #0D0D0D;

@box-shadow_dark80: 0px 0px 1px rgba(13, 13, 13, 0.9), 0px 8px 16px #0D0D0D;

@box-shadow_dark100: 0px 0px 1px rgba(13, 13, 13, 0.9), 0px 16px 24px #0D0D0D;

Elevations & Shadows

/ Primary Shadow

@box-shadow_primary20: 0px 0px 1px rgba(218, 41, 28, 0.05), 0px 1px 3px rgba(218, 41, 28, 0.1);

@box-shadow_primary40: 0px 0px 1px rgba(218, 41, 28, 0.05), 0px 2px 4px rgba(218, 41, 28, 0.1);

@box-shadow_primary60: 0px 0px 1px rgba(218, 41, 28, 0.05), 0px 4px 8px rgba(218, 41, 28, 0.1);

@box-shadow_primary80: 0px 0px 1px rgba(218, 41, 28, 0.05), 0px 8px 16px rgba(218, 41, 28, 0.1);

@box-shadow_primary100: 0px 0px 1px rgba(218, 41, 28, 0.05), 0px 16px 24px rgba(218, 41, 28, 0.1);

Elevations & Shadows

/ Secondary Shadow

@box-shadow_secondary20: 0px 0px 1px rgba(255, 98, 71, 0.05), 0px 1px 3px rgba(255, 98, 71, 0.1);

@box-shadow_secondary40: 0px 0px 1px rgba(255, 98, 71, 0.05), 0px 2px 4px rgba(255, 98, 71, 0.1);

@box-shadow_secondary60: 0px 0px 1px rgba(255, 98, 71, 0.05), 0px 4px 8px rgba(255, 98, 71, 0.1);

@box-shadow_secondary80: 0px 0px 1px rgba(255, 98, 71, 0.05), 0px 8px 16px rgba(255, 98, 71, 0.1);

@box-shadow_secondary100: 0px 0px 1px rgba(255, 98, 71, 0.05), 0px 16px 24px rgba(255, 98, 71, 0.1);