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

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

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
  1. List item 1
  2. List item 2
  3. 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