- Inicio
- Foundations
Grid and Spacing
Responsive Grid
Page Builder Grid Options
CONTAINED · Both content and backgrounds are contained to max-width specs (1360px)
FULL WIDTH · Content is contained to max-width specs but backgrounds are full bleed (1440px)
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%);
@color-airbnb: #FD5C63;
@color-amazon: #FF9900;
@color-android: #A4C639;
@color-behance: #1769FF;
@color-dribbble: #EA4C89;
@color-dropbox: #0061FF;
@color-facebook: #3B5998;
@color-github: #4078C0;
@color-hangouts: #23A061;
@color-instagram: #4C5FD7;
@@color-kickstarter: #2BDE73;
@color-linkedin: #0077B5;
@color-lyft: #FF00BF;
@color-medium: #292929;
@color-meetup: #EA2245;
@color-messenger: #1787FB;
@color-netflix: #E50914;
@color-patreon: #F96854;
@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-shopify: #96BE4F;
@color-skype: #00AFF0;
@color-slack: #6ECADC;
@color-snapchat: #FFFC00;
@color-spotify: #1ED760;
@color-telegram: #0088CC;
@color-trello: #117ABD;
@color-twitch: #6441A5;
@color-twitter: #00B6F1;
@color-uber: #000000;
@color-whatsapp: #25E47A;
@color-vimeo: #45BBFF;
@color-youtube: #FF0000;
Iconography
Main Components / Icons
Interfaz de usuario
Social Icons
Pictograms
Payment Icons
Conn’s HomePlus Credit Card or
Synchrony Home Credit Card
Synchrony Home Credit Card
Conn’s Credit / YesMoney / Conn’s Pay
Progressive Leasing
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;
@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 |
|---|
Social Brand Colors