Style Guide: evo Phase Two
Primary Colors
.color-green-darker
.bg-color-green-darker
#0D7100
rgb(13,113,0)
Used For:
Meeting WCAG contrast requirementsPrimary Buttons
Links
With gray or off-white background
.color-green-dark
.bg-color-green-dark
#0f8800
rgb(64,174,50)
Used For:
Meeting WCAG contrast requirementsPrimary Buttons
Links
.color-green
.bg-color-green
#40ae32
rgb(64,174,50)
Used For:
.color-green-light
.bg-color-color-green-light
##54e042
rgb(84,224,66)
Used For:
Primary ButtonsLinks
.color-green-super-light
.bg-color-green-super-light
#e8f5e6
Used For:
Primary ButtonsLinks
.color-blue
.bg-color-blue
#0099ff
rgb(0,153,255)
Used For:
Outlet related@color-discount
.color-red
.discount
.bg-color-red
#cc0000
rgb(204,0,0)
Used For:
Sale and Warning.color-dark-teal
.bg-color-dark-teal
#D25E48
rgb(21,76,87)
Used For:
Primary Color For CommunityMeeting WCAG contrast requirements
Normal Text AAA
.color-darker-teal
.bg-color-darker-teal
#20373D
rgb(32,55,61)
Used For:
Tertiary Color For CommunityHover States of the Dark Teal or to provide contrast with the dark teal.
.color-tomato
.bg-color-tomato
#d25e48
rgb(210,94,72)
Used For:
Complimentary Color For CommunityMeeting WCAG contrast requirements
Large Text AA
.color-tomato-wcag
.bg-color-tomato-wcag
#BD5441
rgb(189,84,65)
Used For:
Accessible Button ColorMeeting WCAG contrast requirements
Normal Text AA
.color-sunny
.bg-color-sunny
#EAC36B
rgb(234,197,107)
Used For:
Complimentary Color For CommunityMeeting WCAG contrast requirements
Black - Normal Text AAA
.color-sage
.bg-color-sage
#698F5B
rgb(105, 143, 91)
Used For:
Complimentary Color For CommunityMeeting WCAG contrast requirements
Large Text AA
.color-sage-wcag
.bg-color-sage-wcag
#5D7E50
rgb(93, 126, 80)
Used For:
Accessible Button ColorMeeting WCAG contrast requirements
Normal Text AA
.color-sage-light
.bg-color-sage-light
#698F5B at 10%
rgba(105, 143, 91, 0.1)
Used For:
Used as background color.color-sky-blue
.bg-color-sky-blue
#5c91b5
rgb(92, 145, 181)
Used For:
Complimentary Color For CommunityMeeting WCAG contrast requirements
Large Text AA
.color-sky-blue-wcag
.bg-color-sky-blue-wcag
#4e7b9a
rgb(78, 123, 154)
Used For:
Accessible Button ColorMeeting WCAG contrast requirements
Normal Text AA
.color-light-tan
.bg-color-light-tan
#f4eac5
rgb(96, 92, 77)
Used For:
Tertiary Color For CommunityUsed as background color.
Meeting WCAG contrast requirements
Black - Normal Text AAA
.color-black
.bg-color-black
#2e2e2e
Used For:
Default ButtonsHighlighted areas
Main menu
Body Copy
.color-gray-darkest
.bg-color-gray-darkest
#424242
.color-gray-darker
.bg-color-gray-darker
#585858
.color-gray-dark
.bg-color-gray-dark
#6c6c6c
.color-gray
.bg-color-gray
#969696
@brand-success
.color-gray-light
.bg-color-gray-light
#d5d5d5
@gray-lighter
.color-gray-lighter
.bg-color-gray-lighter
#f4f4f4
Used For:
BackgroundsFonts
Mont Regular (400)
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
@font-weight-regular
.font-weight-regular
Mont Regular Italic
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Mont Bold (700)
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
@font-weight-bold
.font-weight-bold
Amsi Pro Narrow Black
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Banner Caps
Banner Amsi
Banner Regular
h1 Header
Cras tempus pharetra turpis, nec posuere purus rhoncus et. Aliquam ullamcorper neque in justo.
h1 .header-light
Cras tempus pharetra turpis, nec posuere purus rhoncus et. Aliquam ullamcorper neque in justo.
h2 Header
Cras tempus pharetra turpis, nec posuere purus rhoncus et. Aliquam ullamcorper neque in justo.
h2 .header-light
Cras tempus pharetra turpis, nec posuere purus rhoncus et. Aliquam ullamcorper neque in justo.
h3 Header
Cras tempus pharetra turpis, nec posuere purus rhoncus et. Aliquam ullamcorper neque in justo.
h3 .header-light
Cras tempus pharetra turpis, nec posuere purus rhoncus et. Aliquam ullamcorper neque in justo.
h4 Header
Cras tempus pharetra turpis, nec posuere purus rhoncus et. Aliquam ullamcorper neque in justo.
h4 .header-light
Cras tempus pharetra turpis, nec posuere purus rhoncus et. Aliquam ullamcorper neque in justo.
h5 Header
Cras tempus pharetra turpis, nec posuere purus rhoncus et. Aliquam ullamcorper neque in justo.
h5 .header-light
Cras tempus pharetra turpis, nec posuere purus rhoncus et. Aliquam ullamcorper neque in justo.
Heading 1 - Font Mont
.heading-1.font-montUsed for large headings in hero banners.
Heading 1
.heading-1Used for display text over image banners.
Heading 2
.heading-2Cras tempus pharetra turpis, nec posuere purus rhoncus et. Aliquam ullamcorper neque in justo.
Heading 3
.heading-3Cras tempus pharetra turpis, nec posuere purus rhoncus et. Aliquam ullamcorper neque in justo.
Heading 4
.heading-4Cras tempus pharetra turpis, nec posuere purus rhoncus et. Aliquam ullamcorper neque in justo.
Heading 5
.heading-4Cras tempus pharetra turpis, nec posuere purus rhoncus et. Aliquam ullamcorper neque in justo.
Paragraph large
.paragraph-largeCras tempus pharetra turpis, nec posuere purus rhoncus et. Aliquam ullamcorper neque in justo.
Paragraph Style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit dolor, convallis vel urna sed, molestie vehicula augue. Nulla tempus, sapien at vehicula dictum, eros mi suscipit quam, nec commodo nunc mi aliquam velit. Praesent eget mi eget est lobortis ullamcorper quis id arcu. In hac habitasse platea dictumst. In magna mi, In Page Text Link luctus gravida purus ut, porttitor porttitor purus. Sed vulputate euismod lobortis. Proin euismod et urna vel sagittis. Morbi gravida sed sem eu scelerisque. Etiam convallis tempor neque vel auctor. Suspendisse fermentum eget dolor quis mollis. Cras tempus pharetra turpis, nec posuere purus rhoncus et. Aliquam ullamcorper neque in justo feugiat tempor nec sed ipsum. Quisque tristique arcu quis lectus consectetur, quis tincidunt arcu aliquam. Nam placerat porta velit non condimentum. Quisque suscipit enim vel porttitor ultrices. Pellentesque pharetra lectus in iaculis feugiat.
blockquote: This is a blockquote In magna mi, luctus gravida purus ut, porttitor porttitor purus. Sed vulputate euismod lobortis. Proin euismod et urna vel sagittis. Morbi gravida sed sem eu scelerisque.
Cras tempus pharetra turpis, nec posuere purus rhoncus et. Aliquam ullamcorper neque in justo feugiat tempor nec sed ipsum. Quisque tristique arcu quis lectus consectetur, quis tincidunt arcu aliquam. Nam placerat porta velit non condimentum. Quisque suscipit enim vel porttitor ultrices. Pellentesque pharetra lectus in iaculis feugiat.
Discount or on sale .discount or .on-sale both show an emphasis for sale pricing
Slash .slash is used to show a marked down price
Tab Promo Text Strong Text .tab-promo Used to call attention. can customize background color
<a href="#" class="link-icon"><span>Link with Icon</span><span class="icon-arrow-down"></span></a>
Interface Link .link-interface link style to be used outside of body copy. Example: Click to Enlarge
Link Super.link-super or also accepts .link-super(@font-size); mixins
Link More Link Super .link-super and .link-more
Link more down and link super .link-more-down.link-super
@font-size-base / .font-size-baseThis can be used as a class or a var.
@font-size-large / .font-size-largeThis can be used as a class or a var.
@font-size-small / .font-size-smallThis can be used as a class or a var.
@font-size-xsmall / .font-size-xsmallThis can be used as a class or a var.
Font Name: icomoon (Glyphs: 50)
Grid Size: 16
SVGs
svg-ico-academy
/img/SVG/hub-ico-academy.cshtml
svg-ico-ambassadors
/img/SVG/hub-ico-ambassadors.cshtml
svg-ico-events
/img/SVG/hub-ico-events.cshtml
svg-ico-guides
/img/SVG/hub-ico-guides.cshtml
svg-ico-hub
/img/SVG/hub-ico-hub.cshtml
svg-ico-impact
/img/SVG/hub-ico-impact.cshtml
svg-ico-locations
/img/SVG/hub-ico-locations.cshtml
svg-ico-rest
/img/SVG/hub-ico-rest.cshtmlInterface Elements
.loading()
Can be used as a mixin or a class, sets a position relative on the element and a class of loading uses :after tag and position absolute for the animation
.loading and .loading-absolute (shown)
.loading(@size: 3em, @border: 5px, @color: #f1f1f1, @opacity: .8) {}
.hovergrow()
Hover Grow!
Effect used to emphasize a tile is a link.
.divider
Prefer @border-light and @border-heavy vars.
Can be used as a class or a mixin. Classes are .divider (border-top) and .divider-bottom (border)
.divider(@pos: top; @weight: 2px; @color: @color-gray-light);
Uses :before
.divider-before(@weight: 2px; @color: @color-gray-light; @padding-bottom: 10px)
Uses :after
.divider-after(@weight: 2px; @color: @color-gray-light; @padding-top: 10px)
.divider
.divider-thick
.divider-bottom
.divider-thick-bottom
.responsive-video
<div class="responsive-video">
<iframe src="https://player.vimeo.com/video/"></iframe>
</div>
Separators
.separator-shadow. It needs a div or a p tag inside.separator-shadow .separator-shadow-top.separator-shadow .separator-shadow-bottomForms
Horizontal Form
Form Column
Inline Form
Large Form Fields
Small Form Fields
Inline Form Using Grid Columns
Input Groups
Forms with Alerts
Different Form Alert Styles
Vertical Margins and Padding
Applied to the bottom of an element attempt to just use the variable when possible.
.margin-small, .padding-small or @margin-small
.margin-base, .padding-base or @margin-base
.margin-large, .padding-large or @margin-large
.margin-xlarge, .padding-xlarge or @margin-xlarge