Foundation
  • Colors
  • Typography
  • Grid System
    • Components
  • Buttons & Selectors
  • Forms
  • Icons
    • Foundation
  • Colors
  • Typography
  • Grid System
    • Components
  • Buttons & Selectors
  • Forms
  • Icons

    • Colors

    Brand
    Grayscale
    Alert

    Tan

    #DFD6CB

    Teal

    #30464F

    White

    #FFFFFF

    Light Gray 1

    #FAFAFA

    Light Gray 2

    #E0E0E0

    Med. Gray 1

    #30464F

    Med. Gray 2

    #7A7A7A

    Dark Gray 1

    #3B3B3B

    Dark Gray 2

    #333333

    Black

    #000000

    Positive

    #009E4B

    Negative

    #EB3C27

    Color & Text

    Text should always have good contrast in relation to the background. If the background is dark, avoid using darker text colors. If the background is light, avoid using lighter text colors.

    Section Title
    Section Title
    Section Title
    Section Title

    Section Title
    Section Title
    Section Title

    Section Title
    Section Title
    Section Title

    Section Title
    Section Title
    Section Title
    Section Title

    Images & Text

    Text on top of images should almost always be white. Unless the area of text is light enough to where black text is easily legible. In the case that white text is hard to read when placed over an image, gradients and overlays should be applied. Basic rule should be to apply a gradient or overlay just dark enough for the text to be read clearly.

    Ringer Henley Short Sleeve

    We've Got a Ringer

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

    Ringer Henley Short Sleeve

    We've Got a Ringer

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

    Ringer Henley Short Sleeve

    We've Got a Ringer

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

    Ringer Henley Short Sleeve

    We've Got a Ringer

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

    Ringer Henley Short Sleeve

    We've Got a Ringer

    Ringer Henley Short Sleeve

    We've Got a Ringer

    Ringer Henley Short Sleeve

    We've Got a Ringer

    Ringer Henley Short Sleeve

    We've Got a Ringer

    Typography

    Overview

    AaBbCc

    Gibson

    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
    0123456789
    ~%!@#$%^&*-_=+
    []{}()|\/<>‘’”,.;:?

    Thin

    Light

    Book

    Regular

    Medium

    SemiBold

    Bold

    Heavy

    Thin Italic

    Light Italic

    Book Italic

    Regular Italic

    Medium Italic

    SemiBold Italic

    Bold Italic

    Heavy Italic

    Typography - Desktop

    Header 1

    Header 2

    Header 3

    Header 4

    Header 5
    Header 6

    Paragraph

    Fine Print
    H6/Font Size: 22px/Letter Spacing: 2px/Line Height: 26px/Uppercase
    Secondary Headline
    10px H1/Font Size: 50px/Line Height: 60px

    Main Headline

    20px Body/Font Size: 20px/Line Height: 30px

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

    H5/Font Size: 24px/Letter Spacing: 2px/Line Height: 29px/Uppercase
    Section Title
    25px Body/Font Size: 20px/Line Height: 30px

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

    Blockquote/Font Size: 22px/Line Height: 26px
    “Quotem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.”
    Body/Font Size: 20px/Line Height: 30px
    *Numbers are Gibson-Medium weight
    1. Item 1
    2. Item 2
    3. Item 3
    4. Item 4
    5. Item 5
    6. Item 6
    7. Item 7
    8. Item 8
    9. Item 9
    10. Item 10
    11. Item 11
    12. Item 12
    13. Item 13
    14. Item 14
    15. Item 15
    16. Item 16
    Body/Font Size: 20px/Line Height: 30px
    • Item 1
    • Item 2
    • Item 3
    • Item 4
    • Item 5
    • Item 6
    • Item 7
    • Item 8
    • Item 9
    • Item 10
    • Item 11
    • Item 12
    • Item 13
    • Item 14
    • Item 15
    • Item 16
    Typography - Mobile

    Header 1

    Header 2

    Header 3

    Header 4

    Header 5
    Header 6

    Paragraph

    Fine Print
    H6/Font Size: 17px/Letter Spacing: 2px/Line Height: 20px/Uppercase
    Secondary Headline
    10px H1/Font Size: 41px/Line Height: 49px

    Main Headline

    20px Body/Font Size: 16px/Line Height: 24px

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

    H5/Font Size: 19px/Letter Spacing: 2px/Line Height: 23px/Uppercase
    Section Title
    25px Body/Font Size: 16px/Line Height: 24px

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

    Blockquote/Font Size: 17px/Line Height: 20px
    “Quotem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.”
    Body/Font Size: 16px/Line Height: 24px
    *Numbers are Gibson-Medium weight
    1. Item 1
    2. Item 2
    3. Item 3
    4. Item 4
    5. Item 5
    6. Item 6
    7. Item 7
    8. Item 8
    9. Item 9
    10. Item 10
    11. Item 11
    12. Item 12
    13. Item 13
    14. Item 14
    15. Item 15
    16. Item 16
    Body/Font Size: 16px/Line Height: 24px
    • Item 1
    • Item 2
    • Item 3
    • Item 4
    • Item 5
    • Item 6
    • Item 7
    • Item 8
    • Item 9
    • Item 10
    • Item 11
    • Item 12
    • Item 13
    • Item 14
    • Item 15
    • Item 16

    Grid System

    Grid System - 1350PX

    The max width will be 1350px. Max grid set will be a 1/6 grid section. Padding is 15px to create 30px gutters. There is also a minimum of 15px margins all around.

    Grid System - 1000PX - 1350px

    Max grid set will be a 1/4 grid section. Padding is 15px to create 30px gutters. There is also a minimum of 15px margins all around.

    Grid System - 600PX - 1000px

    Max grid set will be a 1/3 grid section. Padding is 15px to create 30px gutters.

    Grid System - 600PX >

    Max grid set will be a 1/2 grid section. Padding is 15px to create 30px gutters.

    Buttons & Selectors

    CTAs - Desktop

    CTAs should always create contrast against its background. Use the black CTA for light backgrounds and the white CTA for dark backgrounds.

    Default

    Hover

    Default

    Hover

    Selectors - Desktop & Mobile

    Selectors are currently used to define inseam, lined/unlined and style options.

    The black option notes the current selection.

    Size/Color Selectors - Desktop & Mobile
    Current Style

    S
    M
    L
    XL
    XXL

    S
    M
    L
    XL
    XXL

    S
    M
    L
    XL
    XXL

    sold-out-x
    sold-out-x

    Dropdown Style
    Buttons to Test

    Forms

    Form Fields - Desktop

    Default

    Default

    Active

    Hover

    Completed

    Selected

    Missing

    Missing

    Default

    Default

    Active

    Active

    Placeholder Text
    Option 1
    Option 2
    Option 3

    Completed

    Completed

    Missing

    Missing

    Form Fields - Guidelines

    The width of form fields will be contingent upon the specific design. However, consistency in appearance is the goal. If a set of fields are used, all widths should match throughout. Refrain from staggering fields.

    Icons

    Icons - Basic
    Bag Free Shipping Free Returns Fabric Tech 1 Fabric Tech 2
    Close Left Arrow Right Arrow Up Arrow Down Arrow Check Mark
    Menu Filter Login Logout Accordion
    Open         Accordion
    Close
    Search Empty Star Star Half Star
    Help Account Store Locator Chat Valid
    Invalid Missing Play Write Rewards
    Facebook Instagram Twitter Pinterest Youtube
    Valid
    Inverse         Invalid
    Inverse         Missing
    Inverse