Skillsoft Visual Style Guide for the web (H1)
A comprehensive overview of the typography, color palette, button, and module options for the Skillsoft website. Hero = H1, All Caps, 900
Skillsoft Typography
We have two typefaces—Spectral and Montserrat—that are deliberately used together to balance the hierarchy throughout our communications. See examples below.
Color Palette
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.
Button Styles
All website button styles and their live examples.
Kitchen Sink
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.
Basic Section
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 Content. This block can be used for an image or a video.
Expandable Section - Horizontal Tabs
Section introduction. This module works well with a few shorter links. Each item can feature two unique cta's.
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
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
Expandable Section - Link list with images
Facts CTA Section
Background can be white, cream, navy or amaranth. Max of eight items can be featured.
Accordion Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
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.
Link CTA Section. Bold text will appear in pink. Bkg = white, cream, navy, or amaranth.
Logo Showcase
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.
Logo Cloud
Viverra adipiscing at in tellus. Leo vel fringilla est ullamcorper eget nulla facilisi. Odio facilisis mauris sit amet massa vitae tortor condimentum. Molestie nunc non blandit massa enim nec.
Related Resources Section Heading
Related resources section introduction. A maximum of four resources can be selected.
Slider Section
Section Introduction
Testimonial Section
Section Introduction - Aim for 150-300 characters. Morbi leo urna molestie at elementum. Porta nibh venenatis cras sed felis. Euismod nisi porta lorem mollis aliquam ut. Diam donec adipiscing tristique risus nec feugiat in.
Two Tone CTA Section Heading
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.