Home

TraceSecurity
Style Guide Template

This Style Guide is a modern template with a focus on
super modern and clean design.

Shape Patterns

Use these shape templates to add interest to any image sections you required. These are avilable for download in SVG format below.

Images

Use this SVG shape to easily mask your own images and keep the angled style we have applied to images.

Color Palette

Primary Palette

Fill Colours
Purple
#7540ee
Blue
#01DEA9
Green
#01deb5

Secondary Palette

Supporting Colors
Orange - Warning
#7540ee
Red - Error
#01DEA9

Tertiary Palette

Neutral Tones
White
#ffffff
Casper
#fafbfc
Ghost
#c1c7d0
Slate Grey
#546681
Port Gore
#546681
Downriver
#0F2C61

Typography Styles

Headings

Typography - Poppins

Aa Bb Cc Dd Ee

Heading 1
55px

Aa Bb Cc Dd Ee

Heading 2
44px

Aa Bb Cc Dd Ee

Heading 3
36px

Aa Bb Cc Dd Ee

Heading 4
34px
Aa Bb Cc Dd Ee
Heading 5
28px
Aa Bb Cc Dd Ee
Heading 6
24px

Body Copy

Typography - Avenir Next

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Paragraph Large
18px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Normal
16px

Quotes

Typography - Poppins
The ultimate Interface component kit built to create harmony across your products.
Plain Quote Block
18px
The ultimate Interface component kit built to create harmony across your products.
Additional Detail Messages
18px

Additional Copy Elements

Typography - San Francisco
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Dots
16px
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Numbers
16px
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Letters
16px

Additional Copy Elements

Typography - San Francisco

This line rendered as bold text.

Bold Text
18px

This line rendered as italicized text.

Italicized Text
18px

This line of text is meant to be treated as deleted text.

Deleted Text
18px

This line of text is meant to be treated as deleted text.

Underline Text
18px

You can use the mark tag to highlight text.

Highlight Text
18px