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


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 CO 2nd Prog. Indiv. Relay
Ellen Woytowitz Aces CO Zoom Prog. Indiv. Relay
Brian McKenna Aces CO 3rd Prog. Indiv. Relay
Mike Meadows US National US 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






Kendo Grid





© Copyright 2020 USA Swimming. All Rights Reserved. Privacy Policy Terms & Conditions