Agregado al carrito
LG - Refrigerador de 4 puertas, con puerta francesa, gran capacidad de 29.7 pies cúb...
Cant.: 1
Ir al carrito
Colores
Overview
Naming Colors

Our color palettes are comprised of a base color and extended palette. The extended palette includes the additional tints and shades generated from the base color.

Colors are named as ‘colorXX’ (for ex. tan100)
The color label represents the base color, while the ‘XX’ number represents different shades.

Understanding Tints & Shades

Tint = The addition of white to the base color
Shade = The addition of black to the base color


Here’s how the value of the extended palette is determined:
Base color: 100
Shades darker than base color: >100
Tints lighter than base color: <100 < p>

Accessibility standards

Inclusion for all our customers

The Conn’s HomePlus updated color palette adhere’s to W3C’s minimum AA rating.

What is the minimum contrast requirement?

1.4.3 Contrast (Minimum)
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
For more details, please visit: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html


In order to meet W3C’s minimum AA rating, the background to text contrast ratio should be at least 4.5:1. Therefore, all styles and components need to meet this contrast ratio of color combinations.

Using Stark’s accessibility plugin we are able to determine passing text color contract stanards:
Normal text = Passing color results are accurate only if your font is at least 16px with regular weight or heavier
Large text = Passing color results are accurate only if your font is at least 18.66px with bold weight or 24px at regular weight or heavier

    These updated standards will allow us to:
  • Work with accessibility in mind - Design and build accessible products from the start
  • Check product compliance - Designer, PMs and Engineers can check on UI elements and code to ensure they are accessible and meet legal requirements and standards
    • The color combinations that you see below are the ONLY approved color combinations. No other text and background combinations are approved for use.

    Most Commonly Used Colors

    Core

    Aa
    .black
    Relación de contraste
    17.03:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .white
    Relación de contraste
    17.03:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1

    Should be used for:

    • text
    • buttons and links
    • component background color

    Tailwind color names:

    • primary
    • secondary-content
    • base-content
    • info-content
    • success-content
    • rning-content
    • error-content

    Should be used for:

    • text
    • buttons and links
    • component background color

    Tailwind color names:

    • primary-content
    • secondary
    • accent-content
    • neutral-content

    Grays

    Aa
    .gray90
    Relación de contraste
    12.67:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .gray80
    Relación de contraste
    8.92:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .gray70
    Relación de contraste
    6.31:1
    Normal Text
    AA - 4:5:1
    AA - 7:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .gray60
    Relación de contraste
    4.5:1
    Normal Text
    AA - 4:5:1
    AA - 7:1
    Large Text
    AA - 4:5:1
    AA - 7:1

    Should be used for:

    • Used for preheadline text

    Tailwind:

    • neutral
    Aa
    .gray50
    Relación de contraste
    5.16:1
    Normal Text
    AA - 4:5:1
    AA - 7:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .gray40
    Relación de contraste
    6.84:1
    Normal Text
    AA - 4:5:1
    AA - 7:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .gray30
    Relación de contraste
    8.88:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .gray20
    Relación de contraste
    11.18:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .gray10
    Relación de contraste
    13.92:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1

    Brand Colors

    Conn’s HomePlus Red

    Aa
    .conns-homeplus-red
    Relación de contraste
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    This color can only be used for the logo, and cannot be used for text and background colors.

    Maroon

    Maroon colors should only be used for:

    • Price on product cards
    • Cart and checkout buttons
    • Sale and clearance flags
    Base Color
    Extended Palette
    Aa
    .maroon100
    Relación de contraste
    5.8:1
    Normal Text
    AA - 4:5:1
    AA - 7:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .maroon120 shade($maroon, 20%)
    Relación de contraste
    8.01:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .maroon150 shade($maroon, 50%)
    Relación de contraste
    13.01:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .maroon170 shade($maroon, 70%)
    Relación de contraste
    17.01:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1

    Should be used for:

    • Sale and clearance product flags
    • Price on product cards

    Should be used for:

    • Commerce driven buttons
    • Inline text links

    Tailwind:

    • accent

    Tostado

    Base
    Aa
    .tan100
    Relación de contraste
    11.36:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1

    Tailwind:

    • base-500
    Extended Palette
    Aa
    .tan60 tint($tan, 40%)
    Relación de contraste
    13.46:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .tan40 tint($tan, 60%)
    Relación de contraste
    14.58:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .tan20 tint($tan, 80%)
    Relación de contraste
    15.79:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .tan10 tint($tan, 90%)
    Relación de contraste
    16.44:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1

    Tailwind:

    • base-400

    Should be used for:

    • Utility nav bar background
    • Footer CTA buttons

    Tailwind:

    • base-300

    Tailwind:

    • base-200

    Should be used for:

    • All page backgrounds will use this color

    Tailwind:

    • base-100

    Beige

    Base
    Extended Palette
    Aa
    .beige100
    Relación de contraste
    4.61:1
    Normal Text
    AA - 4:5:1
    AA - 7:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .beige40 tint($beige, 60%)
    Relación de contraste
    10.14:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .beige10 tint($beige, 90%)
    Relación de contraste
    15.1:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1

    Denim

    Base
    Extended Palette
    Aa
    .denim100
    Relación de contraste
    11.02:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .denim40 tint($denim, 60%)
    Relación de contraste
    7.91:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .denim10 tint($denim, 90%)
    Relación de contraste
    14.4:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1

    Should be used for:

    • Often used for CTA banner’s background color

    Slate

    Base
    Extended Palette
    Aa
    .slate100
    Relación de contraste
    4.68:1
    Normal Text
    AA - 4:5:1
    AA - 7:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .slate40 tint($slate, 60%)
    Relación de contraste
    10.09:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .slate10 tint($slate, 90%)
    Relación de contraste
    15.06:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1

    Verde salvia

    Base
    Extended Palette
    Aa
    .sage100
    Relación de contraste
    5.62:1
    Normal Text
    AA - 4:5:1
    AA - 7:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .sage40 tint($sage, 60%)
    Relación de contraste
    9.58:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .sage10 tint($sage, 90%)
    Relación de contraste
    14.93:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1

    Flax

    Base
    Extended Palette
    Aa
    .flax100
    Relación de contraste
    8.52:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .flax40 tint($flax, 60%)
    Relación de contraste
    13.09:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .flax10 tint($flax, 90%)
    Relación de contraste
    13.09:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1

    Café

    Base
    Extended Palette
    Aa
    .coffee100
    Relación de contraste
    9.36:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .coffee40 tint($coffee, 60%)
    Relación de contraste
    8.31:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .coffee10 tint($coffee, 90%)
    Relación de contraste
    14.48:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1

    Notifications

    Info

    Base
    Extended Palette
    Aa
    .info100
    Relación de contraste
    4.58:1
    Normal Text
    AA - 4:5:1
    AA - 7:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .info40 tint($info, 60%)
    Relación de contraste
    9.87:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .info10 tint($info, 90%)
    Relación de contraste
    14.95:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1

    Should be used for:

    • Focus state outline

    Success

    Base
    Extended Palette
    Aa
    .success100
    Relación de contraste
    4.56:1
    Normal Text
    AA - 4:5:1
    AA - 7:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .success40 tint($success, 60%)
    Relación de contraste
    9.93:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .success10 tint($success, 90%)
    Relación de contraste
    15.04:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1

    Should be used for:

    • Often used for CTA banner’s background color

    Advertencia

    Base
    Extended Palette
    Aa
    .warning100
    Relación de contraste
    6.31:1
    Normal Text
    AA - 4:5:1
    AA - 7:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .warning40
    Relación de contraste
    11.63:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .warning10
    Relación de contraste
    15.51:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1

    Error

    Base
    Extended Palette
    Aa
    .error100
    Relación de contraste
    4.51:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .error40 tint($error, 60%)
    Relación de contraste
    9.58:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1
    Aa
    .error10 tint($error, 90%)
    Relación de contraste
    14.83:1
    Normal Text
    AA - 4:5:1
    AAA - 3:1
    Large Text
    AA - 4:5:1
    AA - 7:1

    Grid & Spacing

    8 Point Scale using a “Soft Grid” method

    As a general rule, the Conn's Design System and accompanying code base should follow an 8-Point "Soft Grid" system. This means using multiples of 8 to define the dimensions, padding, and margin of both block and inline elements. A "soft grid" simply measures 8-point increments between individual elements.

    What are points?

    @1x

    A point (pt) is a measurement of space that is dependent on screen resolution. The simplest explanation is that at a "1x" resolution (or @1x), 1pt = 1px.

    @2x

    At a “2x” resolution (@2x), 1pt = 4px because resolution doubles on both the X and Y axes making it 2px wide by 2px tall.

    @3x

    At a “3x” resolution (@3x), 1pt = 9px (3px x 3px) and so on.

    https://tailwindcss.com/docs/margin

    As a general rule, the Conn's Design System and accompanying code base should follow an 8-Point "Soft Grid" system. This means using multiples of 8 to define the dimensions, padding, and margin of both block and inline elements. A "soft grid" simply measures 8-point increments between individual elements.

    Spacers

    The following spacers are the most commonly used measurements in the UI using the 8pt soft grid.

    Used frequently Used sometimes Used sparingly
    `
    Nombre Tamaño Pixels
    0 0px 0px
    px 1px 1px
    0.5 0.125rem 2px
    1 0.25rem 4px
    1.5 0.375rem 6px
    2 0.5rem 8px
    2.5 0.625rem 10px
    3 0.75rem 12px
    3.5 0.875rem 14px
    4 1rem 16px
    6 1.5rem 24px
    8 2rem 32px
    10 2.5rem 40px
    12 3rem 48px
    14 3.5rem 56px
    16 4rem 64px
    18 4.5rem 72px
    20 5rem 80px
    22 5.5rem 88px
    24 6rem 96px
    28 7rem 112px
    32 8rem 128px
    36 9rem 9rem
    40 10rem 160px
    44 11rem 176px
    48 12rem 192px
    52 13rem 208px
    56 14rem 224px
    60 15rem 240px
    64 16rem 256px
    72 16rem 288px
    80 20rem 320px
    96 24rem 384px

    Responsive Grid

    Desktop (xl)
    1440 artboard frame 12 col grid @media (min-width: 801px) (container) max-width: 1284px column margin: auto; column-gap: inherit

    Tablet landscape (lg)
    column-gap: inherit

    Tablet portrait (md)
    744 artboard frame 6 col grid @media (min-width: 801px) column margin: 16px 0; column-gap: 16px

    Mobile landscape (sm)
    @media (min-width: 800px) (container) max-width: px

    Mobile portrait (sm)
    320 artboard frame 4 col grid @media (min-width: 800px) column margin:16px 0; column-gap: 16px

    Fluid Layout Grid Setup

    To set up a fluid-width grid, we use fixed numeric values for gutters and auto-calculated values (in %) for columns

    A fluid grid has fluid-width columns, fixed gutters and fixed side margins. The fluid grid has a flexible content width that goes edge to edge as per the screen size.

    In a fluid grid, columns either grow or shrink to adapt to the available space.

    Columns

    Columns are the imaginary vertical blocks and are used to align the content. We define column widths in percentages (%).

    Column gap or Gutters

    Column gaps or gutters are the spaces between the columns. Gutters help to separate the content. We define gutter widths as fixed values.

    Side Margins

    Margins are the space between content and the edges of the screen. We define side margin widths as fixed values that decide the minimum breathing space across every screen size.

    Flexible Margins

    Flexible margins occupy the remaining space left after composing a grid with columns, gutters, and side margins. The flexible margins change as per different screen sizes.

    Typography

    In the Typography section, there is a choice of Text Styles suitable for both Desktop and Mobile Design, as well as styles perfectly suited for Inputs and Buttons.

    All of the available Typography options in this section also have their Line Height set so they perfectly align to a 4pt Baseline Grid, enabling consistency throughout the Conn's Design System. The Typography choices are available on Google Fonts.

    Example

    PRE HEADLINE

    8pt

    Headline Lorem Ipsum Dolor set Amet Consectetur id Nisi

    16pt

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id orci ut nisi laoreet lobortis. Nullam magna dolor, convallis ac euismod a, suscipit quis risus. Pellentesque vulputate lorem in lorem ullamcorper varius ut id mauris. Maecenas a sagittis ligula. Quisque ante ipsum, tincidunt ut nibh sed, mattis aliquet augue. Pellentesque vulputate lorem in lorem ullamcorper varius ut id mauris.

    16pt

    Nunc id orci ut nisi laoreet lobortis.

    16pt
    • Nullam magna dolor
    • Convallis ac euismod a
    • Suscipit quis risus
    • Pellentesque vulputate lorem
    • In lorem ullamcorper
    16pt

    Text link style

    font 1 - Sans Serif

    Display & Headings
    Lora
    .font-semibold
    font-weight: 600

    abcedfghijklmnopqrstuvwxyz

    ABCDEFGHIJKLMNOPQRSTUVWXYZ

    0123456789

    .font-regular
    font-weight: 400

    abcedfghijklmnopqrstuvwxyz

    ABCDEFGHIJKLMNOPQRSTUVWXYZ

    0123456789

    font 1 - Sans Serif

    Display & Headings
    Open Sans
    .font-bold
    font-weight:700

    abcedfghijklmnopqrstuvwxyz

    ABCDEFGHIJKLMNOPQRSTUVWXYZ

    0123456789

    .font-semibold
    font-weight:600

    abcedfghijklmnopqrstuvwxyz

    ABCDEFGHIJKLMNOPQRSTUVWXYZ

    0123456789

    .font-regular
    font-weight:400

    abcedfghijklmnopqrstuvwxyz

    ABCDEFGHIJKLMNOPQRSTUVWXYZ

    0123456789

    Typography - Display (light)
    display-lg
    font-size: 104px; line-height: 112px;
    display-lg
    font-size: 104px; line-height: 112px;
    display-lg
    display-md
    font-size: 96px; line-height: 112px;
    display-md
    font-size: 96px; line-height: 112px;
    display-md
    display-sm
    font-size: 80px; line-height: 88px;
    display-sm
    font-size: 80px; line-height: 88px;
    display-sm
    Typography - Headline (light)
    headline-xl
    font-size: 40px; line-height: 48px;
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
    font-size: 40px; line-height: 48px;
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
    headline-lg
    font-size: 32px; line-height: 40px;
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
    font-size: 32px; line-height: 40px;
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
    headline-md
    font-size: 32px; line-height: 40px;
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
    font-size: 32px; line-height: 40px;
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
    headline-sm
    font-size: 24px; line-height: 32px;
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
    font-size: 24px; line-height: 32px;
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
    headline-xs
    font-size: 20px; line-height: 32px;
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
    font-size: 20px; line-height: 32px;
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
    headline-xss
    font-size: 18px; line-height: 24px;
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
    font-size: 18px; line-height: 24px;
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
    Typography - Text-Body-Speciality(light)
    text-xl
    font-size: 24px; line-height: 32px;
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
    font-size: 24px; line-height: 32px;
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
    text-lg
    font-size: 18px; line-height: 32px;
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
    font-size: 18px; line-height: 32px;
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
    text-md
    font-size: 16px; line-height: 24px;
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
    font-size: 16px; line-height: 24px;
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
    text-sm
    font-size: 14px; line-height: 20px;
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
    font-size: 14px; line-height: 20px;
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
    text-xs
    font-size: 12px; line-height: 16px;
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
    font-size: 12px; line-height: 16px;
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
    text-xll
    font-size: 10px; line-height: 14px;
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
    font-size: 10px; line-height: 14px;
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
    all-caps-title-md
    font-size: 14px; line-height: 16px;
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
    font-size: 14px; line-height: 16px;
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
    all-caps-title-sm
    font-size: 12px; line-height: 16px;
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
    font-size: 12px; line-height: 16px;
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
    Typography - Buttons, Links, Labels (Light_
    		 font-regularfont-semiboldfont-bold
    button-lg
    		-.text-lg .font-semibold-
    button-md
    		- .text-md .font-semibold-
    button-sm
    		-.text-sm .font-semibold-
    p-link
    font-size: 16px; line-height: 24px;
    Sed ut perspiciatis unde omnis iste natus error sit

    Hover
    Sed ut perspiciatis unde omnis iste natus error sit

    font-size: 16px; line-height: 24px;
    Sed ut perspiciatis unde omnis iste natus error sit

    Hover
    Sed ut perspiciatis unde omnis iste natus error sit
    font-size: 16px; line-height: 24px;
    Sed ut perspiciatis unde omnis iste natus error sit

    Hover
    Sed ut perspiciatis unde omnis iste natus error sit

    font-size: 16px; line-height: 24px;
    Sed ut perspiciatis unde omnis iste natus error sit

    Hover
    Sed ut perspiciatis unde omnis iste natus error sit
    p-link-sm
    font-size: 14px; line-height: 20px;
    Sed ut perspiciatis unde omnis iste natus error sit

    Hover
    Sed ut perspiciatis unde omnis iste natus error sit

    font-size: 14px; line-height: 20px;
    Sed ut perspiciatis unde omnis iste natus error sit

    Hover
    Sed ut perspiciatis unde omnis iste natus error sit
    font-size: 14px; line-height: 20px;
    Sed ut perspiciatis unde omnis iste natus error sit

    hover
    Sed ut perspiciatis unde omnis iste natus error sit

    font-size: 14px; line-height: 20px;
    Sed ut perspiciatis unde omnis iste natus error sit

    Hover
    Sed ut perspiciatis unde omnis iste natus error sit
    label-lg
    		- -
    font-size: 14px; line-height: 20px;
    Sed ut perspiciatis unde omnis iste natus error sit
    label-md
    		- -
    font-size: 14px; line-height: 20px;
    Sed ut perspiciatis unde omnis iste natus error sit
    label-sm
    		- -
    font-size: 14px; line-height: 20px;
    Sed ut perspiciatis unde omnis iste natus error sit

    Styles

    Opacity

    Negro

    To be used on light backgrounds

    Aa
    black 90%
    Aa
    black 80%
    Aa
    black 70%
    Aa
    black 60%
    Aa
    black 50%
    Aa
    40%
    Aa
    black 30%
    Aa
    black 20%
    Aa
    black 10%
    Aa
    black 5%
    Aa
    black 1%

    Blanco

    To be used on dark backgrounds

    Aa
    white 90%
    Aa
    white 80%
    Aa
    white 70%
    Aa
    white 60%
    Aa
    white 50%
    Aa
    white 40%
    Aa
    white30op
    Aa
    white 20%
    Aa
    white 10%
    Aa
    white 5%
    Aa
    white1op
    Aa
    Aa