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

Black

Label black

Label

White

Label light

Subtitle

GLOBAL TEXT Colors

Text Primary

Text Primary Dark

Text White

Text Light Grey

Text Grey

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

Button

Dark

Button

Light

Button

Outline Primary

Button

Outline White

Button

Primary

Block

Button Block

Button

Normal Size

Button

Medium

Button

Small

Link

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

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