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
#1c1519
Black
#1c1519
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
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 PrintSecondary Headline
Main Headline
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.
Section Title
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.
“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.”
*Numbers are Gibson-Medium weight
- 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
- 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 PrintSecondary Headline
Main Headline
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.
Section Title
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.
“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.”
*Numbers are Gibson-Medium weight
- 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
- 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
Dropdown Style
Buttons to Test
Forms
Form Fields - Desktop
Default
Default
Active
Hover
Completed
Selected
Missing
Missing
Default
Default
Active
Active
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.