Design System

Accordions Header

The Conn's Store credit card is a convenient financing option offered at Conn's HomePlus. Store credit cards are generally issued through a bank or retailer. This is a convenient financing option at Conn's HomePlus that enables you to pay your purchase over time.

Accordions Content

A design approach is a general philosophy that may or may not include a guide for specific methods. Some are to guide the overall goal of the design. Other approaches are to guide the tendencies of the designer to improve their knowledge of the upcoming project.

Accordion List Title Placed Here

The Conn's Store credit card is a convenient financing option offered at Conn's HomePlus. Store credit cards are generally issued through a bank or retailer. This is a convenient financing option at Conn's HomePlus that enables you to pay your purchase over time.
The Conn's Store credit card is a convenient financing option offered at Conn's HomePlus. Store credit cards are generally issued through a bank or retailer. This is a convenient financing option at Conn's HomePlus that enables you to pay your purchase over time.
The Conn's Store credit card is a convenient financing option offered at Conn's HomePlus. Store credit cards are generally issued through a bank or retailer. This is a convenient financing option at Conn's HomePlus that enables you to pay your purchase over time.
The Conn's Store credit card is a convenient financing option offered at Conn's HomePlus. Store credit cards are generally issued through a bank or retailer. This is a convenient financing option at Conn's HomePlus that enables you to pay your purchase over time.

Circle Cards


Img/1

Img/3


Icon Cards


Icon/1

Icon/2


Number Card


Logo Card


Content Cards


Content/1


Content/2


Content/3 Accordion

Etiqueta
Card Title Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non ultricies eu, blandit mauris. Cras nisl at fermentum integer. Erat amet feugiat libero suspendisse semper duis fames non.

Título ubicado aquí

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit

  • Email Sign Up


    Offer

    Promo Title Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam

    $XXX

    Short details

    Long details placed here Long details placed here Long details placed here Long details placed here Long details placed here

    Disclaimer text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Valid details and dates.


    Deal Product Card Base

    Online Exclusive

    Title of Daily Deal Placed Here onto Two Lines

    Description placed here

    $XXX.XX$XXX.XX

    Ahorra $200 (20%)


    Feature Product Card Base

    Oferta

    Product Title Placed Here - GE 27.6 cu. ft. 4-Door French-Door...

    3 acabados disponibles

    3

    $1,999.00

    $1,200.99

    Ahorra $200 (20%)

    Countdown Bar

    xx

    Título

    :

  • 0días
  • 10

    Horas

    :

    6

    Minutos

    :

    50

    Segundos

    Pagination Dot
    Checkbox Control

    Default

    Checked

    Disabled

    Hover



    Marketing Label Flag

    De escritorio

    Oferta Clerance
    Agotado
    Nuevo Online Exclusive Almost Gone
    Top Seller Top Rated
    Ofertas increíbles New Markdown Price Drop Oferta del día Gran oferta
    Cyber Monday Deal
    Black Friday

    Mobile

    Oferta Clerance
    Agotado
    Nuevo Online Exclusive Almost Gone
    Top Seller Top Rated
    Ofertas increíbles New Markdown Price Drop Oferta del día Gran oferta
    Cyber Monday Deal
    Black Friday

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



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



    Typography

    / 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



    Typography

    / 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



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

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

    Button

    Variant = Icon Placement

    Icon-none

    Icon-Left

    Icon-Right

    Variant = Button Size

    X-Large

    Grande

    medium

    Pequeño

    XX-Small

    Variant = Type

    Primary

    Secondary

    Social

    Variant = States

    Default
    Hover
    Focus
    Disabled
    Primary Button States
    Secondary Button States
    Social Button States

    Link

    Variant = Icon Placement

    Icon-none

    Link

    Icon-Left

    Link

    Icon-Right

    Link

    Variant = Link Size

    X-Large

    Link

    Medio

    Link

    Pequeño

    Link

    Variant = States

    Default
    Hover
    Focus
    Disabled

    Main Components / Icons

    Interfaz de usuario

    Social Icons

    Pictograms

    Payment Icons

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