12 Column Grid

Settings:

Total Width: 1280px
Offset (Outside Gutters): 80px
Gutter Width: 28px
Column Width: 81px

Typography - Desktop

Become a Champion

H1 - Oswald Bold 90, line height 96, #041E42

Become a Champion

H2 - Oswald Bold 60, line height 64, #041E42

Swimming News Starts Here

H3 - Oswald Regular 40, line height 44, #041E42

TYR Pro Swim Series Greensboro

H4 - Source Sans Pro Bold 32, line height 32, #1D1D1D or #FFFFFF

Toyota U.S. Open

H5 - Source Sans Pro Semibold 21, line height 24, #1D1D1D or #FFFFFF

New Club Requirements

H6 - Oswald Regular Size 20, #041E42 or #B1953A

Lorem ipsum dolor sit amet, consectetur
adipiscing elit adispsicing elit integer

Smaller Header- Source Sans Pro Semibold 18, line height 24, #333333

Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Integer maximus iaculis metus vel finibus.

Body Text Large - Source Sans Pro Regular 18, line height 24, #333333

The Olympics are just around the corner and what better way to
celebrate USA Swimming than repping your favorite swag!

Body Text Regular - Source Sans Pro Regular 16, line height 21

Greensboro, NC

Body Text Small - Source Sans Pro Semibold 14, line height 18, #687481

Olympics

Oct 27, 2019

Category Tag - Source Sans Pro Bold 14, letter-spacing 1, #00B3E4
Date Source Sans Pro Semibold 14, #687481

Tabs - Source Sans Pro Semibold 14, #687481

Typography - Mobile

Become a Champion

H1 - Oswald Bold 48, line height 54, #041E42

Become a Champion

H2 - Oswald Bold 40, line height 42, #041E42

Swimming News Starts Here

H3 - Oswald Regular 28, line height 32, #041E42

TYR Pro Swim Series Greensboro

H4 - Source Sans Pro Bold 32, line height 32, #1D1D1D or #FFFFFF

Toyota U.S. Open

H5 - Source Sans Pro Semibold 21, line height 24, #1D1D1D or #FFFFFF

New Club Requirements

H6 - Oswald Regular Size 20, #041E42 or #B1953A

Lorem ipsum dolor sit amet, consectetur
adipiscing elit adispsicing elit integer

Smaller Header- Source Sans Pro Semibold 18, line height 24, #333333

Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Integer maximus iaculis metus vel finibus.

Body Text Large - Source Sans Pro Regular 18, line height 24, #333333

The Olympics are just around the corner and what better way to
celebrate USA Swimming than repping your favorite swag!

Body Text Regular - Source Sans Pro Regular 16, line height 21

Greensboro, NC

Body Text Small - Source Sans Pro Semibold 14, line height 18, #687481

Olympics

Oct 27, 2019

Category Tag - Source Sans Pro Bold 13, letter-spacing 1, #00B3E4
Date Source Sans Pro Semibold 13, #687481

Tabs - Source Sans Pro Semibold 14, #687481

Olympic Trials

College

Club

Beginners

Nutrition

Tabs - usas-tabs-slashtabselector-item-selected and usas-tabs-slashtabselector-item

Color Palette

#1D1D1D- Dark Headlines

#041E42 - Large Headlines

#002058

#00B3E4

#048BB0 - For Gradients

#BA0C2F

#E02A4F - For Gradients

#85754E

#B1953A - Overlines

#333333

#FFFFFF

#F3F3F3 - Table & Grid Hover

#C1C6C8 - Lines & Outlines

#8A8D8F

#687481

Gradients

#00B3E4- #048BB0 - 45 degrees

#041E42 - #002058 - 45 degrees

#E02A4F - #BA0C2F - 45 degrees

Buttons

Normal State

Desktop, Primary - 58px
Normal State
Source Sans Pro, Semibold 15px
Letter-Spacing: 2px
Corner-Radius: 2px
Gradient: #E02A4F- #BA0C2F

Desktop, Donate, 40px
Normal State
Source Sans Pro, Semibold 15px
Letter-Spacing: 2px
Corner-Radius: 2px
Gradient: #00B34 - #048BB0

Desktop, Secondary(Inverted) 58px
Normal State
Source Sans Pro, Semibold 15px
Letter-Spacing: 2px
Corner-Radius: 2px
Gradient: #041E42

Desktop, Tertiary(No Stroke)
Source Sans Pro, Semibold 15px
Letter-Spacing: 2px
Text Color: #041E42
*Placed on dark backgrounds

Mobile Button Normal State

Mobile, Primary - 40px

Mobile, Donate,40px

Mobile, Secondary(Nav) 40px

Mobile, Tertiary(Inverted) 40px

Desktop - Hover State

Desktop, Primary - 58px
Hover State
Source Sans Pro, Semibold 15px
Letter-Spacing: 2px
Corner-Radius: 2px
Gradient: #E02A4F- #BA0C2F

Desktop, Donate, 40px
Hover State
Source Sans Pro, Semibold 15px
Letter-Spacing: 2px
Corner-Radius: 2px
Gradient: #00B34 - #048BB0

Desktop, Secondary(Inverted) 58px
Hover State
Source Sans Pro, Semibold 15px
Corner-Radius: 2px
Letter-Spacing: 2px
Hover Fill: #041E42

Desktop, Tertiary(Inverted) 58px
Hover State
Source Sans Pro, Semibold 15px
Letter-Spacing: 2px
Hover Text Color: #00B3E4

Card Shadows

Static

Color: 041E42 10% Opacity

Y-Axis 10, Blur 30

Hover

Color: 041E42 25% Opacity

Y-Axis 10, Blur 30

Inputs

Title(Optional)

First Name

Last Name

Input details: Border color #C1C6C8, Label color #687481, drop-drown arrow #687481
Input fields text color #333333
Corner-radius: 1px

Sort

Input details: Border color #C1C6C8, Label color #687481, drop down arrow #687481
Corner-radius: 1px

Sort

Input details: Border color #C1C6C8, Label color #687481, drop down arrow #687481
Corner-radius: 1px

Table

Name

Club

LSC

Results

Actions

Greg DePinna

Aqua Wolves

2nd

Prog. Indiv. Relay

Ellen Woytowitz

Aces

Zoom

Prog. Indiv. Relay

Brian McKenna

Aces

3rd

Prog. Indiv. Relay

Mike Meadows

US National

1st

Prog. Indiv. Relay

Name	Greg DePinna
Club	Aqua Wolves
LSC	CO
Results	2nd
Actions	Prog. Indiv. Relay

Name	Ellen Woytowitz
Club	Aces
LSC	CO
Results	Zoom
Actions	Prog. Indiv. Relay

Name	Brian McKenna
Club	Aces
LSC	CO
Results	3rd
Actions	Prog. Indiv. Relay

Name	Mike Meadows
Club	US National
LSC	US
Results	1st
Actions	Prog. Indiv. Relay

12 Column Grid

Settings:

Typography - Desktop

Become a Champion

Become a Champion

Swimming News Starts Here

TYR Pro Swim Series Greensboro

Toyota U.S. Open

New Club Requirements

New Club Requirements

Typography - Mobile

TYR Pro Swim Series Greensboro

Toyota U.S. Open

New Club Requirements

New Club Requirements

Color Palette

Gradients

Buttons

Normal State

Mobile Button Normal State

Desktop - Hover State

Card Shadows

Inputs

Sort

Sort

Table

Kendo Grid