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.
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.
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.
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.