Style guide

This page contains the styles and classes used throughout the SecurityStudio website. Changing any colors or styles on this page will apply those changes site-wide.

Typography

Headings and text styles

HTML Headings

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

Semantic headings

Heading 1

Heading 2

Heading H2

Heading 3

Heading H3

Heading 4

Heading H4

Heading 5

Heading H5

Heading 6

Heading H6

GLOBAL TEXT STYLES

Text default
Text Large
Text large
Text Small
Text small
Text Extra Small
Text extra small - Lorem ipsum dolor sit amet
Text Semi
Text extra small - Lorem ipsum dolor sit amet
Label
Label
Label
Black
Label black
Label
White
Label light
Subtitle
Subtitle

GLOBAL TEXT Colors

Text Primary
Text Primary
Text Primary Dark
Text Primary Dark
Text White
Text White
Text Light Grey
Text Light Grey
Text Grey
Text Grey
Text Black
Text Black

COMMON TEXT COMBO CLASSES

Text Large

Text Primary

Text Semi

Text Primary

Subtitle

Text Small

Text Primary

Colors

Color palette and global swatches
Primary
#2981ff
Primary Dark
#1e5eb8
Primary Light
#549bff
Brand Blue
#005ca5
Dark
#051528
Dark 90
#142335
Dark 80
#374453
Dark 40
#8A8F98
Dark 10
#E6E8E9
Dark 6
#F6F6F6
White
#FFFFFF
Accent
#eeb524

Buttons

Buttons and links
Button
Primary
Button
White
White
Button
Dark
Dark
Button
Light
Light
Button
Outline Primary
Outline Primary
Button
Outline White
Outline White
Button
Primary
Block
Button Block
Button
Normal Size
Button
Medium
Medium
Button
Small
Small
Link
Link
Link
Link Primary Dark
Link Primary Dark
Text Link Dark
Text Link Black

Forms

LABELS, INPUTS, FIELDS, CHECKBOXES, ETC.
First name
Last name
Email
Company name
Interest
General Inquiry
Academy
Partnerships
Message on Contact Form
Submit

Rich Text

Lists, text elements and block quote

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing.

For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

List item 1
List item 2
List item 3

List item 1
List item 2
List item 3

Block Quote

Layout Components

STRUCTURE & components

Default Container (1280px max-width)

Container

Large Container (900px max-width)

Container
max-900

Medium Container (700px max-width)

Container
max-700

Small Container (500px max-width)

Container
max-500

Inner Section (Large Padding, Default)

Inner sections provide padding within containers and wrappers.
Inner Section

Inner Section (Medium Padding)

Inner sections provide padding within containers and wrappers.
Inner Section
Medium

Inner Section (Small Padding)

Inner sections provide padding within containers and wrappers.
Inner Section
Small

Center Block

Center Blocks are used to float any type of content in the center of the page. They have no padding or margin built in and have a max-width of 760px.
Center Block

Spacing

Padding & Margins

Margin Bottom 5px

mb-5

Margin Bottom 10px

mb-10

Margin Bottom 20px

mb-20

Margin Bottom 40px

mb-40

Margin Bottom 60px

mb-60

Margin Bottom 80px

mb-80