Grid and Spacing

Responsive Grid

Page Builder Grid Options

FULL BLEED · Both content and backrgounds are full bleed (beyond 1440px)

Spacers

2px
4px
8px
12px
16px
24px
32px
40px
48px
56px
64px
72px
80px
88px
104px
112px
120px
140px
160px

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

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: 96px

@line-height__colossus: 104px


Mobile = headline large

Mobile Equivalent


@font-size__colossus__mobile: @h2__font-size;

@line-height__colossus__mobile: @h2__line-height;

uber

uber


@font-size__uber: 80px

@line-height__uber: 88px


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: 64px

@line-height__hero: 72px


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: 32px


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: 26px

Body

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

@body__font-family: @font-family__base;


xlarge/24

xlarge

@font-size__xlarge: 24px

@line-height__xlarge: 32px


large/18

large

@font-size__large: 18px

@line-height__large: 26px


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

Special Text

label-small/14

label-small

@font-size__small: 14px

@line-height__xsmall: 18px


label-xsmall/12

label-xsmall

@font-size__xsmall: 12px

@line-height__xsmall: 16px

Buttons

button-ex-large/20

button-ex-large

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

@line-height_button_large: @line-height__medium;//24px


button-large/18

button-large

@button__font-family: @caption__font-family;

@font-size__button__large: @h6__font-size; //18px

@line-height_button_large: 22px;//22px


button-medium/16

button-medium

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

@line-height_button_medium: @line-height__small;//20px


button-small/14

button-small

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

@line-height_button_small: @line-height__small; //18px


button-xsmall/12

button-xsmall

@font-size__button__xsmall: @font-size__xsmall; //12px

@line-height_button_xsmall: @line-height__xsmall; //16px


button-xxsmall/10

button-xxsmall

@font-size__button__xxsmall: @font-size__xxsmall; //10px

@line-height_button_xxsmall: @font-size__button__small; //14px



Color Tokens

Primary

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

Secondary

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

Tertiary

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

Greyscale & Black and White Opacities

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;

White & Opacities

@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);

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

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;

Gradiants

@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%);

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-yellow: #FFC439;

@color-paypal-blue-dark: #003087;

@color-paypal-blue-light: #009CDE;

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

Iconography

Main Components / Icons

Interfaz de usuario

Social Icons

Pictograms

Payment Icons

americanamericanamericanamericanamerican
americanamericanamericanamericanamerican
americanamericanamericanamericanamerican
americanamericanamericanamericanamerican
americanamericanamericanamerican
Conn’s HomePlus Credit Card or
Synchrony Home Credit Card
americanamerican
Conn’s Credit / YesMoney / Conn’s Pay
american
Progressive Leasing
american

Elevations & Shadows

Elevations & Shadows / Light Shadow

@box-shadow_light20: 0px 1px 3px rgba(33, 33, 33, 0.1);

@box-shadow_light40: 0px 2px 4px rgba(33, 33, 33, 0.1);

@box-shadow_light60: 0px 4px 8px rgba(33, 33, 33, 0.1);

@box-shadow_light80:0px 8px 16px rgba(33, 33, 33, 0.1);

@box-shadow_light100: 0px 16px 24px rgba(33, 33, 33, 0.1);

Elevations & Shadows / Dark Shadow

@box-shadow_dark20: 0px 1px 3px #0D0D0D;

@box-shadow_dark40: 0px 2px 4px rgba(29, 29, 29, 0.4);

@box-shadow_dark60: 0px 4px 8px #0D0D0D;

@box-shadow_dark80: 0px 8px 16px #0D0D0D;

@box-shadow_dark100: 0px 16px 24px #0D0D0D;


Elevations & Shadows / Primary Shadow

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

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

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

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

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


Elevations & Shadows / Secondary Shadow

@box-shadow_secondary20: 0px 1px 3px rgba(33, 33, 33, 0.2);

@box-shadow_secondary40: 0px 2px 4px rgba(33, 33, 33, 0.2);

@box-shadow_secondary60: 0px 4px 8px rgba(33, 33, 33, 0.2);

@box-shadow_secondary80: 0px 8px 16px rgba(33, 33, 33, 0.2);

@box-shadow_secondary100: 0px 16px 24px rgba(33, 33, 33, 0.2);

Borders

Border Radius

Border-Radius Shapes

The border radius utility supports sharp, rounded, mixed, pill, and circle radiuses.

sharp

Rounded

Mixed

in certain cases (ex: cards) a mixed border radius approach is needed where only 2 of the 4 sides are rounded, and the other 2 are sharp

Pill

can be achieved when all 4 corners are set to 999px

Circle

assuming the width and height of the element are the same, a circle shape can be achieved when the border radius is set to 100%

sharp

Rounded

Mixed

in certain cases (ex: cards) a mixed border radius approach is needed where only 2 of the 4 sides are rounded, and the other 2 are sharp

Pill

can be achieved when all 4 corners are set to 999px

Circle

assuming the width and height of the element are the same, a circle shape can be achieved when the border radius is set to 100%

Rounded Border-Radius Sizing

Very similar to the “Spacers” from the Grid & Spacing section, when applying a border radius to a container, you must use an increment of 8px (with two exceptions for 2px and 4px).

The following border-radiuses are the most commonly used measurements in the UI.


Do not use any other measurements besides the following options.

Used frequently
Used sometimes
Used sparingly




2px
4px
8px
16px




Border Strokes

Border Thickness

Use the border utility classes to control the border size and color properties.
The border utlity class sets the border-color and border-size, with support for the following sizes: 0, 1px or 2px.
Used frequently
Used sometimes
Used sparingly



0px
1px
2px