Grid
*Shared styling with the springsliving.com website
Style Guide
Desktop
Max width: 1070px
Columns: 12
Margin outside columns: 30px each side
Gutter margin: 30px
Tablet
Max width: 100%
Columns: 8
Margin outside columns: 30px each side
Gutter margin: 30px
Mobile
Max width: 100%
Columns: 8
Margin outside columns: 15px each side
Gutter margin: 15px
Breakpoints
- 600px wide - small = Mobile
- 800px wide - medium = Tablet
- 1000px wide - large = Desktop
- 1200px wide - extra large = Desktop
Color Palette
New styling specific to Team Springs website
- Color:
- Onyx:
- #232323
- Color:
- Dark Gray: Text
- #3D3D3D
- Color:
- Gray:
- #232323
- Color:
- Light Gray:
- #232323
- Color:
- Dark Blue: Action
- #067ab9
- Color:
- Blue: Headlines
- #239DE2
- Color:
- Light Blue: Graphics
- #4db5f0
- Color:
- Orange: Accent 2
- #f6931D
- Color:
- Lime: Accent 3
- #bbcf2a
- Color:
- Light Blue: Graphics
- #9bd7fa
Font Styling
New styling specifict to Team Springs website but loading the same fonts.
Font Stack
Body Copy Source Sans Pro, Verdana, Geneva, sans-serif;
Weights regular 400 / regular 400 italic / semi-bold 600
Headlines 'Playfair Display', "Palatino Linotype", "Book Antiqua", Palatino, serif;
Host: Google Fonts
Default header margin: .75em o .25em
h1 Headline
Font Source Sans Pro - Semi-bold (600)
Color: Dark Gray
Size & Line-height: L: 65px / 1.2 (78px)
M: 55px / 1.2 (66px)
S: 48px/1.2 (52px)
h2 Headline
Font Source Sans Pro - Semi-bold (600)
Color: Dark Gray
Size & Line-height: L: 42px / 1.2 (78px)
M: 36px / 1.2 (66px)
S: 30px/1.2 (52px)
h3 Headline
Font Source Sans Pro - Semi-bold (600)
Color: Dark Gray
Size & Line-height: L: 36px / 1.2
M: 32px / 1.2
S: 26px/1.2
h4 Headline
Font Source Sans Pro - Semi-bold (600)
Color: Dark Gray
Size & Line-height: L:28px / 1.3
M: 24px / 1.3
S: 22px/1.3
h5 Headline
Font Source Sans Pro - Semi-bold (600)
Color: Dark Gray
Size & Line-height: L:22px / 1.3
S: 19px/1.3
h6 Headline
Font Source Sans Pro - Semi-bold (600)
Color: Dark Gray
Size & Line-height: L:19px / 1.3 (25px)
S: 16px/1.3
Body Copy. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more.
Name: Default Body Copy
Font: Source Sans Pro - Regular (400)
Color: Dark Gray
Size & Line-height: L: 19px / 1.5 (28px)
S: 17px/1.5
Small Style of body copy. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more.
Name: Default Body Copy
Font: Source Sans Pro - Regular (400)
Color: Dark Gray
Size & Line-height: L: 16px / 1.4 (22px)
S: 14px/1.4
H2 Headline Blue Centered
h5 subheadline centered
Name Intro Text Lockup
Font Source Sans Pro - Regular (400)
Color: Blue & Dark Gray
Border: 5px blue
H1 Hero
Headline
Name h1 Hero
Font Source Sans Pro - Semi-bold (600)
Color: White
Text-shadow: 0 2px 4px rgba(0,0,0,0.4)
Text-align: center
UI Components
*shared styling with the springsliving.com website but with new colors
State Default
Color Dark Blue
Box Shadow: 0.5px 1px 5px 0px rgba(0,0,18,0.25);
Font: Source Sans Pro
Size: 19px / 1
Weight: Semi-bold
Color: White
Transform: all-caps
Padding: 12px/26px
Transition: 0.3s
State Hover
Color: Blue
Box Shadow: 0.5px 1px 7px 0px rgba(0,0,18,0.4)
State Active
Color: Gray
Box Shadow: none
Hollow Button Style
State Default
BG Color: 20% Dark Gray
Border: 2px White
Box Shadow: none
Font: Source Sans Pro
Size: 19px / 1
Weight: Semi-bold
Color: White
Transform: all-caps
Padding: 12px/26px
Padding: 0.3s
State Hover
BG Color: 100% White
Text Color: Dark Gray
State Active
Color: White
Text Color: Gray
Default Text Link Style
State Default
Color: Dark Blue
Decoration: underline
Transition: color 0.3s
State Hover
Color: Blue
Decoration: None
State Active
Color: Dark Blue
Decoration: None
Social Sharing Buttons
State Default
Color: Orange
Box-shadow: none
Transition: 0.3s
State Hover
Color: Opacity 70%
Decoration: None
State Active
Color: Gray
Content Slider Nav
State Default
Arrow Color: Dark Blue
Text Color: Dark Blue
Font: Size 19 / 1.2
Weight: Semi-bold
State Hover
Arrow Color: Accent Blue
State Active
Arrow Color: Blue
Full Width Image Slider Nav
A Little About Us
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
State Default
Arrow Color: Dark Blue
Text Color: Dark Blue
Font: Size 19 / 1.2
Weight: Semi-bold
A Little About Us
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
State Hover
Arrow Color: Accent Blue
A Little About Us
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
State Active
Arrow Color: Blue
Form Elements
* Use same styling as thespringsliving.com website