Visual Style Guide

We have two typefaces—Spectral and Montserrat—that are deliberately used together to balance the hierarchy throughout our communications. See examples below.

This is an example of an unordered list.
Type blocks should be left-aligned.
Montserrat is used for headlines and sub headlines. Spectral is used for body copy and explainer text.

This is an example of an ordered list.
Links can be directly embedded into list items.

Heading 3 - Montserrat, All Caps, 900

Heading 4 - Montserrat, All Caps, 800

Heading 5 - Montserrat, Sentence Case, 600

Heading 6 - Montserrat, Sentence Case, 400

Eyebrow - Montserrat, All Caps, 500

Normal Text - Spectral, Sentence Case. Normal Text with an inline link. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Rich text quote treatment - Montserrat, Sentence Case, italics. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Color is a key identifier for our brand, and our palette has been carefully adapted to create a unique visual electricity for a digital world. See examples below.

Navy is our foundation. It’s solid. Unexpected. It asks you to look at it a bit harder. To lean in and gain a better understanding.
Cream is the warm, welcoming, more human alternative to stark white and is easier on the eye.
Amaranth is the color to grab your attention in a busy world that creates strong visual electricity against our primary navy.
Purple and Aqua are our tertiary colors that add an extra spark where necessary for specific scenarios.

All website button styles and their live examples.

To comply with accessibility standards, if the background is Amaranth, the only CTA option available is 'White.' Do not use two CTA's with an Amaranth background.

If the background is Navy, and there is only one CTA, the default button style should be 'White Outline' or 'Outline (matches section theme).'

White Outline

If the background is Cream, and there is only one CTA, the default button style should be 'Navy Outline' or 'Outline (matches section theme).'

Navy Outline

If the background is White, and there is only one CTA, the default button style should be 'Navy Outline' or 'Outline (matches section theme).'

Navy Outline

If the background is Navy, and there are two CTA's, the first button should default to 'White Outline,' and the second button should default to 'White Outline w/ White Icon.'

White w/ outline on hover White Outline w/ White Icon

If the background is Cream, and there are two CTA's, the first button should default to 'Navy,' and the second button should default to 'Navy Outline w/ Navy icon.'

Navy Navy Outline w/ Navy Icon

If the background is White, and there are two CTA's, the first button should default to 'Navy,' and the second button should default to 'Navy Outline.'

Navy Navy Outline w/ Navy Icon

The below modules have all been designed with the rebrand in mind. They can be mixed and matched according to content needs. The title of the module has been included in the headline of each module.

In iaculis nunc sed augue. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant. Praesent semper feugiat nibh sed pulvinar proin gravida. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at. Vel eros donec ac odio tempor. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor dignissim convallis aenean et tortor at risus. Tortor dignissim convallis aenean et tortor at risus. Aliquam ultrices sagittis orci a scelerisque purus semper. Nibh sed pulvinar proin gravida hendrerit. Vel risus commodo viverra maecenas accumsan lacus

Absorbing

Icon grid lorem ipsum testing.

Connection

Icon grid lorem ipsum with text.

Badge Icon

Icon grid lorem ipsum with text.

Workgroup Icon

Icon grid lorem ipsum with text.

Quote Heading

“Body of the quote. This block is best used for short, impactful quotes.”

—Quote Author

Custom CTA

This block is set up in a 1/3 - 2/3 ratio. The left is a rich text block and the right is a feature card. This style of block can be set to standard width or full width. Below is a list of all block types that can be utilized in the 'basic section' module style.

Feature Card
Icon Grid
Image
Marketo Form
Quote
Rich Text
Video

Feature Card Title

Feature Card subtitle

Feature Card Content. This block can be used for an image or a video.

Banner Image CTA

Body copy for the banner image CTA block. This block can feature one or two CTA's, and the body copy block supports rich text. The image will always have a left aligned white overlay gradient to ensure legibility.

Page Title - Kitchen Sink Page Title - Kitchen Sink

Bubble Title Icon 1

Bubble Title Icon 2

Bubble Title Icon 3

Bubble Title Icon 4

Bubble Title Icon 5

Bubble Title Icon 6

Card Title One

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Custom link text

Card Title Two - No cta example

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Card Title Three

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Custom link text

Card Title Four

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Custom link text

Card Title One

Card Title Two - No cta example

Card Title Three

Card Title Four

Card Title One

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Card Title Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Card Title Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Card One - Item Title

List Item 1
List Item 2
List Item 3
List item 4

Card Two

List Item 1
List Item 2
List Item 3
List Item 4

List item 1. This card demonstrates what it could look like if there was not a title included.

Background can be white, cream, navy or amaranth. Max of eight items can be featured.

Accordion Title

Image Callout

Image callout subheadling

This block can be used for either a static image or a video. Icons can be added in the two featured spots above and below the image. The text block supports rich text. The background can be either white, cream or navy. The angle can be turned on or off, and the height of the media can be 1/2, 1/3, or 2/3 of the page.

Custom Link Custom Link

Item Content and description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

BlogOctober 24, 2024

How Non-Linear Career Paths Can Boost Your Workforce Agility

BlogOctober 24, 2024

20+ Top-Paying IT Certifications Going Into 2025

Research ReportOctober 17, 2024

Skillsoft’s 2024 Cybersecurity Awareness Report

Content Item One

Content Description - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Custom Link Text

Content Item Two

Content Description - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Custom Link Text

+% ${ number }

Stat Title One

Stat Body Content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+% ${ number }

Stat Title Two

Stat Body Content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+% ${ number }

Stat Title Three

Stat Body Content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+% ${ number }

Stat Title Four

Stat Body Content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section Heading - Character count is ten characters per line, 40 characters total. Content - Aim for 350 or less for the character count. Dolor sed viverra ipsum nunc aliquet. Rhoncus urna neque viverra justo. Scelerisque varius morbi enim nunc faucibus a. Elit sed vulputate mi sit. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse.

CTA 1 CTA 2

Skillsoft Visual Style Guide for the web (H1)

Skillsoft Typography

Sample header (h2)

Heading 3 - Montserrat, All Caps, 900

Heading 4 - Montserrat, All Caps, 800

Heading 5 - Montserrat, Sentence Case, 600

Heading 6 - Montserrat, Sentence Case, 400

Color Palette

Button Styles

Kitchen Sink

Basic Section

Basic Section - Quote

Quote Heading

Basic Section

Feature Card Title

Banner Image CTA

Bubble Section

Bubble Section Subheading, six icon max, each icon can be a separate cta, bkg = white, tan, navy, or amaranth

Bubble Title Icon 3

Bubble Title Icon 4

Bubble Title Icon 5

Bubble Title Icon 6

Card Section 1 - Icon Cards

Card Title Two - No cta example

Card Section 2 - Simple Icon Cards

Card Title Two - No cta example

Card Section 3 - Triangles

Card Section 4 - List Card

Card One - Item Title

Card Two

Expandable Section - Accordion Ordered List

Expandable Section - Accordion Unordered List

Expandable Section - Horizontal Tabs

Expandable Section - Link list with images

Facts CTA Section

Accordion Title

Image Callout

Image callout subheadling

Link CTA Section. Bold text will appear in pink. Bkg = white, cream, navy, or amaranth.

Logo Showcase

Logo Cloud

Newsroom Section. BKG = white, cream, navy

Related Resources Section Heading

Slider Section

Content Item One

Content Item Two

Stats Section - Standard

Stats Section - Bubbles

Testimonial Section

Two Tone CTA Section Heading