Skillsetter Style Guide

Branding

Color Palette

#042E8E

CSS Variable: $primary

Main brand color, regular links, buttons, user navigation background

#F1F7FB

CSS Variable: n/a

Hover for interactables with primary background

#008CD1

CSS Variable: $accentone

Accent color, used on logo.

#2A266D

CSS Variable: n/a

Used on logo/wordmark.

#453799

CSS Variable: $secondary

Used to highlight some headers.

#388038

CSS Variable: $success

Successful text/badges

#D4403A

CSS Variable: $danger

Alert text color

#000000

CSS Variable: $body

All regular black text. Default color text.

#757575

CSS Variable: $muted

Muted text, unselected icon-only links, disabled text, placeholders

#F1F7FB

CSS Variable: n/a

Background color.

See Accessibility for contrast standards.

#2A266D #008DD1

Logo Font: Circular

Variations & vectors available upon request.

Icons

All icons are vectors from Fontawesome v4.7.0 and can be used as is formatted on their website.

Usage:

<i class='fa fa-iconname' aria-hidden='true'></i>

Images

Avoid using images as icons.

See Icons for the Fontawesome library. Exceptions may be made for default libraries with .gif files as icons, such as Jwplayer or Cameratag.

Also see Elements - Image Guidelines.

Typography

CSS Definition:

font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;

The main font used on site is Poppins. The fonts following it are fallbacks if the first fails to load.

This font is set as the default site-wide; it should not need to be manually applied except in very special cases.

Headers

h1 Appears at the top of the page, beneath any breadcrumbs. Matches with the page title.

h2 Section headers.

h3, h4, h5 Standard header hierarchy.

To meet accessibility requirements, headers must follow a strict heirarchy. If the layout requires that headers look visually like another header, keep the standard structure and use Bootstrap heading classes to override default styling.

Do not include separate non-header elements (ie. buttons) inside headers. Use container divs if they need to be styled inline.

The following mixin controls font weight and is automatically applied to all headers and strong text in the theravue.css file:

@mixin semibold-font-weight { font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; text-rendering: optimizelegibility; }

While these should be included automatically on most required elements, these styles can be applied manually using @include semibold-font-weight;.

Usage (Manual application):

.class { @include semibold-font-weight; }